Skip to content

Commit

Permalink
Merge pull request #1881 from fabienwnklr/master
Browse files Browse the repository at this point in the history 
Multiple fix and enhancement
  • Loading branch information
@risadams
risadams authored Oct 8, 2022
2 parents 8c59f13 + 75a7305 commit 41b0693
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 102 deletions.
6 changes: 3 additions & 3 deletions src/plugins/clear_button/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", "");
}
});

Expand Down
58 changes: 4 additions & 54 deletions src/plugins/remove_button/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,61 +15,16 @@
* @author Brian Reavis <brian@thirdroute.com>
*/

Selectize.define('remove_button', function(options) {
Selectize.define('remove_button', function (options) {
if (this.settings.mode === 'single') return;

options = $.extend({
label : '&#xd7;',
title : 'Remove',
className : 'remove',
append : true
}, options);

var singleClose = function(thisRef, options) {

options.className = 'remove-single';

var self = thisRef;
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';

/**
* 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 $('<span>').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;
Expand Down Expand Up @@ -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);
});
7 changes: 0 additions & 7 deletions src/plugins/remove_button/plugin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,4 @@
$select-lighten-disabled-item-border
);
}

.remove-single {
position: absolute;
right: 0;
top: 0;
font-size: 23px;
}
}
31 changes: 22 additions & 9 deletions src/selectize.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ $.fn.selectize = function(settings_user) {
/**
* Initializes selectize from a <input type="text"> 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;

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++) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -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);
Expand Down
29 changes: 18 additions & 11 deletions src/selectize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -301,7 +301,11 @@ $.extend(Selectize.prototype, {
return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
},
'option': function(data, escape) {
return '<div class="option '+( data[field_value] === '' ? 'selectize-dropdown-emptyoptionlabel' : '')+'">' + escape(data[field_label]) + '</div>';
var classes = data.classes ? ' ' + data.classes : '';
classes += data[field_value] === '' ? ' selectize-dropdown-emptyoptionlabel' : '';

var styles = data.styles ? ' style="' + data.styles + '"': '';
return '<div' + styles + ' class="option' + classes + '">' + escape(data[field_label]) + '</div>';
},
'item': function(data, escape) {
return '<div class="item">' + escape(data[field_label]) + '</div>';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -613,7 +617,7 @@ $.extend(Selectize.prototype, {
/**
* Triggered on <input> focus.
*
* @param {object} e (optional)
* @param {FocusEvent} e (optional)
* @returns {boolean}
*/
onFocus: function(e) {
Expand Down Expand Up @@ -822,7 +826,7 @@ $.extend(Selectize.prototype, {
/**
* Resets the selected items to the given value.
*
* @param {mixed} value
* @param {Array<String|Number>} value
*/
setValue: function(value, silent) {
var events = silent ? [] : ['change'];
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand Down
36 changes: 25 additions & 11 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <IE11
if(console.group) console.group();
console.error(options.explanation);
if(console.group) console.groupEnd();
}
}
if (options.explanation) {
// console.group is undefined in <IE11
if (console.group) console.group();
console.error(options.explanation);
if (console.group) console.groupEnd();
}
};

/**
*
* @param {any} data Data to testing
* @returns {Boolean} true if is an JSON object
*/
var isJSON = function (data) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
};
34 changes: 27 additions & 7 deletions test/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@
optgroupValueField: 'val',
optgroupField: 'grp',
disabledField: 'dis'
});
});
assert.deepEqual(test.selectize.options, {
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false},
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false, styles: '', classes: ''},
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
});
assert.deepEqual(test.selectize.optgroups, {
'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
Expand All @@ -111,10 +111,10 @@
optgroupValueField: 'val',
optgroupField: 'grp',
disabledField: 'dis'
});
});
assert.deepEqual(test.selectize.options, {
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true},
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true, styles: '', classes: ''},
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
});
assert.deepEqual(test.selectize.optgroups, {
'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
Expand Down Expand Up @@ -210,7 +210,27 @@
expect(test.selectize.$dropdown.find('[data-selectable]')).to.has.length(1);
done();
}, 0);
});
});
it('should respect option style / class', function () {
var test;

beforeEach(function() {
test = setup_test('<select>' +
'<option value="a" style="color:red;" class="a">A</option>' +
'</select>', {
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('<select>', {});
Expand Down

0 comments on commit 41b0693

Please sign in to comment.