diff --git a/src/js/jquery.select2.js b/src/js/jquery.select2.js index 35ead004..9136ff78 100644 --- a/src/js/jquery.select2.js +++ b/src/js/jquery.select2.js @@ -1,58 +1,58 @@ -define([ - 'jquery', - 'jquery-mousewheel', - - './select2/core', - './select2/defaults', - './select2/utils' -], function ($, _, Select2, Defaults, Utils) { - if ($.fn.select2 == null) { - // All methods that should return the element - var thisMethods = ['open', 'close', 'destroy']; - - $.fn.select2 = function (options) { - options = options || {}; - - if (typeof options === 'object') { - this.each(function () { - var instanceOptions = $.extend(true, {}, options); - - var instance = new Select2($(this), instanceOptions); - }); - - return this; - } else if (typeof options === 'string') { - var ret; - var args = Array.prototype.slice.call(arguments, 1); - - this.each(function () { - var instance = Utils.GetData(this, 'select2'); - - if (instance == null && window.console && console.error) { - console.error( - 'The select2(\'' + options + '\') method was called on an ' + - 'element that is not using Select2.' - ); - } - - ret = instance[options].apply(instance, args); - }); - - // Check if we should be returning `this` - if ($.inArray(options, thisMethods) > -1) { - return this; - } - - return ret; - } else { - throw new Error('Invalid arguments for Select2: ' + options); - } - }; - } - - if ($.fn.select2.defaults == null) { - $.fn.select2.defaults = Defaults; - } - - return Select2; -}); +define([ + 'jquery', + 'jquery-mousewheel', + + './select2/core', + './select2/defaults', + './select2/utils' +], function ($, _, Select2, Defaults, Utils) { + if ($.fn.select2 == null) { + // All methods that should return the element + var thisMethods = ['open', 'close', 'destroy']; + + $.fn.select2 = function (options) { + options = options || {}; + + if (typeof options === 'object') { + this.each(function () { + var instanceOptions = $.extend(true, {}, options); + + var instance = new Select2($(this), instanceOptions); + }); + + return this; + } else if (typeof options === 'string') { + var ret; + var args = Array.prototype.slice.call(arguments, 1); + + this.each(function () { + var instance = Utils.GetData(this, 'select2'); + + if (instance == null && window.console && console.error) { + console.error( + 'The select2(\'' + options + '\') method was called on an ' + + 'element that is not using Select2.' + ); + } + + ret = instance[options].apply(instance, args); + }); + + // Check if we should be returning `this` + if ($.inArray(options, thisMethods) > -1) { + return this; + } + + return ret; + } else { + throw new Error('Invalid arguments for Select2: ' + options); + } + }; + } + + if ($.fn.select2.defaults == null) { + $.fn.select2.defaults = Defaults; + } + + return Select2; +}); diff --git a/src/js/select2/core.js b/src/js/select2/core.js index 3ac9d9a3..8c539d12 100644 --- a/src/js/select2/core.js +++ b/src/js/select2/core.js @@ -1,551 +1,551 @@ -define([ - 'jquery', - './options', - './utils', - './keys' -], function ($, Options, Utils, KEYS) { - var Select2 = function ($element, options) { - if (Utils.GetData($element[0], 'select2') != null) { - Utils.GetData($element[0], 'select2').destroy(); - } - - this.$element = $element; - - this.id = this._generateId($element); - - options = options || {}; - - this.options = new Options(options, $element); - - Select2.__super__.constructor.call(this); - - // Set up the tabindex - - var tabindex = $element.attr('tabindex') || 0; - Utils.StoreData($element[0], 'old-tabindex', tabindex); - $element.attr('tabindex', '-1'); - - // Set up containers and adapters - - var DataAdapter = this.options.get('dataAdapter'); - this.dataAdapter = new DataAdapter($element, this.options); - - var $container = this.render(); - - this._placeContainer($container); - - var SelectionAdapter = this.options.get('selectionAdapter'); - this.selection = new SelectionAdapter($element, this.options); - this.$selection = this.selection.render(); - - this.selection.position(this.$selection, $container); - - var DropdownAdapter = this.options.get('dropdownAdapter'); - this.dropdown = new DropdownAdapter($element, this.options); - this.$dropdown = this.dropdown.render(); - - this.dropdown.position(this.$dropdown, $container); - - var ResultsAdapter = this.options.get('resultsAdapter'); - this.results = new ResultsAdapter($element, this.options, this.dataAdapter); - this.$results = this.results.render(); - - this.results.position(this.$results, this.$dropdown); - - // Bind events - - var self = this; - - // Bind the container to all of the adapters - this._bindAdapters(); - - // Register any DOM event handlers - this._registerDomEvents(); - - // Register any internal event handlers - this._registerDataEvents(); - this._registerSelectionEvents(); - this._registerDropdownEvents(); - this._registerResultsEvents(); - this._registerEvents(); - - // Set the initial state - this.dataAdapter.current(function (initialData) { - self.trigger('selection:update', { - data: initialData - }); - }); - - // Hide the original select - $element.addClass('select2-hidden-accessible'); - $element.attr('aria-hidden', 'true'); - - // Synchronize any monitored attributes - this._syncAttributes(); - - Utils.StoreData($element[0], 'select2', this); - }; - - Utils.Extend(Select2, Utils.Observable); - - Select2.prototype._generateId = function ($element) { - var id = ''; - - if ($element.attr('id') != null) { - id = $element.attr('id'); - } else if ($element.attr('name') != null) { - id = $element.attr('name') + '-' + Utils.generateChars(2); - } else { - id = Utils.generateChars(4); - } - - id = id.replace(/(:|\.|\[|\]|,)/g, ''); - id = 'select2-' + id; - - return id; - }; - - Select2.prototype._placeContainer = function ($container) { - $container.insertAfter(this.$element); - - var width = this._resolveWidth(this.$element, this.options.get('width')); - - if (width != null) { - $container.css('width', width); - } - }; - - Select2.prototype._resolveWidth = function ($element, method) { - var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i; - - if (method == 'resolve') { - var styleWidth = this._resolveWidth($element, 'style'); - - if (styleWidth != null) { - return styleWidth; - } - - return this._resolveWidth($element, 'element'); - } - - if (method == 'element') { - var elementWidth = $element.outerWidth(false); - - if (elementWidth <= 0) { - return 'auto'; - } - - return elementWidth + 'px'; - } - - if (method == 'style') { - var style = $element.attr('style'); - - if (typeof(style) !== 'string') { - return null; - } - - var attrs = style.split(';'); - - for (var i = 0, l = attrs.length; i < l; i = i + 1) { - var attr = attrs[i].replace(/\s/g, ''); - var matches = attr.match(WIDTH); - - if (matches !== null && matches.length >= 1) { - return matches[1]; - } - } - - return null; - } - - return method; - }; - - Select2.prototype._bindAdapters = function () { - this.dataAdapter.bind(this, this.$container); - this.selection.bind(this, this.$container); - - this.dropdown.bind(this, this.$container); - this.results.bind(this, this.$container); - }; - - Select2.prototype._registerDomEvents = function () { - var self = this; - - this.$element.on('change.select2', function () { - self.dataAdapter.current(function (data) { - self.trigger('selection:update', { - data: data - }); - }); - }); - - this.$element.on('focus.select2', function (evt) { - self.trigger('focus', evt); - }); - - this._sync = Utils.bind(this._syncAttributes, this); - - if (this.$element[0].attachEvent) { - this.$element[0].attachEvent('onpropertychange', this._sync); - } - - var observer = window.MutationObserver || - window.WebKitMutationObserver || - window.MozMutationObserver - ; - - if (observer != null) { - this._observer = new observer(function (mutations) { - $.each(mutations, self._sync); - }); - this._observer.observe(this.$element[0], { - attributes: true, - subtree: false - }); - } else if (this.$element[0].addEventListener) { - this.$element[0].addEventListener('DOMAttrModified', self._sync, false); - } - }; - - Select2.prototype._registerDataEvents = function () { - var self = this; - - this.dataAdapter.on('*', function (name, params) { - self.trigger(name, params); - }); - }; - - Select2.prototype._registerSelectionEvents = function () { - var self = this; - var nonRelayEvents = ['toggle', 'focus']; - - this.selection.on('toggle', function () { - self.toggleDropdown(); - }); - - this.selection.on('focus', function (params) { - self.focus(params); - }); - - this.selection.on('*', function (name, params) { - if ($.inArray(name, nonRelayEvents) !== -1) { - return; - } - - self.trigger(name, params); - }); - }; - - Select2.prototype._registerDropdownEvents = function () { - var self = this; - - this.dropdown.on('*', function (name, params) { - self.trigger(name, params); - }); - }; - - Select2.prototype._registerResultsEvents = function () { - var self = this; - - this.results.on('*', function (name, params) { - self.trigger(name, params); - }); - }; - - Select2.prototype._registerEvents = function () { - var self = this; - - this.on('open', function () { - self.$container.addClass('select2-container--open'); - }); - - this.on('close', function () { - self.$container.removeClass('select2-container--open'); - }); - - this.on('enable', function () { - self.$container.removeClass('select2-container--disabled'); - }); - - this.on('disable', function () { - self.$container.addClass('select2-container--disabled'); - }); - - this.on('blur', function () { - self.$container.removeClass('select2-container--focus'); - }); - - this.on('query', function (params) { - if (!self.isOpen()) { - self.trigger('open', {}); - } - - this.dataAdapter.query(params, function (data) { - self.trigger('results:all', { - data: data, - query: params - }); - }); - }); - - this.on('query:append', function (params) { - this.dataAdapter.query(params, function (data) { - self.trigger('results:append', { - data: data, - query: params - }); - }); - }); - - this.on('keypress', function (evt) { - var key = evt.which; - - if (self.isOpen()) { - if (key === KEYS.ESC || key === KEYS.TAB || - (key === KEYS.UP && evt.altKey)) { - self.close(); - - evt.preventDefault(); - } else if (key === KEYS.ENTER) { - self.trigger('results:select', {}); - - evt.preventDefault(); - } else if ((key === KEYS.SPACE && evt.ctrlKey)) { - self.trigger('results:toggle', {}); - - evt.preventDefault(); - } else if (key === KEYS.UP) { - self.trigger('results:previous', {}); - - evt.preventDefault(); - } else if (key === KEYS.DOWN) { - self.trigger('results:next', {}); - - evt.preventDefault(); - } - } else { - if (key === KEYS.ENTER || key === KEYS.SPACE || - (key === KEYS.DOWN && evt.altKey)) { - self.open(); - - evt.preventDefault(); - } - } - }); - }; - - Select2.prototype._syncAttributes = function () { - this.options.set('disabled', this.$element.prop('disabled')); - - if (this.options.get('disabled')) { - if (this.isOpen()) { - this.close(); - } - - this.trigger('disable', {}); - } else { - this.trigger('enable', {}); - } - }; - - /** - * Override the trigger method to automatically trigger pre-events when - * there are events that can be prevented. - */ - Select2.prototype.trigger = function (name, args) { - var actualTrigger = Select2.__super__.trigger; - var preTriggerMap = { - 'open': 'opening', - 'close': 'closing', - 'select': 'selecting', - 'unselect': 'unselecting' - }; - - if (args === undefined) { - args = {}; - } - - if (name in preTriggerMap) { - var preTriggerName = preTriggerMap[name]; - var preTriggerArgs = { - prevented: false, - name: name, - args: args - }; - - actualTrigger.call(this, preTriggerName, preTriggerArgs); - - if (preTriggerArgs.prevented) { - args.prevented = true; - - return; - } - } - - actualTrigger.call(this, name, args); - }; - - Select2.prototype.toggleDropdown = function () { - if (this.options.get('disabled')) { - return; - } - - if (this.isOpen()) { - this.close(); - } else { - this.open(); - } - }; - - Select2.prototype.open = function () { - if (this.isOpen()) { - return; - } - - this.trigger('query', {}); - }; - - Select2.prototype.close = function () { - if (!this.isOpen()) { - return; - } - - this.trigger('close', {}); - }; - - Select2.prototype.isOpen = function () { - return this.$container.hasClass('select2-container--open'); - }; - - Select2.prototype.hasFocus = function () { - return this.$container.hasClass('select2-container--focus'); - }; - - Select2.prototype.focus = function (data) { - // No need to re-trigger focus events if we are already focused - if (this.hasFocus()) { - return; - } - - this.$container.addClass('select2-container--focus'); - this.trigger('focus', {}); - }; - - Select2.prototype.enable = function (args) { - if (this.options.get('debug') && window.console && console.warn) { - console.warn( - 'Select2: The `select2("enable")` method has been deprecated and will' + - ' be removed in later Select2 versions. Use $element.prop("disabled")' + - ' instead.' - ); - } - - if (args == null || args.length === 0) { - args = [true]; - } - - var disabled = !args[0]; - - this.$element.prop('disabled', disabled); - }; - - Select2.prototype.data = function () { - if (this.options.get('debug') && - arguments.length > 0 && window.console && console.warn) { - console.warn( - 'Select2: Data can no longer be set using `select2("data")`. You ' + - 'should consider setting the value instead using `$element.val()`.' - ); - } - - var data = []; - - this.dataAdapter.current(function (currentData) { - data = currentData; - }); - - return data; - }; - - Select2.prototype.val = function (args) { - if (this.options.get('debug') && window.console && console.warn) { - console.warn( - 'Select2: The `select2("val")` method has been deprecated and will be' + - ' removed in later Select2 versions. Use $element.val() instead.' - ); - } - - if (args == null || args.length === 0) { - return this.$element.val(); - } - - var newVal = args[0]; - - if ($.isArray(newVal)) { - newVal = $.map(newVal, function (obj) { - return obj.toString(); - }); - } - - this.$element.val(newVal).trigger('change'); - }; - - Select2.prototype.destroy = function () { - this.$container.remove(); - - if (this.$element[0].detachEvent) { - this.$element[0].detachEvent('onpropertychange', this._sync); - } - - if (this._observer != null) { - this._observer.disconnect(); - this._observer = null; - } else if (this.$element[0].removeEventListener) { - this.$element[0] - .removeEventListener('DOMAttrModified', this._sync, false); - } - - this._sync = null; - - this.$element.off('.select2'); - this.$element.attr('tabindex', - Utils.GetData(this.$element[0], 'old-tabindex')); - - this.$element.removeClass('select2-hidden-accessible'); - this.$element.attr('aria-hidden', 'false'); - Utils.RemoveData(this.$element[0]); - - this.dataAdapter.destroy(); - this.selection.destroy(); - this.dropdown.destroy(); - this.results.destroy(); - - this.dataAdapter = null; - this.selection = null; - this.dropdown = null; - this.results = null; - }; - - Select2.prototype.render = function () { - var $container = $( - '' + - '' + - '' + - '' - ); - - $container.attr('dir', this.options.get('dir')); - - this.$container = $container; - - this.$container.addClass('select2-container--' + this.options.get('theme')); - - Utils.StoreData($container[0], 'element', this.$element); - - return $container; - }; - - return Select2; -}); +define([ + 'jquery', + './options', + './utils', + './keys' +], function ($, Options, Utils, KEYS) { + var Select2 = function ($element, options) { + if (Utils.GetData($element[0], 'select2') != null) { + Utils.GetData($element[0], 'select2').destroy(); + } + + this.$element = $element; + + this.id = this._generateId($element); + + options = options || {}; + + this.options = new Options(options, $element); + + Select2.__super__.constructor.call(this); + + // Set up the tabindex + + var tabindex = $element.attr('tabindex') || 0; + Utils.StoreData($element[0], 'old-tabindex', tabindex); + $element.attr('tabindex', '-1'); + + // Set up containers and adapters + + var DataAdapter = this.options.get('dataAdapter'); + this.dataAdapter = new DataAdapter($element, this.options); + + var $container = this.render(); + + this._placeContainer($container); + + var SelectionAdapter = this.options.get('selectionAdapter'); + this.selection = new SelectionAdapter($element, this.options); + this.$selection = this.selection.render(); + + this.selection.position(this.$selection, $container); + + var DropdownAdapter = this.options.get('dropdownAdapter'); + this.dropdown = new DropdownAdapter($element, this.options); + this.$dropdown = this.dropdown.render(); + + this.dropdown.position(this.$dropdown, $container); + + var ResultsAdapter = this.options.get('resultsAdapter'); + this.results = new ResultsAdapter($element, this.options, this.dataAdapter); + this.$results = this.results.render(); + + this.results.position(this.$results, this.$dropdown); + + // Bind events + + var self = this; + + // Bind the container to all of the adapters + this._bindAdapters(); + + // Register any DOM event handlers + this._registerDomEvents(); + + // Register any internal event handlers + this._registerDataEvents(); + this._registerSelectionEvents(); + this._registerDropdownEvents(); + this._registerResultsEvents(); + this._registerEvents(); + + // Set the initial state + this.dataAdapter.current(function (initialData) { + self.trigger('selection:update', { + data: initialData + }); + }); + + // Hide the original select + $element.addClass('select2-hidden-accessible'); + $element.attr('aria-hidden', 'true'); + + // Synchronize any monitored attributes + this._syncAttributes(); + + Utils.StoreData($element[0], 'select2', this); + }; + + Utils.Extend(Select2, Utils.Observable); + + Select2.prototype._generateId = function ($element) { + var id = ''; + + if ($element.attr('id') != null) { + id = $element.attr('id'); + } else if ($element.attr('name') != null) { + id = $element.attr('name') + '-' + Utils.generateChars(2); + } else { + id = Utils.generateChars(4); + } + + id = id.replace(/(:|\.|\[|\]|,)/g, ''); + id = 'select2-' + id; + + return id; + }; + + Select2.prototype._placeContainer = function ($container) { + $container.insertAfter(this.$element); + + var width = this._resolveWidth(this.$element, this.options.get('width')); + + if (width != null) { + $container.css('width', width); + } + }; + + Select2.prototype._resolveWidth = function ($element, method) { + var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i; + + if (method == 'resolve') { + var styleWidth = this._resolveWidth($element, 'style'); + + if (styleWidth != null) { + return styleWidth; + } + + return this._resolveWidth($element, 'element'); + } + + if (method == 'element') { + var elementWidth = $element.outerWidth(false); + + if (elementWidth <= 0) { + return 'auto'; + } + + return elementWidth + 'px'; + } + + if (method == 'style') { + var style = $element.attr('style'); + + if (typeof(style) !== 'string') { + return null; + } + + var attrs = style.split(';'); + + for (var i = 0, l = attrs.length; i < l; i = i + 1) { + var attr = attrs[i].replace(/\s/g, ''); + var matches = attr.match(WIDTH); + + if (matches !== null && matches.length >= 1) { + return matches[1]; + } + } + + return null; + } + + return method; + }; + + Select2.prototype._bindAdapters = function () { + this.dataAdapter.bind(this, this.$container); + this.selection.bind(this, this.$container); + + this.dropdown.bind(this, this.$container); + this.results.bind(this, this.$container); + }; + + Select2.prototype._registerDomEvents = function () { + var self = this; + + this.$element.on('change.select2', function () { + self.dataAdapter.current(function (data) { + self.trigger('selection:update', { + data: data + }); + }); + }); + + this.$element.on('focus.select2', function (evt) { + self.trigger('focus', evt); + }); + + this._sync = Utils.bind(this._syncAttributes, this); + + if (this.$element[0].attachEvent) { + this.$element[0].attachEvent('onpropertychange', this._sync); + } + + var observer = window.MutationObserver || + window.WebKitMutationObserver || + window.MozMutationObserver + ; + + if (observer != null) { + this._observer = new observer(function (mutations) { + $.each(mutations, self._sync); + }); + this._observer.observe(this.$element[0], { + attributes: true, + subtree: false + }); + } else if (this.$element[0].addEventListener) { + this.$element[0].addEventListener('DOMAttrModified', self._sync, false); + } + }; + + Select2.prototype._registerDataEvents = function () { + var self = this; + + this.dataAdapter.on('*', function (name, params) { + self.trigger(name, params); + }); + }; + + Select2.prototype._registerSelectionEvents = function () { + var self = this; + var nonRelayEvents = ['toggle', 'focus']; + + this.selection.on('toggle', function () { + self.toggleDropdown(); + }); + + this.selection.on('focus', function (params) { + self.focus(params); + }); + + this.selection.on('*', function (name, params) { + if ($.inArray(name, nonRelayEvents) !== -1) { + return; + } + + self.trigger(name, params); + }); + }; + + Select2.prototype._registerDropdownEvents = function () { + var self = this; + + this.dropdown.on('*', function (name, params) { + self.trigger(name, params); + }); + }; + + Select2.prototype._registerResultsEvents = function () { + var self = this; + + this.results.on('*', function (name, params) { + self.trigger(name, params); + }); + }; + + Select2.prototype._registerEvents = function () { + var self = this; + + this.on('open', function () { + self.$container.addClass('select2-container--open'); + }); + + this.on('close', function () { + self.$container.removeClass('select2-container--open'); + }); + + this.on('enable', function () { + self.$container.removeClass('select2-container--disabled'); + }); + + this.on('disable', function () { + self.$container.addClass('select2-container--disabled'); + }); + + this.on('blur', function () { + self.$container.removeClass('select2-container--focus'); + }); + + this.on('query', function (params) { + if (!self.isOpen()) { + self.trigger('open', {}); + } + + this.dataAdapter.query(params, function (data) { + self.trigger('results:all', { + data: data, + query: params + }); + }); + }); + + this.on('query:append', function (params) { + this.dataAdapter.query(params, function (data) { + self.trigger('results:append', { + data: data, + query: params + }); + }); + }); + + this.on('keypress', function (evt) { + var key = evt.which; + + if (self.isOpen()) { + if (key === KEYS.ESC || key === KEYS.TAB || + (key === KEYS.UP && evt.altKey)) { + self.close(); + + evt.preventDefault(); + } else if (key === KEYS.ENTER) { + self.trigger('results:select', {}); + + evt.preventDefault(); + } else if ((key === KEYS.SPACE && evt.ctrlKey)) { + self.trigger('results:toggle', {}); + + evt.preventDefault(); + } else if (key === KEYS.UP) { + self.trigger('results:previous', {}); + + evt.preventDefault(); + } else if (key === KEYS.DOWN) { + self.trigger('results:next', {}); + + evt.preventDefault(); + } + } else { + if (key === KEYS.ENTER || key === KEYS.SPACE || + (key === KEYS.DOWN && evt.altKey)) { + self.open(); + + evt.preventDefault(); + } + } + }); + }; + + Select2.prototype._syncAttributes = function () { + this.options.set('disabled', this.$element.prop('disabled')); + + if (this.options.get('disabled')) { + if (this.isOpen()) { + this.close(); + } + + this.trigger('disable', {}); + } else { + this.trigger('enable', {}); + } + }; + + /** + * Override the trigger method to automatically trigger pre-events when + * there are events that can be prevented. + */ + Select2.prototype.trigger = function (name, args) { + var actualTrigger = Select2.__super__.trigger; + var preTriggerMap = { + 'open': 'opening', + 'close': 'closing', + 'select': 'selecting', + 'unselect': 'unselecting' + }; + + if (args === undefined) { + args = {}; + } + + if (name in preTriggerMap) { + var preTriggerName = preTriggerMap[name]; + var preTriggerArgs = { + prevented: false, + name: name, + args: args + }; + + actualTrigger.call(this, preTriggerName, preTriggerArgs); + + if (preTriggerArgs.prevented) { + args.prevented = true; + + return; + } + } + + actualTrigger.call(this, name, args); + }; + + Select2.prototype.toggleDropdown = function () { + if (this.options.get('disabled')) { + return; + } + + if (this.isOpen()) { + this.close(); + } else { + this.open(); + } + }; + + Select2.prototype.open = function () { + if (this.isOpen()) { + return; + } + + this.trigger('query', {}); + }; + + Select2.prototype.close = function () { + if (!this.isOpen()) { + return; + } + + this.trigger('close', {}); + }; + + Select2.prototype.isOpen = function () { + return this.$container.hasClass('select2-container--open'); + }; + + Select2.prototype.hasFocus = function () { + return this.$container.hasClass('select2-container--focus'); + }; + + Select2.prototype.focus = function (data) { + // No need to re-trigger focus events if we are already focused + if (this.hasFocus()) { + return; + } + + this.$container.addClass('select2-container--focus'); + this.trigger('focus', {}); + }; + + Select2.prototype.enable = function (args) { + if (this.options.get('debug') && window.console && console.warn) { + console.warn( + 'Select2: The `select2("enable")` method has been deprecated and will' + + ' be removed in later Select2 versions. Use $element.prop("disabled")' + + ' instead.' + ); + } + + if (args == null || args.length === 0) { + args = [true]; + } + + var disabled = !args[0]; + + this.$element.prop('disabled', disabled); + }; + + Select2.prototype.data = function () { + if (this.options.get('debug') && + arguments.length > 0 && window.console && console.warn) { + console.warn( + 'Select2: Data can no longer be set using `select2("data")`. You ' + + 'should consider setting the value instead using `$element.val()`.' + ); + } + + var data = []; + + this.dataAdapter.current(function (currentData) { + data = currentData; + }); + + return data; + }; + + Select2.prototype.val = function (args) { + if (this.options.get('debug') && window.console && console.warn) { + console.warn( + 'Select2: The `select2("val")` method has been deprecated and will be' + + ' removed in later Select2 versions. Use $element.val() instead.' + ); + } + + if (args == null || args.length === 0) { + return this.$element.val(); + } + + var newVal = args[0]; + + if ($.isArray(newVal)) { + newVal = $.map(newVal, function (obj) { + return obj.toString(); + }); + } + + this.$element.val(newVal).trigger('change'); + }; + + Select2.prototype.destroy = function () { + this.$container.remove(); + + if (this.$element[0].detachEvent) { + this.$element[0].detachEvent('onpropertychange', this._sync); + } + + if (this._observer != null) { + this._observer.disconnect(); + this._observer = null; + } else if (this.$element[0].removeEventListener) { + this.$element[0] + .removeEventListener('DOMAttrModified', this._sync, false); + } + + this._sync = null; + + this.$element.off('.select2'); + this.$element.attr('tabindex', + Utils.GetData(this.$element[0], 'old-tabindex')); + + this.$element.removeClass('select2-hidden-accessible'); + this.$element.attr('aria-hidden', 'false'); + Utils.RemoveData(this.$element[0]); + + this.dataAdapter.destroy(); + this.selection.destroy(); + this.dropdown.destroy(); + this.results.destroy(); + + this.dataAdapter = null; + this.selection = null; + this.dropdown = null; + this.results = null; + }; + + Select2.prototype.render = function () { + var $container = $( + '' + + '' + + '' + + '' + ); + + $container.attr('dir', this.options.get('dir')); + + this.$container = $container; + + this.$container.addClass('select2-container--' + this.options.get('theme')); + + Utils.StoreData($container[0], 'element', this.$element); + + return $container; + }; + + return Select2; +}); diff --git a/src/js/select2/data/select.js b/src/js/select2/data/select.js index 78a11297..9737422d 100644 --- a/src/js/select2/data/select.js +++ b/src/js/select2/data/select.js @@ -1,285 +1,285 @@ -define([ - './base', - '../utils', - 'jquery' -], function (BaseAdapter, Utils, $) { - function SelectAdapter ($element, options) { - this.$element = $element; - this.options = options; - - SelectAdapter.__super__.constructor.call(this); - } - - Utils.Extend(SelectAdapter, BaseAdapter); - - SelectAdapter.prototype.current = function (callback) { - var data = []; - var self = this; - - this.$element.find(':selected').each(function () { - var $option = $(this); - - var option = self.item($option); - - data.push(option); - }); - - callback(data); - }; - - SelectAdapter.prototype.select = function (data) { - var self = this; - - data.selected = true; - - // If data.element is a DOM node, use it instead - if ($(data.element).is('option')) { - data.element.selected = true; - - this.$element.trigger('change'); - - return; - } - - if (this.$element.prop('multiple')) { - this.current(function (currentData) { - var val = []; - - data = [data]; - data.push.apply(data, currentData); - - for (var d = 0; d < data.length; d++) { - var id = data[d].id; - - if ($.inArray(id, val) === -1) { - val.push(id); - } - } - - self.$element.val(val); - self.$element.trigger('change'); - }); - } else { - var val = data.id; - - this.$element.val(val); - this.$element.trigger('change'); - } - }; - - SelectAdapter.prototype.unselect = function (data) { - var self = this; - - if (!this.$element.prop('multiple')) { - return; - } - - data.selected = false; - - if ($(data.element).is('option')) { - data.element.selected = false; - - this.$element.trigger('change'); - - return; - } - - this.current(function (currentData) { - var val = []; - - for (var d = 0; d < currentData.length; d++) { - var id = currentData[d].id; - - if (id !== data.id && $.inArray(id, val) === -1) { - val.push(id); - } - } - - self.$element.val(val); - - self.$element.trigger('change'); - }); - }; - - SelectAdapter.prototype.bind = function (container, $container) { - var self = this; - - this.container = container; - - container.on('select', function (params) { - self.select(params.data); - }); - - container.on('unselect', function (params) { - self.unselect(params.data); - }); - }; - - SelectAdapter.prototype.destroy = function () { - // Remove anything added to child elements - this.$element.find('*').each(function () { - // Remove any custom data set by Select2 - Utils.RemoveData(this); - }); - }; - - SelectAdapter.prototype.query = function (params, callback) { - var data = []; - var self = this; - - var $options = this.$element.children(); - - $options.each(function () { - var $option = $(this); - - if (!$option.is('option') && !$option.is('optgroup')) { - return; - } - - var option = self.item($option); - - var matches = self.matches(params, option); - - if (matches !== null) { - data.push(matches); - } - }); - - callback({ - results: data - }); - }; - - SelectAdapter.prototype.addOptions = function ($options) { - Utils.appendMany(this.$element, $options); - }; - - SelectAdapter.prototype.option = function (data) { - var option; - - if (data.children) { - option = document.createElement('optgroup'); - option.label = data.text; - } else { - option = document.createElement('option'); - - if (option.textContent !== undefined) { - option.textContent = data.text; - } else { - option.innerText = data.text; - } - } - - if (data.id) { - option.value = data.id; - } - - if (data.disabled) { - option.disabled = true; - } - - if (data.selected) { - option.selected = true; - } - - if (data.title) { - option.title = data.title; - } - - var $option = $(option); - - var normalizedData = this._normalizeItem(data); - normalizedData.element = option; - - // Override the option's data with the combined data - Utils.StoreData(option, 'data', normalizedData); - - return $option; - }; - - SelectAdapter.prototype.item = function ($option) { - var data = {}; - - data = Utils.GetData($option[0], 'data'); - - if (data != null) { - return data; - } - - if ($option.is('option')) { - data = { - id: $option.val(), - text: $option.text(), - disabled: $option.prop('disabled'), - selected: $option.prop('selected'), - title: $option.prop('title') - }; - } else if ($option.is('optgroup')) { - data = { - text: $option.prop('label'), - children: [], - title: $option.prop('title') - }; - - var $children = $option.children('option'); - var children = []; - - for (var c = 0; c < $children.length; c++) { - var $child = $($children[c]); - - var child = this.item($child); - - children.push(child); - } - - data.children = children; - } - - data = this._normalizeItem(data); - data.element = $option[0]; - - Utils.StoreData($option[0], 'data', data); - - return data; - }; - - SelectAdapter.prototype._normalizeItem = function (item) { - if (!$.isPlainObject(item)) { - item = { - id: item, - text: item - }; - } - - item = $.extend({}, { - text: '' - }, item); - - var defaults = { - selected: false, - disabled: false - }; - - if (item.id != null) { - item.id = item.id.toString(); - } - - if (item.text != null) { - item.text = item.text.toString(); - } - - if (item._resultId == null && item.id && this.container != null) { - item._resultId = this.generateResultId(this.container, item); - } - - return $.extend({}, defaults, item); - }; - - SelectAdapter.prototype.matches = function (params, data) { - var matcher = this.options.get('matcher'); - - return matcher(params, data); - }; - - return SelectAdapter; -}); +define([ + './base', + '../utils', + 'jquery' +], function (BaseAdapter, Utils, $) { + function SelectAdapter ($element, options) { + this.$element = $element; + this.options = options; + + SelectAdapter.__super__.constructor.call(this); + } + + Utils.Extend(SelectAdapter, BaseAdapter); + + SelectAdapter.prototype.current = function (callback) { + var data = []; + var self = this; + + this.$element.find(':selected').each(function () { + var $option = $(this); + + var option = self.item($option); + + data.push(option); + }); + + callback(data); + }; + + SelectAdapter.prototype.select = function (data) { + var self = this; + + data.selected = true; + + // If data.element is a DOM node, use it instead + if ($(data.element).is('option')) { + data.element.selected = true; + + this.$element.trigger('change'); + + return; + } + + if (this.$element.prop('multiple')) { + this.current(function (currentData) { + var val = []; + + data = [data]; + data.push.apply(data, currentData); + + for (var d = 0; d < data.length; d++) { + var id = data[d].id; + + if ($.inArray(id, val) === -1) { + val.push(id); + } + } + + self.$element.val(val); + self.$element.trigger('change'); + }); + } else { + var val = data.id; + + this.$element.val(val); + this.$element.trigger('change'); + } + }; + + SelectAdapter.prototype.unselect = function (data) { + var self = this; + + if (!this.$element.prop('multiple')) { + return; + } + + data.selected = false; + + if ($(data.element).is('option')) { + data.element.selected = false; + + this.$element.trigger('change'); + + return; + } + + this.current(function (currentData) { + var val = []; + + for (var d = 0; d < currentData.length; d++) { + var id = currentData[d].id; + + if (id !== data.id && $.inArray(id, val) === -1) { + val.push(id); + } + } + + self.$element.val(val); + + self.$element.trigger('change'); + }); + }; + + SelectAdapter.prototype.bind = function (container, $container) { + var self = this; + + this.container = container; + + container.on('select', function (params) { + self.select(params.data); + }); + + container.on('unselect', function (params) { + self.unselect(params.data); + }); + }; + + SelectAdapter.prototype.destroy = function () { + // Remove anything added to child elements + this.$element.find('*').each(function () { + // Remove any custom data set by Select2 + Utils.RemoveData(this); + }); + }; + + SelectAdapter.prototype.query = function (params, callback) { + var data = []; + var self = this; + + var $options = this.$element.children(); + + $options.each(function () { + var $option = $(this); + + if (!$option.is('option') && !$option.is('optgroup')) { + return; + } + + var option = self.item($option); + + var matches = self.matches(params, option); + + if (matches !== null) { + data.push(matches); + } + }); + + callback({ + results: data + }); + }; + + SelectAdapter.prototype.addOptions = function ($options) { + Utils.appendMany(this.$element, $options); + }; + + SelectAdapter.prototype.option = function (data) { + var option; + + if (data.children) { + option = document.createElement('optgroup'); + option.label = data.text; + } else { + option = document.createElement('option'); + + if (option.textContent !== undefined) { + option.textContent = data.text; + } else { + option.innerText = data.text; + } + } + + if (data.id) { + option.value = data.id; + } + + if (data.disabled) { + option.disabled = true; + } + + if (data.selected) { + option.selected = true; + } + + if (data.title) { + option.title = data.title; + } + + var $option = $(option); + + var normalizedData = this._normalizeItem(data); + normalizedData.element = option; + + // Override the option's data with the combined data + Utils.StoreData(option, 'data', normalizedData); + + return $option; + }; + + SelectAdapter.prototype.item = function ($option) { + var data = {}; + + data = Utils.GetData($option[0], 'data'); + + if (data != null) { + return data; + } + + if ($option.is('option')) { + data = { + id: $option.val(), + text: $option.text(), + disabled: $option.prop('disabled'), + selected: $option.prop('selected'), + title: $option.prop('title') + }; + } else if ($option.is('optgroup')) { + data = { + text: $option.prop('label'), + children: [], + title: $option.prop('title') + }; + + var $children = $option.children('option'); + var children = []; + + for (var c = 0; c < $children.length; c++) { + var $child = $($children[c]); + + var child = this.item($child); + + children.push(child); + } + + data.children = children; + } + + data = this._normalizeItem(data); + data.element = $option[0]; + + Utils.StoreData($option[0], 'data', data); + + return data; + }; + + SelectAdapter.prototype._normalizeItem = function (item) { + if (!$.isPlainObject(item)) { + item = { + id: item, + text: item + }; + } + + item = $.extend({}, { + text: '' + }, item); + + var defaults = { + selected: false, + disabled: false + }; + + if (item.id != null) { + item.id = item.id.toString(); + } + + if (item.text != null) { + item.text = item.text.toString(); + } + + if (item._resultId == null && item.id && this.container != null) { + item._resultId = this.generateResultId(this.container, item); + } + + return $.extend({}, defaults, item); + }; + + SelectAdapter.prototype.matches = function (params, data) { + var matcher = this.options.get('matcher'); + + return matcher(params, data); + }; + + return SelectAdapter; +}); diff --git a/src/js/select2/dropdown/attachBody.js b/src/js/select2/dropdown/attachBody.js index 5018a4f0..2c099963 100644 --- a/src/js/select2/dropdown/attachBody.js +++ b/src/js/select2/dropdown/attachBody.js @@ -1,222 +1,222 @@ -define([ - 'jquery', - '../utils' -], function ($, Utils) { - function AttachBody (decorated, $element, options) { - this.$dropdownParent = options.get('dropdownParent') || $(document.body); - - decorated.call(this, $element, options); - } - - AttachBody.prototype.bind = function (decorated, container, $container) { - var self = this; - - var setupResultsEvents = false; - - decorated.call(this, container, $container); - - container.on('open', function () { - self._showDropdown(); - self._attachPositioningHandler(container); - - if (!setupResultsEvents) { - setupResultsEvents = true; - - container.on('results:all', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - - container.on('results:append', function () { - self._positionDropdown(); - self._resizeDropdown(); - }); - } - }); - - container.on('close', function () { - self._hideDropdown(); - self._detachPositioningHandler(container); - }); - - this.$dropdownContainer.on('mousedown', function (evt) { - evt.stopPropagation(); - }); - }; - - AttachBody.prototype.destroy = function (decorated) { - decorated.call(this); - - this.$dropdownContainer.remove(); - }; - - AttachBody.prototype.position = function (decorated, $dropdown, $container) { - // Clone all of the container classes - $dropdown.attr('class', $container.attr('class')); - - $dropdown.removeClass('select2'); - $dropdown.addClass('select2-container--open'); - - $dropdown.css({ - position: 'absolute', - top: -999999 - }); - - this.$container = $container; - }; - - AttachBody.prototype.render = function (decorated) { - var $container = $(''); - - var $dropdown = decorated.call(this); - $container.append($dropdown); - - this.$dropdownContainer = $container; - - return $container; - }; - - AttachBody.prototype._hideDropdown = function (decorated) { - this.$dropdownContainer.detach(); - }; - - AttachBody.prototype._attachPositioningHandler = - function (decorated, container) { - var self = this; - - var scrollEvent = 'scroll.select2.' + container.id; - var resizeEvent = 'resize.select2.' + container.id; - var orientationEvent = 'orientationchange.select2.' + container.id; - - var $watchers = this.$container.parents().filter(Utils.hasScroll); - $watchers.each(function () { - Utils.StoreData(this, 'select2-scroll-position', { - x: $(this).scrollLeft(), - y: $(this).scrollTop() - }); - }); - - $watchers.on(scrollEvent, function (ev) { - var position = Utils.GetData(this, 'select2-scroll-position'); - $(this).scrollTop(position.y); - }); - - $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent, - function (e) { - self._positionDropdown(); - self._resizeDropdown(); - }); - }; - - AttachBody.prototype._detachPositioningHandler = - function (decorated, container) { - var scrollEvent = 'scroll.select2.' + container.id; - var resizeEvent = 'resize.select2.' + container.id; - var orientationEvent = 'orientationchange.select2.' + container.id; - - var $watchers = this.$container.parents().filter(Utils.hasScroll); - $watchers.off(scrollEvent); - - $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent); - }; - - AttachBody.prototype._positionDropdown = function () { - var $window = $(window); - - var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above'); - var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below'); - - var newDirection = null; - - var offset = this.$container.offset(); - - offset.bottom = offset.top + this.$container.outerHeight(false); - - var container = { - height: this.$container.outerHeight(false) - }; - - container.top = offset.top; - container.bottom = offset.top + container.height; - - var dropdown = { - height: this.$dropdown.outerHeight(false) - }; - - var viewport = { - top: $window.scrollTop(), - bottom: $window.scrollTop() + $window.height() - }; - - var enoughRoomAbove = viewport.top < (offset.top - dropdown.height); - var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height); - - var css = { - left: offset.left, - top: container.bottom - }; - - // Determine what the parent element is to use for calciulating the offset - var $offsetParent = this.$dropdownParent; - - // For statically positoned elements, we need to get the element - // that is determining the offset - if ($offsetParent.css('position') === 'static') { - $offsetParent = $offsetParent.offsetParent(); - } - - var parentOffset = $offsetParent.offset(); - - css.top -= parentOffset.top; - css.left -= parentOffset.left; - - if (!isCurrentlyAbove && !isCurrentlyBelow) { - newDirection = 'below'; - } - - if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) { - newDirection = 'above'; - } else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) { - newDirection = 'below'; - } - - if (newDirection == 'above' || - (isCurrentlyAbove && newDirection !== 'below')) { - css.top = container.top - parentOffset.top - dropdown.height; - } - - if (newDirection != null) { - this.$dropdown - .removeClass('select2-dropdown--below select2-dropdown--above') - .addClass('select2-dropdown--' + newDirection); - this.$container - .removeClass('select2-container--below select2-container--above') - .addClass('select2-container--' + newDirection); - } - - this.$dropdownContainer.css(css); - }; - - AttachBody.prototype._resizeDropdown = function () { - var css = { - width: this.$container.outerWidth(false) + 'px' - }; - - if (this.options.get('dropdownAutoWidth')) { - css.minWidth = css.width; - css.position = 'relative'; - css.width = 'auto'; - } - - this.$dropdown.css(css); - }; - - AttachBody.prototype._showDropdown = function (decorated) { - this.$dropdownContainer.appendTo(this.$dropdownParent); - - this._positionDropdown(); - this._resizeDropdown(); - }; - - return AttachBody; -}); +define([ + 'jquery', + '../utils' +], function ($, Utils) { + function AttachBody (decorated, $element, options) { + this.$dropdownParent = options.get('dropdownParent') || $(document.body); + + decorated.call(this, $element, options); + } + + AttachBody.prototype.bind = function (decorated, container, $container) { + var self = this; + + var setupResultsEvents = false; + + decorated.call(this, container, $container); + + container.on('open', function () { + self._showDropdown(); + self._attachPositioningHandler(container); + + if (!setupResultsEvents) { + setupResultsEvents = true; + + container.on('results:all', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + + container.on('results:append', function () { + self._positionDropdown(); + self._resizeDropdown(); + }); + } + }); + + container.on('close', function () { + self._hideDropdown(); + self._detachPositioningHandler(container); + }); + + this.$dropdownContainer.on('mousedown', function (evt) { + evt.stopPropagation(); + }); + }; + + AttachBody.prototype.destroy = function (decorated) { + decorated.call(this); + + this.$dropdownContainer.remove(); + }; + + AttachBody.prototype.position = function (decorated, $dropdown, $container) { + // Clone all of the container classes + $dropdown.attr('class', $container.attr('class')); + + $dropdown.removeClass('select2'); + $dropdown.addClass('select2-container--open'); + + $dropdown.css({ + position: 'absolute', + top: -999999 + }); + + this.$container = $container; + }; + + AttachBody.prototype.render = function (decorated) { + var $container = $(''); + + var $dropdown = decorated.call(this); + $container.append($dropdown); + + this.$dropdownContainer = $container; + + return $container; + }; + + AttachBody.prototype._hideDropdown = function (decorated) { + this.$dropdownContainer.detach(); + }; + + AttachBody.prototype._attachPositioningHandler = + function (decorated, container) { + var self = this; + + var scrollEvent = 'scroll.select2.' + container.id; + var resizeEvent = 'resize.select2.' + container.id; + var orientationEvent = 'orientationchange.select2.' + container.id; + + var $watchers = this.$container.parents().filter(Utils.hasScroll); + $watchers.each(function () { + Utils.StoreData(this, 'select2-scroll-position', { + x: $(this).scrollLeft(), + y: $(this).scrollTop() + }); + }); + + $watchers.on(scrollEvent, function (ev) { + var position = Utils.GetData(this, 'select2-scroll-position'); + $(this).scrollTop(position.y); + }); + + $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent, + function (e) { + self._positionDropdown(); + self._resizeDropdown(); + }); + }; + + AttachBody.prototype._detachPositioningHandler = + function (decorated, container) { + var scrollEvent = 'scroll.select2.' + container.id; + var resizeEvent = 'resize.select2.' + container.id; + var orientationEvent = 'orientationchange.select2.' + container.id; + + var $watchers = this.$container.parents().filter(Utils.hasScroll); + $watchers.off(scrollEvent); + + $(window).off(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent); + }; + + AttachBody.prototype._positionDropdown = function () { + var $window = $(window); + + var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above'); + var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below'); + + var newDirection = null; + + var offset = this.$container.offset(); + + offset.bottom = offset.top + this.$container.outerHeight(false); + + var container = { + height: this.$container.outerHeight(false) + }; + + container.top = offset.top; + container.bottom = offset.top + container.height; + + var dropdown = { + height: this.$dropdown.outerHeight(false) + }; + + var viewport = { + top: $window.scrollTop(), + bottom: $window.scrollTop() + $window.height() + }; + + var enoughRoomAbove = viewport.top < (offset.top - dropdown.height); + var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height); + + var css = { + left: offset.left, + top: container.bottom + }; + + // Determine what the parent element is to use for calciulating the offset + var $offsetParent = this.$dropdownParent; + + // For statically positoned elements, we need to get the element + // that is determining the offset + if ($offsetParent.css('position') === 'static') { + $offsetParent = $offsetParent.offsetParent(); + } + + var parentOffset = $offsetParent.offset(); + + css.top -= parentOffset.top; + css.left -= parentOffset.left; + + if (!isCurrentlyAbove && !isCurrentlyBelow) { + newDirection = 'below'; + } + + if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) { + newDirection = 'above'; + } else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) { + newDirection = 'below'; + } + + if (newDirection == 'above' || + (isCurrentlyAbove && newDirection !== 'below')) { + css.top = container.top - parentOffset.top - dropdown.height; + } + + if (newDirection != null) { + this.$dropdown + .removeClass('select2-dropdown--below select2-dropdown--above') + .addClass('select2-dropdown--' + newDirection); + this.$container + .removeClass('select2-container--below select2-container--above') + .addClass('select2-container--' + newDirection); + } + + this.$dropdownContainer.css(css); + }; + + AttachBody.prototype._resizeDropdown = function () { + var css = { + width: this.$container.outerWidth(false) + 'px' + }; + + if (this.options.get('dropdownAutoWidth')) { + css.minWidth = css.width; + css.position = 'relative'; + css.width = 'auto'; + } + + this.$dropdown.css(css); + }; + + AttachBody.prototype._showDropdown = function (decorated) { + this.$dropdownContainer.appendTo(this.$dropdownParent); + + this._positionDropdown(); + this._resizeDropdown(); + }; + + return AttachBody; +}); diff --git a/src/js/select2/dropdown/selectOnClose.js b/src/js/select2/dropdown/selectOnClose.js index 58d625e3..1065a467 100644 --- a/src/js/select2/dropdown/selectOnClose.js +++ b/src/js/select2/dropdown/selectOnClose.js @@ -1,40 +1,40 @@ -define([ - '../utils' -], function (Utils) { - function SelectOnClose () { } - - SelectOnClose.prototype.bind = function (decorated, container, $container) { - var self = this; - - decorated.call(this, container, $container); - - container.on('close', function () { - self._handleSelectOnClose(); - }); - }; - - SelectOnClose.prototype._handleSelectOnClose = function () { - var $highlightedResults = this.getHighlightedResults(); - - // Only select highlighted results - if ($highlightedResults.length < 1) { - return; - } - - var data = Utils.GetData($highlightedResults[0], 'data'); - - // Don't re-select already selected resulte - if ( - (data.element != null && data.element.selected) || - (data.element == null && data.selected) - ) { - return; - } - - this.trigger('select', { - data: data - }); - }; - - return SelectOnClose; -}); +define([ + '../utils' +], function (Utils) { + function SelectOnClose () { } + + SelectOnClose.prototype.bind = function (decorated, container, $container) { + var self = this; + + decorated.call(this, container, $container); + + container.on('close', function () { + self._handleSelectOnClose(); + }); + }; + + SelectOnClose.prototype._handleSelectOnClose = function () { + var $highlightedResults = this.getHighlightedResults(); + + // Only select highlighted results + if ($highlightedResults.length < 1) { + return; + } + + var data = Utils.GetData($highlightedResults[0], 'data'); + + // Don't re-select already selected resulte + if ( + (data.element != null && data.element.selected) || + (data.element == null && data.selected) + ) { + return; + } + + this.trigger('select', { + data: data + }); + }; + + return SelectOnClose; +}); diff --git a/src/js/select2/options.js b/src/js/select2/options.js index 4c3110ea..d667c4f1 100644 --- a/src/js/select2/options.js +++ b/src/js/select2/options.js @@ -1,123 +1,123 @@ -define([ - 'require', - 'jquery', - './defaults', - './utils' -], function (require, $, Defaults, Utils) { - function Options (options, $element) { - this.options = options; - - if ($element != null) { - this.fromElement($element); - } - - this.options = Defaults.apply(this.options); - - if ($element && $element.is('input')) { - var InputCompat = require(this.get('amdBase') + 'compat/inputData'); - - this.options.dataAdapter = Utils.Decorate( - this.options.dataAdapter, - InputCompat - ); - } - } - - Options.prototype.fromElement = function ($e) { - var excludedData = ['select2']; - - if (this.options.multiple == null) { - this.options.multiple = $e.prop('multiple'); - } - - if (this.options.disabled == null) { - this.options.disabled = $e.prop('disabled'); - } - - if (this.options.language == null) { - if ($e.prop('lang')) { - this.options.language = $e.prop('lang').toLowerCase(); - } else if ($e.closest('[lang]').prop('lang')) { - this.options.language = $e.closest('[lang]').prop('lang'); - } - } - - if (this.options.dir == null) { - if ($e.prop('dir')) { - this.options.dir = $e.prop('dir'); - } else if ($e.closest('[dir]').prop('dir')) { - this.options.dir = $e.closest('[dir]').prop('dir'); - } else { - this.options.dir = 'ltr'; - } - } - - $e.prop('disabled', this.options.disabled); - $e.prop('multiple', this.options.multiple); - - if (Utils.GetData($e[0], 'select2Tags')) { - if (this.options.debug && window.console && console.warn) { - console.warn( - 'Select2: The `data-select2-tags` attribute has been changed to ' + - 'use the `data-data` and `data-tags="true"` attributes and will be ' + - 'removed in future versions of Select2.' - ); - } - - Utils.StoreData($e[0], 'data', Utils.GetData($e[0], 'select2Tags')); - Utils.StoreData($e[0], 'tags', true); - } - - if (Utils.GetData($e[0], 'ajaxUrl')) { - if (this.options.debug && window.console && console.warn) { - console.warn( - 'Select2: The `data-ajax-url` attribute has been changed to ' + - '`data-ajax--url` and support for the old attribute will be removed' + - ' in future versions of Select2.' - ); - } - - $e.attr('ajax--url', Utils.GetData($e[0], 'ajaxUrl')); - Utils.StoreData($e[0], 'ajax-Url', Utils.GetData($e[0], 'ajaxUrl')); - - } - - var dataset = {}; - - // Prefer the element's `dataset` attribute if it exists - // jQuery 1.x does not correctly handle data attributes with multiple dashes - if ($.fn.jquery && $.fn.jquery.substr(0, 2) == '1.' && $e[0].dataset) { - dataset = $.extend(true, {}, $e[0].dataset, Utils.GetData($e[0])); - } else { - dataset = Utils.GetData($e[0]); - } - - var data = $.extend(true, {}, dataset); - - data = Utils._convertData(data); - - for (var key in data) { - if ($.inArray(key, excludedData) > -1) { - continue; - } - - if ($.isPlainObject(this.options[key])) { - $.extend(this.options[key], data[key]); - } else { - this.options[key] = data[key]; - } - } - - return this; - }; - - Options.prototype.get = function (key) { - return this.options[key]; - }; - - Options.prototype.set = function (key, val) { - this.options[key] = val; - }; - - return Options; -}); +define([ + 'require', + 'jquery', + './defaults', + './utils' +], function (require, $, Defaults, Utils) { + function Options (options, $element) { + this.options = options; + + if ($element != null) { + this.fromElement($element); + } + + this.options = Defaults.apply(this.options); + + if ($element && $element.is('input')) { + var InputCompat = require(this.get('amdBase') + 'compat/inputData'); + + this.options.dataAdapter = Utils.Decorate( + this.options.dataAdapter, + InputCompat + ); + } + } + + Options.prototype.fromElement = function ($e) { + var excludedData = ['select2']; + + if (this.options.multiple == null) { + this.options.multiple = $e.prop('multiple'); + } + + if (this.options.disabled == null) { + this.options.disabled = $e.prop('disabled'); + } + + if (this.options.language == null) { + if ($e.prop('lang')) { + this.options.language = $e.prop('lang').toLowerCase(); + } else if ($e.closest('[lang]').prop('lang')) { + this.options.language = $e.closest('[lang]').prop('lang'); + } + } + + if (this.options.dir == null) { + if ($e.prop('dir')) { + this.options.dir = $e.prop('dir'); + } else if ($e.closest('[dir]').prop('dir')) { + this.options.dir = $e.closest('[dir]').prop('dir'); + } else { + this.options.dir = 'ltr'; + } + } + + $e.prop('disabled', this.options.disabled); + $e.prop('multiple', this.options.multiple); + + if (Utils.GetData($e[0], 'select2Tags')) { + if (this.options.debug && window.console && console.warn) { + console.warn( + 'Select2: The `data-select2-tags` attribute has been changed to ' + + 'use the `data-data` and `data-tags="true"` attributes and will be ' + + 'removed in future versions of Select2.' + ); + } + + Utils.StoreData($e[0], 'data', Utils.GetData($e[0], 'select2Tags')); + Utils.StoreData($e[0], 'tags', true); + } + + if (Utils.GetData($e[0], 'ajaxUrl')) { + if (this.options.debug && window.console && console.warn) { + console.warn( + 'Select2: The `data-ajax-url` attribute has been changed to ' + + '`data-ajax--url` and support for the old attribute will be removed' + + ' in future versions of Select2.' + ); + } + + $e.attr('ajax--url', Utils.GetData($e[0], 'ajaxUrl')); + Utils.StoreData($e[0], 'ajax-Url', Utils.GetData($e[0], 'ajaxUrl')); + + } + + var dataset = {}; + + // Prefer the element's `dataset` attribute if it exists + // jQuery 1.x does not correctly handle data attributes with multiple dashes + if ($.fn.jquery && $.fn.jquery.substr(0, 2) == '1.' && $e[0].dataset) { + dataset = $.extend(true, {}, $e[0].dataset, Utils.GetData($e[0])); + } else { + dataset = Utils.GetData($e[0]); + } + + var data = $.extend(true, {}, dataset); + + data = Utils._convertData(data); + + for (var key in data) { + if ($.inArray(key, excludedData) > -1) { + continue; + } + + if ($.isPlainObject(this.options[key])) { + $.extend(this.options[key], data[key]); + } else { + this.options[key] = data[key]; + } + } + + return this; + }; + + Options.prototype.get = function (key) { + return this.options[key]; + }; + + Options.prototype.set = function (key, val) { + this.options[key] = val; + }; + + return Options; +}); diff --git a/src/js/select2/results.js b/src/js/select2/results.js index 2ed10727..32d6c967 100644 --- a/src/js/select2/results.js +++ b/src/js/select2/results.js @@ -1,512 +1,512 @@ -define([ - 'jquery', - './utils' -], function ($, Utils) { - function Results ($element, options, dataAdapter) { - this.$element = $element; - this.data = dataAdapter; - this.options = options; - - Results.__super__.constructor.call(this); - } - - Utils.Extend(Results, Utils.Observable); - - Results.prototype.render = function () { - var $results = $( - '
' - ); - - if (this.options.get('multiple')) { - $results.attr('aria-multiselectable', 'true'); - } - - this.$results = $results; - - return $results; - }; - - Results.prototype.clear = function () { - this.$results.empty(); - }; - - Results.prototype.displayMessage = function (params) { - var escapeMarkup = this.options.get('escapeMarkup'); - - this.clear(); - this.hideLoading(); - - var $message = $( - '' - ); - - var message = this.options.get('translations').get(params.message); - - $message.append( - escapeMarkup( - message(params.args) - ) - ); - - $message[0].className += ' select2-results__message'; - - this.$results.append($message); - }; - - Results.prototype.hideMessages = function () { - this.$results.find('.select2-results__message').remove(); - }; - - Results.prototype.append = function (data) { - this.hideLoading(); - - var $options = []; - - if (data.results == null || data.results.length === 0) { - if (this.$results.children().length === 0) { - this.trigger('results:message', { - message: 'noResults' - }); - } - - return; - } - - data.results = this.sort(data.results); - - for (var d = 0; d < data.results.length; d++) { - var item = data.results[d]; - - var $option = this.option(item); - - $options.push($option); - } - - this.$results.append($options); - }; - - Results.prototype.position = function ($results, $dropdown) { - var $resultsContainer = $dropdown.find('.select2-results'); - $resultsContainer.append($results); - }; - - Results.prototype.sort = function (data) { - var sorter = this.options.get('sorter'); - - return sorter(data); - }; - - Results.prototype.setClasses = function () { - var self = this; - - this.data.current(function (selected) { - var selectedIds = $.map(selected, function (s) { - return s.id.toString(); - }); - - var $options = self.$results - .find('.select2-results__option[aria-selected]'); - - $options.each(function () { - var $option = $(this); - - var item = Utils.GetData(this, 'data'); - - // id needs to be converted to a string when comparing - var id = '' + item.id; - - if ((item.element != null && item.element.selected) || - (item.element == null && $.inArray(id, selectedIds) > -1)) { - $option.attr('aria-selected', 'true'); - } else { - $option.attr('aria-selected', 'false'); - } - }); - - var $selected = $options.filter('[aria-selected=true]'); - - // Check if there are any selected options - if ($selected.length > 0) { - // If there are selected options, highlight the first - $selected.first().trigger('mouseenter'); - } else { - // If there are no selected options, highlight the first option - // in the dropdown - $options.first().trigger('mouseenter'); - } - }); - }; - - Results.prototype.showLoading = function (params) { - this.hideLoading(); - - var loadingMore = this.options.get('translations').get('searching'); - - var loading = { - disabled: true, - loading: true, - text: loadingMore(params) - }; - var $loading = this.option(loading); - $loading.className += ' loading-results'; - - this.$results.prepend($loading); - }; - - Results.prototype.hideLoading = function () { - this.$results.find('.loading-results').remove(); - }; - - Results.prototype.option = function (data) { - var option = document.createElement('li'); - option.className = 'select2-results__option'; - - var attrs = { - 'role': 'treeitem', - 'aria-selected': 'false' - }; - - if (data.disabled) { - delete attrs['aria-selected']; - attrs['aria-disabled'] = 'true'; - } - - if (data.id == null) { - delete attrs['aria-selected']; - } - - if (data._resultId != null) { - option.id = data._resultId; - } - - if (data.title) { - option.title = data.title; - } - - if (data.children) { - attrs.role = 'group'; - attrs['aria-label'] = data.text; - delete attrs['aria-selected']; - } - - for (var attr in attrs) { - var val = attrs[attr]; - - option.setAttribute(attr, val); - } - - if (data.children) { - var $option = $(option); - - var label = document.createElement('strong'); - label.className = 'select2-results__group'; - - var $label = $(label); - this.template(data, label); - - var $children = []; - - for (var c = 0; c < data.children.length; c++) { - var child = data.children[c]; - - var $child = this.option(child); - - $children.push($child); - } - - var $childrenContainer = $('