Skip to content

Commit 86753cf

Browse files
jmasjmas
committed
Add native change event support
1 parent e080cf5 commit 86753cf

16 files changed

+349
-139
lines changed

‎dist/css/selectize.bootstrap2.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.bootstrap2.css (v0.12.1) - Bootstrap 2 Theme
2+
* selectize.bootstrap2.css (v) - Bootstrap 2 Theme
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -108,6 +108,12 @@
108108
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
109109
border-left-color: #e0e0e0;
110110
}
111+
.selectize-control.plugin-remove_button .remove-single {
112+
position: absolute;
113+
right: 28px;
114+
top: 6px;
115+
font-size: 23px;
116+
}
111117
.selectize-control {
112118
position: relative;
113119
}

‎dist/css/selectize.bootstrap3.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.bootstrap3.css (v0.12.1) - Bootstrap 3 Theme
2+
* selectize.bootstrap3.css (v) - Bootstrap 3 Theme
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -108,6 +108,12 @@
108108
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
109109
border-left-color: rgba(77, 77, 77, 0);
110110
}
111+
.selectize-control.plugin-remove_button .remove-single {
112+
position: absolute;
113+
right: 28px;
114+
top: 6px;
115+
font-size: 23px;
116+
}
111117
.selectize-control {
112118
position: relative;
113119
}

‎dist/css/selectize.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.css (v0.12.1)
2+
* selectize.css (v)
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -109,6 +109,12 @@
109109
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
110110
border-left-color: #ffffff;
111111
}
112+
.selectize-control.plugin-remove_button .remove-single {
113+
position: absolute;
114+
right: 28px;
115+
top: 6px;
116+
font-size: 23px;
117+
}
112118
.selectize-control {
113119
position: relative;
114120
}

‎dist/css/selectize.default.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.default.css (v0.12.1) - Default Theme
2+
* selectize.default.css (v) - Default Theme
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -108,6 +108,12 @@
108108
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
109109
border-left-color: #aaaaaa;
110110
}
111+
.selectize-control.plugin-remove_button .remove-single {
112+
position: absolute;
113+
right: 28px;
114+
top: 6px;
115+
font-size: 23px;
116+
}
111117
.selectize-control {
112118
position: relative;
113119
}

‎dist/css/selectize.legacy.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.legacy.css (v0.12.1) - Default Theme
2+
* selectize.legacy.css (v) - Default Theme
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -108,6 +108,12 @@
108108
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
109109
border-left-color: #b4b4b4;
110110
}
111+
.selectize-control.plugin-remove_button .remove-single {
112+
position: absolute;
113+
right: 28px;
114+
top: 6px;
115+
font-size: 23px;
116+
}
111117
.selectize-control {
112118
position: relative;
113119
}

‎dist/js/selectize.js

Lines changed: 139 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* selectize.js (v0.12.1)
2+
* selectize.js (v)
33
* Copyright (c) 2013–2015 Brian Reavis & contributors
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -444,6 +444,15 @@
444444
update();
445445
};
446446

447+
var domToString = function(d) {
448+
var tmp = document.createElement('div');
449+
450+
tmp.appendChild(d.cloneNode(true));
451+
452+
return tmp.innerHTML;
453+
};
454+
455+
447456
var Selectize = function($input, settings) {
448457
var key, i, n, dir, input, self = this;
449458
input = $input[0];
@@ -830,13 +839,27 @@
830839
}
831840
},
832841

842+
/**
843+
* Trigger Native browser event.
844+
*/
845+
triggerNativeEvent: function(el, eventName){
846+
if (el.fireEvent) { // < IE9
847+
(el.fireEvent('on' + eventName));
848+
} else {
849+
var evt = document.createEvent('Events');
850+
evt.initEvent(eventName, true, false);
851+
el.dispatchEvent(evt);
852+
}
853+
},
854+
833855
/**
834856
* Triggered when the value of the control has been changed.
835857
* This should propagate the event to the original DOM
836858
* input / select element.
837859
*/
838860
onChange: function() {
839861
this.$input.trigger('change');
862+
this.triggerNativeEvent(this.$input.get(0), 'change');
840863
},
841864

