Skip to content

Commit 41b0693

Browse files
risadamsrisadams
authored
Merge pull request #1881 from fabienwnklr/master
Multiple fix and enhancement
2 parents 8c59f13 + 75a7305 commit 41b0693

File tree

7 files changed

+99
-102
lines changed

7 files changed

+99
-102
lines changed

‎src/plugins/clear_button/plugin.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ Selectize.define("clear_button", function (options) {
4747
}
4848

4949
self.on("change", function () {
50-
if (self.getValue() !== "" || self.getValue().length === 0) {
51-
self.$wrapper.find("." + options.className).css("display", "");
52-
} else {
50+
if (self.getValue() === "" || self.getValue().length === 0) {
5351
self.$wrapper.find("." + options.className).css("display", "none");
52+
} else {
53+
self.$wrapper.find("." + options.className).css("display", "");
5454
}
5555
});
5656

‎src/plugins/remove_button/plugin.js

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -15,61 +15,16 @@
1515
* @author Brian Reavis <brian@thirdroute.com>
1616
*/
1717

18-
Selectize.define('remove_button', function(options) {
18+
Selectize.define('remove_button', function (options) {
19+
if (this.settings.mode === 'single') return;
20+
1921
options = $.extend({
2022
label : '&#xd7;',
2123
title : 'Remove',
2224
className : 'remove',
2325
append : true
2426
}, options);
2527

26-
var singleClose = function(thisRef, options) {
27-
28-
options.className = 'remove-single';
29-
30-
var self = thisRef;
31-
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
32-
33-
/**
34-
* Appends an element as a child (with raw HTML).
35-
*
36-
* @param {string} html_container
37-
* @param {string} html_element
38-
* @return {string}
39-
*/
40-
var append = function(html_container, html_element) {
41-
return $('<span>').append(html_container)
42-
.append(html_element);
43-
};
44-
45-
thisRef.setup = (function() {
46-
var original = self.setup;
47-
return function() {
48-
// override the item rendering method to add the button to each
49-
if (options.append) {
50-
var id = $(self.$input.context).attr('id');
51-
var selectizer = $('#'+id);
52-
53-
var render_item = self.settings.render.item;
54-
self.settings.render.item = function(data) {
55-
return append(render_item.apply(thisRef, arguments), html);
56-
};
57-
}
58-
59-
original.apply(thisRef, arguments);
60-
61-
// add event listener
62-
thisRef.$control.on('click', '.' + options.className, function(e) {
63-
e.preventDefault();
64-
if (self.isLocked) return;
65-
66-
self.clear();
67-
});
68-
69-
};
70-
})();
71-
};
72-
7328
var multiClose = function(thisRef, options) {
7429

7530
var self = thisRef;
@@ -117,10 +72,5 @@ Selectize.define('remove_button', function(options) {
11772
})();
11873
};
11974

120-
if (this.settings.mode === 'single') {
121-
singleClose(this, options);
122-
return;
123-
} else {
124-
multiClose(this, options);
125-
}
75+
multiClose(this, options);
12676
});

‎src/plugins/remove_button/plugin.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,4 @@
3535
$select-lighten-disabled-item-border
3636
);
3737
}
38-
39-
.remove-single {
40-
position: absolute;
41-
right: 0;
42-
top: 0;
43-
font-size: 23px;
44-
}
4538
}

‎src/selectize.jquery.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ $.fn.selectize = function(settings_user) {
1212
/**
1313
* Initializes selectize from a <input type="text"> element.
1414
*
15-
* @param {object} $input
16-
* @param {object} settings_element
15+
* @param {JQuery} $input
16+
* @param {Object} settings_element
1717
*/
1818
var init_textbox = function($input, settings_element) {
1919
var i, n, values, option;
2020

2121
var data_raw = $input.attr(attr_data);
2222

2323
if (!data_raw) {
24-
var value = $.trim($input.val() || '');
24+
var value = ($input.val() || '').trim();
2525
if (!settings.allowEmptyOption && !value.length) return;
2626
values = value.split(settings.delimiter);
2727
for (i = 0, n = values.length; i < n; i++) {
@@ -51,11 +51,22 @@ $.fn.selectize = function(settings_user) {
5151
var optionsMap = {};
5252

5353
var readData = function($el) {
54-
var data = attr_data && $el.attr(attr_data);
54+
var data = attr_data && $el.attr(attr_data);
55+
var allData = $el.data();
56+
var obj = {};
57+
5558
if (typeof data === 'string' && data.length) {
56-
return JSON.parse(data);
57-
}
58-
return null;
59+
if (isJSON(data)) {
60+
Object.assign(obj, JSON.parse(data))
61+
} else {
62+
obj[data] = data;
63+
}
64+
}
65+
66+
67+
Object.assign(obj, allData);
68+
69+
return obj || null;
5970
};
6071

6172
var addOption = function($option, group) {
@@ -73,7 +84,7 @@ $.fn.selectize = function(settings_user) {
7384
var arr = optionsMap[value][field_optgroup];
7485
if (!arr) {
7586
optionsMap[value][field_optgroup] = group;
76-
} else if (!$.isArray(arr)) {
87+
} else if (!Array.isArray(arr)) {
7788
optionsMap[value][field_optgroup] = [arr, group];
7889
} else {
7990
arr.push(group);
@@ -86,7 +97,9 @@ $.fn.selectize = function(settings_user) {
8697
option[field_label] = option[field_label] || $option.text();
8798
option[field_value] = option[field_value] || value;
8899
option[field_disabled] = option[field_disabled] || $option.prop('disabled');
89-
option[field_optgroup] = option[field_optgroup] || group;
100+
option[field_optgroup] = option[field_optgroup] || group;
101+
option.styles = $option.attr('style') || '';
102+
option.classes = $option.attr('class') || '';
90103

91104
optionsMap[value] = option;
92105
options.push(option);

‎src/selectize.js

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ var Selectize = function($input, settings) {
6363
self.registerOption(self.settings.options[i]);
6464
}
6565
delete self.settings.options;
66-
}
66+
}
6767

6868
// build optgroup table
6969
if (self.settings.optgroups) {
@@ -301,7 +301,11 @@ $.extend(Selectize.prototype, {
301301
return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
302302
},
303303
'option': function(data, escape) {
304-
return '<div class="option '+( data[field_value] === '' ? 'selectize-dropdown-emptyoptionlabel' : '')+'">' + escape(data[field_label]) + '</div>';
304+
var classes = data.classes ? ' ' + data.classes : '';
305+
classes += data[field_value] === '' ? ' selectize-dropdown-emptyoptionlabel' : '';
306+
307+
var styles = data.styles ? ' style="' + data.styles + '"': '';
308+
return '<div' + styles + ' class="option' + classes + '">' + escape(data[field_label]) + '</div>';
305309
},
306310
'item': function(data, escape) {
307311
return '<div class="item">' + escape(data[field_label]) + '</div>';
@@ -353,7 +357,7 @@ $.extend(Selectize.prototype, {
353357
* Triggered when the main control element
354358
* has a click event.
355359
*
356-
* @param {object} e
360+
* @param {PointerEvent} e
357361
* @return {boolean}
358362
*/
359363
onClick: function(e) {
@@ -613,7 +617,7 @@ $.extend(Selectize.prototype, {
613617
/**
614618
* Triggered on <input> focus.
615619
*
616-
* @param {object} e (optional)
620+
* @param {FocusEvent} e (optional)
617621
* @returns {boolean}
618622
*/
619623
onFocus: function(e) {
@@ -822,7 +826,7 @@ $.extend(Selectize.prototype, {
822826
/**
823827
* Resets the selected items to the given value.
824828
*
825-
* @param {mixed} value
829+
* @param {Array<String|Number>} value
826830
*/
827831
setValue: function(value, silent) {
828832
var events = silent ? [] : ['change'];
@@ -1611,10 +1615,10 @@ $.extend(Selectize.prototype, {
16111615
if (inputMode === 'single') self.clear(silent);
16121616
if (inputMode === 'multi' && self.isFull()) return;
16131617

1614-
$item = $(self.render('item', self.options[value]));
1618+
$item = $(self.render('item', self.options[value]));
16151619
wasFull = self.isFull();
16161620
self.items.splice(self.caretPos, 0, value);
1617-
self.insertAtCaret($item);
1621+
self.insertAtCaret($item);
16181622
if (!self.isPending || (!wasFull && self.isFull())) {
16191623
self.refreshState();
16201624
}
@@ -1666,7 +1670,8 @@ $.extend(Selectize.prototype, {
16661670
if (i !== -1) {
16671671
self.trigger('item_before_remove', value, $item);
16681672
$item.remove();
1669-
if ($item.hasClass('active')) {
1673+
if ($item.hasClass('active')) {
1674+
$item.removeClass('active');
16701675
idx = self.$activeItems.indexOf($item[0]);
16711676
self.$activeItems.splice(idx, 1);
16721677
}
@@ -1891,8 +1896,7 @@ $.extend(Selectize.prototype, {
18911896
if (
18921897
self.isLocked ||
18931898
self.isOpen ||
1894-
(self.settings.mode === "multi" && self.isFull()) ||
1895-
self.$control_input.is(":invalid")
1899+
(self.settings.mode === "multi" && self.isFull())
18961900
)
18971901
return;
18981902
self.focus();
@@ -2016,7 +2020,10 @@ $.extend(Selectize.prototype, {
20162020
*/
20172021
insertAtCaret: function($el) {
20182022
var caret = Math.min(this.caretPos, this.items.length);
2019-
var el = $el[0];
2023+
var el = $el[0];
2024+
/**
2025+
* @type {HTMLElement}
2026+
**/
20202027
var target = this.buffer || this.$control[0];
20212028

20222029
if (caret === 0) {

‎src/utils.js

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -346,16 +346,30 @@ var domToString = function(d) {
346346
return tmp.innerHTML;
347347
};
348348

349-
var logError = function(message, options){
350-
if(!options) options = {};
351-
var component = "Selectize";
349+
var logError = function (message, options) {
350+
if (!options) options = {};
351+
var component = "Selectize";
352352

353-
console.error(component + ": " + message)
353+
console.error(component + ": " + message)
354354

355-
if(options.explanation){
356-
// console.group is undefined in <IE11
357-
if(console.group) console.group();
358-
console.error(options.explanation);
359-
if(console.group) console.groupEnd();
360-
}
361-
}
355+
if (options.explanation) {
356+
// console.group is undefined in <IE11
357+
if (console.group) console.group();
358+
console.error(options.explanation);
359+
if (console.group) console.groupEnd();
360+
}
361+
};
362+
363+
/**
364+
*
365+
* @param {any} data Data to testing
366+
* @returns {Boolean} true if is an JSON object
367+
*/
368+
var isJSON = function (data) {
369+
try {
370+
JSON.parse(str);
371+
} catch (e) {
372+
return false;
373+
}
374+
return true;
375+
};

‎test/setup.js

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,10 @@
8787
optgroupValueField: 'val',
8888
optgroupField: 'grp',
8989
disabledField: 'dis'
90-
});
90+
});
9191
assert.deepEqual(test.selectize.options, {
92-
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false},
93-
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
92+
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: false, styles: '', classes: ''},
93+
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
9494
});
9595
assert.deepEqual(test.selectize.optgroups, {
9696
'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
@@ -111,10 +111,10 @@
111111
optgroupValueField: 'val',
112112
optgroupField: 'grp',
113113
disabledField: 'dis'
114-
});
114+
});
115115
assert.deepEqual(test.selectize.options, {
116-
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true},
117-
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false}
116+
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1, dis: true, styles: '', classes: ''},
117+
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2, dis: false, styles: '', classes: ''}
118118
});
119119
assert.deepEqual(test.selectize.optgroups, {
120120
'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3, dis: false},
@@ -210,7 +210,27 @@
210210
expect(test.selectize.$dropdown.find('[data-selectable]')).to.has.length(1);
211211
done();
212212
}, 0);
213-
});
213+
});
214+
it('should respect option style / class', function () {
215+
var test;
216+
217+
beforeEach(function() {
218+
test = setup_test('<select>' +
219+
'<option value="a" style="color:red;" class="a">A</option>' +
220+
'</select>', {
221+
dropdownSize: { sizeType: 'fixedHeight', sizeValue: 100 }
222+
});
223+
});
224+
225+
it('should dropdown height to be equal 100', function(done) {
226+
test.selectize.focus();
227+
228+
window.setTimeout(function () {
229+
expect(test.selectize.$dropdown_content.find('.option').attr('style')).to.be.equal('color:red;');
230+
expect(test.selectize.$dropdown_content.find('.option').hasClass('a')).to.be.equal(true);
231+
}, 0);
232+
});
233+
});
214234
describe('getValue()', function() {
215235
it('should return "" when empty', function() {
216236
var test = setup_test('<select>', {});

0 commit comments

Comments
 (0)