|
@@ -1,241 +0,0 @@
|
|
|
-(function ($, document, window, undefined) {
|
|
|
-
|
|
|
- var s2 = window.s2 = window.s2 || {};
|
|
|
-
|
|
|
- var util = s2.util;
|
|
|
- var assert = util.assert;
|
|
|
-
|
|
|
-
|
|
|
- s2.Dropdown = util.clazz(util.Observable, {
|
|
|
-
|
|
|
- construct: function (opts) {
|
|
|
- assert.isNotNull(opts, "opts parameter must be set");
|
|
|
- assert.isElement(opts.select, "opts.select must point to the select element");
|
|
|
-
|
|
|
- this.super();
|
|
|
-
|
|
|
- this.opts = opts;
|
|
|
- },
|
|
|
-
|
|
|
- bind: function (container, tag) {
|
|
|
- assert.isElement(container, "container parameter must be set");
|
|
|
- assert.isElement(tag, "tag parameter must be set");
|
|
|
-
|
|
|
-
|
|
|
- this.container = container;
|
|
|
- this.element = tag;
|
|
|
- this.element.addClass("s2-dropdown");
|
|
|
- this.element.detach();
|
|
|
- this.element.removeClass("s2-hidden");
|
|
|
-
|
|
|
- //util.detectPlatform(this.element);
|
|
|
- },
|
|
|
-
|
|
|
- show: function () {
|
|
|
- var self = this;
|
|
|
- self.opts.select.parent("body").append(this.element);
|
|
|
- self.position();
|
|
|
- self.container.addClass("s2-active");
|
|
|
- },
|
|
|
-
|
|
|
- hide: function () {
|
|
|
- var self = this;
|
|
|
- self.element.detach();
|
|
|
- self.container.removeClass("s2-active");
|
|
|
-
|
|
|
- },
|
|
|
- position: function () {
|
|
|
- var self = this,
|
|
|
- container = self.container;
|
|
|
-
|
|
|
- var
|
|
|
- offset = container.offset(),
|
|
|
- height = container.outerHeight(false),
|
|
|
- width = container.outerWidth(false),
|
|
|
- dropTop = offset.top + height,
|
|
|
- dropLeft = offset.left;
|
|
|
-
|
|
|
- self.element.css({ top: dropTop, left: dropLeft, width: width });
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- s2.SearchField = util.clazz(util.Observable, {
|
|
|
-
|
|
|
- construct: function (element) {
|
|
|
- this.super();
|
|
|
- var self = this;
|
|
|
- this.value = element.val();
|
|
|
- this.element = element;
|
|
|
- this.element.on("keyup.s2", function () {
|
|
|
- self.onKeyUp.apply(self, arguments)
|
|
|
- });
|
|
|
- },
|
|
|
- onKeyUp: function (e) {
|
|
|
- var self = this;
|
|
|
- if (self.value !== self.element.val()) {
|
|
|
- self.trigger("valueChanged", { oldValue: self.value, value: self.element.val(), event: e});
|
|
|
- self.value = self.element.val();
|
|
|
- }
|
|
|
- },
|
|
|
- focus: function () {
|
|
|
- this.element.focus();
|
|
|
- },
|
|
|
- val: function () {
|
|
|
- return this.element.val();
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- s2.ResultList = util.clazz(util.Observable, {
|
|
|
- construct: function (opts) {
|
|
|
- assert.isNotNull(opts, "opts argument must be set");
|
|
|
- assert.isElement(opts.select, "opts.select must point to the select element");
|
|
|
-
|
|
|
- this.super();
|
|
|
-
|
|
|
- this.opts = opts;
|
|
|
- this.tag = util.tag();
|
|
|
- this.queryParams = {};
|
|
|
- },
|
|
|
- render: function () {
|
|
|
- return new util.Markup("<div class='s2-results' id='", this.tag, "'></div>");
|
|
|
- },
|
|
|
- bind: function (container) {
|
|
|
- var self = this;
|
|
|
- this.container = container;
|
|
|
-
|
|
|
- this.element = container.find("#" + this.tag);
|
|
|
- assert.isElement(this.element, "Could not find result list element");
|
|
|
-
|
|
|
- this.container.attr("tabindex", "0");
|
|
|
- this.container.on("keydown", function (e) {
|
|
|
- self.onKeyDown(e);
|
|
|
- });
|
|
|
-
|
|
|
- this.container.on("focusout", function (e) {
|
|
|
- self.onBlur(e);
|
|
|
- });
|
|
|
-
|
|
|
- this.element.on("click", function () {
|
|
|
- self.onClick.apply(self, arguments);
|
|
|
- });
|
|
|
-
|
|
|
- //util.detectPlatform(this.element);
|
|
|
- },
|
|
|
- show: function () {
|
|
|
- var self = this;
|
|
|
- self.update();
|
|
|
- },
|
|
|
- update: function () {
|
|
|
- var self = this;
|
|
|
-
|
|
|
- var index = 0;
|
|
|
- self.data = [];
|
|
|
-
|
|
|
- self.element.find(".s2-options").remove();
|
|
|
- var options = $("<ul class='s2-options'></ul>");
|
|
|
- self.element.append(options);
|
|
|
-
|
|
|
- $.each(self.query(), function () {
|
|
|
- var option = $(["<li class='s2-option' data-s2-index='" + index, "'>", this.text, "</li>"].join(""));
|
|
|
- options.append(option);
|
|
|
- self.data.push(this);
|
|
|
- index++;
|
|
|
- });
|
|
|
-
|
|
|
- options.find("li").first().addClass("s2-highlighted");
|
|
|
- },
|
|
|
- query: function () {
|
|
|
- return this.opts.data.query(this.queryParams);
|
|
|
- },
|
|
|
- onClick: function (event) {
|
|
|
- var target = $(event.target);
|
|
|
- var option = target.is(".s2-option") ? target : target.parents(".s2-option").first();
|
|
|
- if (option.length > 0) {
|
|
|
- // option clicked
|
|
|
- this.trigger("select", { event: event, element: option, data: this.data[option.data("s2-index")] });
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- focus: function () {
|
|
|
- var self = this;
|
|
|
- this.container.focus();
|
|
|
- },
|
|
|
- onBlur: function (event) {
|
|
|
- var self = this;
|
|
|
- window.setTimeout(function () {
|
|
|
- // done in a time out because we want the current focusout event processed so that
|
|
|
- // document.activeElement points to element that received the new focus
|
|
|
- //console.log("blur event", event);
|
|
|
- //console.log("blur container", self.container.get(0));
|
|
|
- //console.log("blur active", document.activeElement);
|
|
|
- //console.log("blur contains", $.contains(self.container.get(0), document.activeElement));
|
|
|
- if (!$.contains(self.container.get(0), document.activeElement) && self.container.get(0) !== document.activeElement) {
|
|
|
- self.trigger("close", {event: event});
|
|
|
- }
|
|
|
- }, 0);
|
|
|
- },
|
|
|
- onKeyDown: function (event) {
|
|
|
- if (event.which == util.key.DOWN) {
|
|
|
- this.moveHighlight({delta: 1, event: event});
|
|
|
- event.preventDefault();
|
|
|
-
|
|
|
- } else if (event.which === util.key.UP) {
|
|
|
- this.moveHighlight({delta: -1, event: event});
|
|
|
- event.preventDefault();
|
|
|
- } else if (event.which === util.key.ENTER) {
|
|
|
- this.selectHighlighted({event: event});
|
|
|
- event.preventDefault();
|
|
|
- }
|
|
|
- },
|
|
|
- selectHighlighted: function (param) {
|
|
|
- var option = this.element.find(".s2-highlighted").first();
|
|
|
- this.trigger("select", { event: param.event, element: option, data: this.data[option.data("s2-index")] });
|
|
|
- },
|
|
|
- moveHighlight: function (param) {
|
|
|
- var delta = param.delta;
|
|
|
- var current = this.element.find(".s2-highlighted");
|
|
|
- var next = null;
|
|
|
- if (delta === 1) {
|
|
|
- next = current.next();
|
|
|
- } else {
|
|
|
- next = current.prev();
|
|
|
- }
|
|
|
-
|
|
|
- current.removeClass("s2-highlighted");
|
|
|
- next.addClass("s2-highlighted");
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- s2.ResultListWithSearch = util.clazz(Object, {
|
|
|
- render: function () {
|
|
|
- this.searchTag = util.tag();
|
|
|
- var markup = new util.Markup(
|
|
|
- "<div class='s2-search'>", //
|
|
|
- " <input type='text' id='", this.searchTag, "'/>", //
|
|
|
- " <a href='#' class='s2-test'>click me</a>", //
|
|
|
- " {{original}}", //
|
|
|
- "</div>");
|
|
|
-
|
|
|
- markup.replace("original", this.decorated());
|
|
|
- return markup;
|
|
|
- },
|
|
|
- bind: function (container) {
|
|
|
- this.decorated(container);
|
|
|
- var self = this;
|
|
|
- this.searchField = new s2.SearchField(container.find("#" + this.searchTag));
|
|
|
- this.searchField.on("valueChanged", function (params) {
|
|
|
- self.onSearch.apply(self, arguments);
|
|
|
- });
|
|
|
- },
|
|
|
- focus: function () {
|
|
|
- this.searchField.focus();
|
|
|
- },
|
|
|
- onSearch: function (params) {
|
|
|
- this.delegate.queryParams.term = this.searchField.val();
|
|
|
- this.delegate.update();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-})(jQuery, document, window);
|