842865
/**
@@ -1506,10 +1529,10 @@
15061529
optgroup = '';
15071530
}
15081531
if (!groups.hasOwnProperty(optgroup)) {
1509-
groups[optgroup] = [];
1532+
groups[optgroup] = document.createDocumentFragment();
15101533
groups_order.push(optgroup);
15111534
}
1512-
groups[optgroup].push(option_html);
1535+
groups[optgroup].appendChild(option_html);
15131536
}
15141537
}
15151538

@@ -1523,23 +1546,26 @@
15231546
}
15241547

15251548
// render optgroup headers & join groups
1526-
html = [];
1549+
html = document.createDocumentFragment();
15271550
for (i = 0, n = groups_order.length; i < n; i++) {
15281551
optgroup = groups_order[i];
1529-
if (self.optgroups.hasOwnProperty(optgroup) && groups[optgroup].length) {
1552+
if (self.optgroups.hasOwnProperty(optgroup) && groups[optgroup].childNodes.length) {
15301553
// render the optgroup header and options within it,
15311554
// then pass it to the wrapper template
1532-
html_children = self.render('optgroup_header', self.optgroups[optgroup]) || '';
1533-
html_children += groups[optgroup].join('');
1534-
html.push(self.render('optgroup', $.extend({}, self.optgroups[optgroup], {
1535-
html: html_children
1555+
html_children = document.createDocumentFragment();
1556+
html_children.appendChild(self.render('optgroup_header', self.optgroups[optgroup]));
1557+
html_children.appendChild(groups[optgroup]);
1558+
1559+
html.appendChild(self.render('optgroup', $.extend({}, self.optgroups[optgroup], {
1560+
html: domToString(html_children),
1561+
dom: html_children
15361562
})));
15371563
} else {
1538-
html.push(groups[optgroup].join(''));
1564+
html.appendChild(groups[optgroup]);
15391565
}
15401566
}
15411567

1542-
$dropdown_content.html(html.join(''));
1568+
$dropdown_content.html(html);
15431569

15441570
// highlight matching terms inline
15451571
if (self.settings.highlight && results.query.length && results.tokens.length) {
@@ -2490,26 +2516,26 @@
24902516
}
24912517

24922518
// render markup
2493-
html = self.settings.render[templateName].apply(this, [data, escape_html]);
2519+
html = $(self.settings.render[templateName].apply(this, [data, escape_html]));
24942520

24952521
// add mandatory attributes
24962522
if (templateName === 'option' || templateName === 'option_create') {
2497-
html = html.replace(regex_tag, '<$1 data-selectable');
2523+
html.attr('data-selectable', '');
24982524
}
2499-
if (templateName === 'optgroup') {
2525+
else if (templateName === 'optgroup') {
25002526
id = data[self.settings.optgroupValueField] || '';
2501-
html = html.replace(regex_tag, '<$1 data-group="' + escape_replace(escape_html(id)) + '"');
2527+
html.attr('data-group', id);
25022528
}
25032529
if (templateName === 'option' || templateName === 'item') {
2504-
html = html.replace(regex_tag, '<$1 data-value="' + escape_replace(escape_html(value || '')) + '"');
2530+
html.attr('data-value', value || '');
25052531
}
25062532

25072533
// update cache
25082534
if (cache) {
2509-
self.renderCache[templateName][value] = html;
2535+
self.renderCache[templateName][value] = html[0];
25102536
}
25112537

2512-
return html;
2538+
return html[0];
25132539
},
25142540

25152541
/**
@@ -2971,60 +2997,114 @@
29712997
});
29722998

29732999
Selectize.define('remove_button', function(options) {
2974-
if (this.settings.mode === 'single') return;
2975-
29763000
options = $.extend({
2977-
label : '&times;',
2978-
title : 'Remove',
2979-
className : 'remove',
2980-
append : true
2981-
}, options);
3001+
label : '&times;',
3002+
title : 'Remove',
3003+
className : 'remove',
3004+
append : true
3005+
}, options);
3006+
3007+
var singleClose = function(thisRef, options) {
3008+
3009+
options.className = 'remove-single';
3010+
3011+
var self = thisRef;
3012+
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
3013+
3014+
/**
3015+
* Appends an element as a child (with raw HTML).
3016+
*
3017+
* @param {string} html_container
3018+
* @param {string} html_element
3019+
* @return {string}
3020+
*/
3021+
var append = function(html_container, html_element) {
3022+
return html_container + html_element;
3023+
};
3024+
3025+
thisRef.setup = (function() {
3026+
var original = self.setup;
3027+
return function() {
3028+
// override the item rendering method to add the button to each
3029+
if (options.append) {
3030+
var id = $(self.$input.context).attr('id');
3031+
var selectizer = $('#'+id);
3032+
3033+
var render_item = self.settings.render.item;
3034+
self.settings.render.item = function(data) {
3035+
return append(render_item.apply(thisRef, arguments), html);
3036+
};
3037+
}
29823038

2983-
var self = this;
2984-
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
3039+
original.apply(thisRef, arguments);
29853040

2986-
/**
2987-
* Appends an element as a child (with raw HTML).
2988-
*
2989-
* @param {string} html_container
2990-
* @param {string} html_element
2991-
* @return {string}
2992-
*/
2993-
var append = function(html_container, html_element) {
2994-
var pos = html_container.search(/(<\/[^>]+>\s*)$/);
2995-
return html_container.substring(0, pos) + html_element + html_container.substring(pos);
2996-
};
3041+
// add event listener
3042+
thisRef.$control.on('click', '.' + options.className, function(e) {
3043+
e.preventDefault();
3044+
if (self.isLocked) return;
3045+
3046+
self.clear();
3047+
});
29973048

2998-
this.setup = (function() {
2999-
var original = self.setup;
3000-
return function() {
3001-
// override the item rendering method to add the button to each
3002-
if (options.append) {
3003-
var render_item = self.settings.render.item;
3004-
self.settings.render.item = function(data) {
3005-
return append(render_item.apply(this, arguments), html);
30063049
};
3007-
}
3050+
})();
3051+
};
30083052

3009-
original.apply(this, arguments);
3053+
var multiClose = function(thisRef, options) {
3054+
3055+
var self = thisRef;
3056+
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
3057+
3058+
/**
3059+
* Appends an element as a child (with raw HTML).
3060+
*
3061+
* @param {string} html_container
3062+
* @param {string} html_element
3063+
* @return {string}
3064+
*/
3065+
var append = function(html_container, html_element) {
3066+
var pos = html_container.search(/(<\/[^>]+>\s*)$/);
3067+
return html_container.substring(0, pos) + html_element + html_container.substring(pos);
3068+
};
3069+
3070+
thisRef.setup = (function() {
3071+
var original = self.setup;
3072+
return function() {
3073+
// override the item rendering method to add the button to each
3074+
if (options.append) {
3075+
var render_item = self.settings.render.item;
3076+
self.settings.render.item = function(data) {
3077+
return append(render_item.apply(thisRef, arguments), html);
3078+
};
3079+
}
30103080

3011-
// add event listener
3012-
this.$control.on('click', '.' + options.className, function(e) {
3013-
e.preventDefault();
3014-
if (self.isLocked) return;
3081+
original.apply(thisRef, arguments);
30153082

3016-
var $item = $(e.currentTarget).parent();
3017-
self.setActiveItem($item);
3018-
if (self.deleteSelection()) {
3019-
self.setCaret(self.items.length);
3020-
}
3021-
});
3083+
// add event listener
3084+
thisRef.$control.on('click', '.' + options.className, function(e) {
3085+
e.preventDefault();
3086+
if (self.isLocked) return;
3087+
3088+
var $item = $(e.currentTarget).parent();
3089+
self.setActiveItem($item);
3090+
if (self.deleteSelection()) {
3091+
self.setCaret(self.items.length);
3092+
}
3093+
});
30223094

3095+
};
3096+
})();
30233097
};
3024-
})();
30253098

3099+
if (this.settings.mode === 'single') {
3100+
singleClose(this, options);
3101+
return;
3102+
} else {
3103+
multiClose(this, options);
3104+
}
30263105
});
30273106

3107+
30283108
Selectize.define('restore_on_backspace', function(options) {
30293109
var self = this;
30303110

‎dist/js/selectize.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)