diff --git a/src/plugins/clear_button/plugin.js b/src/plugins/clear_button/plugin.js index da3478eba..8542f14f7 100644 --- a/src/plugins/clear_button/plugin.js +++ b/src/plugins/clear_button/plugin.js @@ -47,10 +47,10 @@ Selectize.define("clear_button", function (options) { } self.on("change", function () { - if (self.getValue() !== "" || self.getValue().length === 0) { - self.$wrapper.find("." + options.className).css("display", ""); - } else { + if (self.getValue() === "" || self.getValue().length === 0) { self.$wrapper.find("." + options.className).css("display", "none"); + } else { + self.$wrapper.find("." + options.className).css("display", ""); } }); diff --git a/src/plugins/remove_button/plugin.js b/src/plugins/remove_button/plugin.js index a39387da4..d468026df 100644 --- a/src/plugins/remove_button/plugin.js +++ b/src/plugins/remove_button/plugin.js @@ -15,7 +15,9 @@ * @author Brian Reavis */ -Selectize.define('remove_button', function(options) { +Selectize.define('remove_button', function (options) { + if (this.settings.mode === 'single') return; + options = $.extend({ label : '×', title : 'Remove', @@ -23,53 +25,6 @@ Selectize.define('remove_button', function(options) { append : true }, options); - var singleClose = function(thisRef, options) { - - options.className = 'remove-single'; - - var self = thisRef; - var html = '' + options.label + ''; - - /** - * Appends an element as a child (with raw HTML). - * - * @param {string} html_container - * @param {string} html_element - * @return {string} - */ - var append = function(html_container, html_element) { - return $('').append(html_container) - .append(html_element); - }; - - thisRef.setup = (function() { - var original = self.setup; - return function() { - // override the item rendering method to add the button to each - if (options.append) { - var id = $(self.$input.context).attr('id'); - var selectizer = $('#'+id); - - var render_item = self.settings.render.item; - self.settings.render.item = function(data) { - return append(render_item.apply(thisRef, arguments), html); - }; - } - - original.apply(thisRef, arguments); - - // add event listener - thisRef.$control.on('click', '.' + options.className, function(e) { - e.preventDefault(); - if (self.isLocked) return; - - self.clear(); - }); - - }; - })(); - }; - var multiClose = function(thisRef, options) { var self = thisRef; @@ -117,10 +72,5 @@ Selectize.define('remove_button', function(options) { })(); }; - if (this.settings.mode === 'single') { - singleClose(this, options); - return; - } else { - multiClose(this, options); - } + multiClose(this, options); }); diff --git a/src/plugins/remove_button/plugin.scss b/src/plugins/remove_button/plugin.scss index b88c9f219..6e8d24e62 100644 --- a/src/plugins/remove_button/plugin.scss +++ b/src/plugins/remove_button/plugin.scss @@ -35,11 +35,4 @@ $select-lighten-disabled-item-border ); } - - .remove-single { - position: absolute; - right: 0; - top: 0; - font-size: 23px; - } } diff --git a/src/selectize.jquery.js b/src/selectize.jquery.js index a9af3b386..d8034d43c 100644 --- a/src/selectize.jquery.js +++ b/src/selectize.jquery.js @@ -12,8 +12,8 @@ $.fn.selectize = function(settings_user) { /** * Initializes selectize from a element. * - * @param {object} $input - * @param {object} settings_element + * @param {JQuery} $input + * @param {Object} settings_element */ var init_textbox = function($input, settings_element) { var i, n, values, option; @@ -21,7 +21,7 @@ $.fn.selectize = function(settings_user) { var data_raw = $input.attr(attr_data); if (!data_raw) { - var value = $.trim($input.val() || ''); + var value = ($input.val() || '').trim(); if (!settings.allowEmptyOption && !value.length) return; values = value.split(settings.delimiter); for (i = 0, n = values.length; i < n; i++) { @@ -51,11 +51,22 @@ $.fn.selectize = function(settings_user) { var optionsMap = {}; var readData = function($el) { - var data = attr_data && $el.attr(attr_data); + var data = attr_data && $el.attr(attr_data); + var allData = $el.data(); + var obj = {}; + if (typeof data === 'string' && data.length) { - return JSON.parse(data); - } - return null; + if (isJSON(data)) { + Object.assign(obj, JSON.parse(data)) + } else { + obj[data] = data; + } + } + + + Object.assign(obj, allData); + + return obj || null; }; var addOption = function($option, group) { @@ -73,7 +84,7 @@ $.fn.selectize = function(settings_user) { var arr = optionsMap[value][field_optgroup]; if (!arr) { optionsMap[value][field_optgroup] = group; - } else if (!$.isArray(arr)) { + } else if (!Array.isArray(arr)) { optionsMap[value][field_optgroup] = [arr, group]; } else { arr.push(group); @@ -86,7 +97,9 @@ $.fn.selectize = function(settings_user) { option[field_label] = option[field_label] || $option.text(); option[field_value] = option[field_value] || value; option[field_disabled] = option[field_disabled] || $option.prop('disabled'); - option[field_optgroup] = option[field_optgroup] || group; + option[field_optgroup] = option[field_optgroup] || group; + option.styles = $option.attr('style') || ''; + option.classes = $option.attr('class') || ''; optionsMap[value] = option; options.push(option); diff --git a/src/selectize.js b/src/selectize.js index eca2da727..6f219e0d8 100644 --- a/src/selectize.js +++ b/src/selectize.js @@ -63,7 +63,7 @@ var Selectize = function($input, settings) { self.registerOption(self.settings.options[i]); } delete self.settings.options; - } + } // build optgroup table if (self.settings.optgroups) { @@ -301,7 +301,11 @@ $.extend(Selectize.prototype, { return '
' + escape(data[field_optgroup]) + '
'; }, 'option': function(data, escape) { - return '
' + escape(data[field_label]) + '
'; + var classes = data.classes ? ' ' + data.classes : ''; + classes += data[field_value] === '' ? ' selectize-dropdown-emptyoptionlabel' : ''; + + var styles = data.styles ? ' style="' + data.styles + '"': ''; + return '' + escape(data[field_label]) + ''; }, 'item': function(data, escape) { return '
' + escape(data[field_label]) + '
'; @@ -353,7 +357,7 @@ $.extend(Selectize.prototype, { * Triggered when the main control element * has a click event. * - * @param {object} e + * @param {PointerEvent} e * @return {boolean} */ onClick: function(e) { @@ -613,7 +617,7 @@ $.extend(Selectize.prototype, { /** * Triggered on focus. * - * @param {object} e (optional) + * @param {FocusEvent} e (optional) * @returns {boolean} */ onFocus: function(e) { @@ -822,7 +826,7 @@ $.extend(Selectize.prototype, { /** * Resets the selected items to the given value. * - * @param {mixed} value + * @param {Array} value */ setValue: function(value, silent) { var events = silent ? [] : ['change']; @@ -1611,10 +1615,10 @@ $.extend(Selectize.prototype, { if (inputMode === 'single') self.clear(silent); if (inputMode === 'multi' && self.isFull()) return; - $item = $(self.render('item', self.options[value])); + $item = $(self.render('item', self.options[value])); wasFull = self.isFull(); self.items.splice(self.caretPos, 0, value); - self.insertAtCaret($item); + self.insertAtCaret($item); if (!self.isPending || (!wasFull && self.isFull())) { self.refreshState(); } @@ -1666,7 +1670,8 @@ $.extend(Selectize.prototype, { if (i !== -1) { self.trigger('item_before_remove', value, $item); $item.remove(); - if ($item.hasClass('active')) { + if ($item.hasClass('active')) { + $item.removeClass('active'); idx = self.$activeItems.indexOf($item[0]); self.$activeItems.splice(idx, 1); } @@ -1891,8 +1896,7 @@ $.extend(Selectize.prototype, { if ( self.isLocked || self.isOpen || - (self.settings.mode === "multi" && self.isFull()) || - self.$control_input.is(":invalid") + (self.settings.mode === "multi" && self.isFull()) ) return; self.focus(); @@ -2016,7 +2020,10 @@ $.extend(Selectize.prototype, { */ insertAtCaret: function($el) { var caret = Math.min(this.caretPos, this.items.length); - var el = $el[0]; + var el = $el[0]; + /** + * @type {HTMLElement} + **/ var target = this.buffer || this.$control[0]; if (caret === 0) { diff --git a/src/utils.js b/src/utils.js index e4464a083..5c3c7f8e7 100644 --- a/src/utils.js +++ b/src/utils.js @@ -346,16 +346,30 @@ var domToString = function(d) { return tmp.innerHTML; }; -var logError = function(message, options){ - if(!options) options = {}; - var component = "Selectize"; +var logError = function (message, options) { + if (!options) options = {}; + var component = "Selectize"; - console.error(component + ": " + message) + console.error(component + ": " + message) - if(options.explanation){ - // console.group is undefined in ' + + '' + + '', { + dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 } + }); + }); + + it('should dropdown height to be equal 100', function(done) { + test.selectize.focus(); + + window.setTimeout(function () { + expect(test.selectize.$dropdown_content.find('.option').attr('style')).to.be.equal('color:red;'); + expect(test.selectize.$dropdown_content.find('.option').hasClass('a')).to.be.equal(true); + }, 0); + }); + }); describe('getValue()', function() { it('should return "" when empty', function() { var test = setup_test('