Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit e81ea34

Browse files
blocknotesblocknotes
committed
Update selectize.js to version 0.12.6
Improve selectize_input init to consider also `has_many_add:after` event.
1 parent a50ff0b commit e81ea34

File tree

11 files changed

+270
-157
lines changed

11 files changed

+270
-157
lines changed

‎app/assets/javascripts/activeadmin/selectize/selectize.js‎

Lines changed: 94 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -635,7 +635,7 @@
635635
}));
636636

637637
/**
638-
* selectize.js (v0.12.4)
638+
* selectize.js (v0.12.6)
639639
* Copyright (c) 2013–2015 Brian Reavis & contributors
640640
*
641641
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -670,6 +670,8 @@
670670

671671
var highlight = function(node) {
672672
var skip = 0;
673+
// Wrap matching part of text node with highlighting <span>, e.g.
674+
// Soccer -> <span class="highlight">Soc</span>cer for regex = /soc/i
673675
if (node.nodeType === 3) {
674676
var pos = node.data.search(regex);
675677
if (pos >= 0 && node.data.length > 0) {
@@ -683,7 +685,10 @@
683685
middlebit.parentNode.replaceChild(spannode, middlebit);
684686
skip = 1;
685687
}
686-
} else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
688+
}
689+
// Recurse element node, looking for child text nodes to highlight, unless element
690+
// is childless, <script>, <style>, or already highlighted: <span class="hightlight">
691+
else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName) && ( node.className !== 'highlight' || node.tagName !== 'SPAN' )) {
687692
for (var i = 0; i < node.childNodes.length; ++i) {
688693
i += highlight(node.childNodes[i]);
689694
}
@@ -1006,27 +1011,28 @@
10061011
return 0;
10071012
}
10081013

1009-
var $test = $('<test>').css({
1010-
position: 'absolute',
1011-
top: -99999,
1012-
left: -99999,
1013-
width: 'auto',
1014-
padding: 0,
1015-
whiteSpace: 'pre'
1016-
}).text(str).appendTo('body');
1014+
if (!Selectize.$testInput) {
1015+
Selectize.$testInput = $('<span />').css({
1016+
position: 'absolute',
1017+
top: -99999,
1018+
left: -99999,
1019+
width: 'auto',
1020+
padding: 0,
1021+
whiteSpace: 'pre'
1022+
}).appendTo('body');
1023+
}
1024+
1025+
Selectize.$testInput.text(str);
10171026

1018-
transferStyles($parent, $test, [
1027+
transferStyles($parent, Selectize.$testInput, [
10191028
'letterSpacing',
10201029
'fontSize',
10211030
'fontFamily',
10221031
'fontWeight',
10231032
'textTransform'
10241033
]);
10251034

1026-
var width = $test.width();
1027-
$test.remove();
1028-
1029-
return width;
1035+
return Selectize.$testInput.width();
10301036
};
10311037

10321038
/**
@@ -1054,9 +1060,10 @@
10541060
if (e.type && e.type.toLowerCase() === 'keydown') {
10551061
keyCode = e.keyCode;
10561062
printable = (
1057-
(keyCode >= 97 && keyCode <= 122) || // a-z
1058-
(keyCode >= 65 && keyCode <= 90) || // A-Z
10591063
(keyCode >= 48 && keyCode <= 57) || // 0-9
1064+
(keyCode >= 65 && keyCode <= 90) || // a-z
1065+
(keyCode >= 96 && keyCode <= 111) || // numpad 0-9, numeric operators
1066+
(keyCode >= 186 && keyCode <= 222) || // semicolon, equal, comma, dash, etc.
10601067
keyCode === 32 // space
10611068
);
10621069

@@ -1139,6 +1146,7 @@
11391146

11401147
eventNS : '.selectize' + (++Selectize.count),
11411148
highlightedValue : null,
1149+
isBlurring : false,
11421150
isOpen : false,
11431151
isDisabled : false,
11441152
isRequired : $input.is('[required]'),
@@ -1298,13 +1306,15 @@
12981306
if ($input.attr('autocapitalize')) {
12991307
$control_input.attr('autocapitalize', $input.attr('autocapitalize'));
13001308
}
1309+
$control_input[0].type = $input[0].type;
13011310

13021311
self.$wrapper = $wrapper;
13031312
self.$control = $control;
13041313
self.$control_input = $control_input;
13051314
self.$dropdown = $dropdown;
13061315
self.$dropdown_content = $dropdown_content;
13071316

1317+
$dropdown.on('mouseenter mousedown click', '[data-disabled]>[data-selectable]', function(e) { e.stopImmediatePropagation(); });
13081318
$dropdown.on('mouseenter', '[data-selectable]', function() { return self.onOptionHover.apply(self, arguments); });
13091319
$dropdown.on('mousedown click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });
13101320
watchChildEvent($control, 'mousedown', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); });
@@ -1480,7 +1490,9 @@
14801490

14811491
// necessary for mobile webkit devices (manual focus triggering
14821492
// is ignored unless invoked within a click event)
1483-
if (!self.isFocused) {
1493+
// also necessary to reopen a dropdown that has been closed by
1494+
// closeAfterSelect
1495+
if (!self.isFocused || !self.isOpen) {
14841496
self.focus();
14851497
e.preventDefault();
14861498
}
@@ -1768,10 +1780,12 @@
17681780
// IE11 bug: element still marked as active
17691781
dest && dest.focus && dest.focus();
17701782

1783+
self.isBlurring = false;
17711784
self.ignoreFocus = false;
17721785
self.trigger('blur');
17731786
};
17741787

1788+
self.isBlurring = true;
17751789
self.ignoreFocus = true;
17761790
if (self.settings.create && self.settings.createOnBlur) {
17771791
self.createItem(null, false, deactivate);
@@ -2109,7 +2123,8 @@
21092123
return {
21102124
fields : settings.searchField,
21112125
conjunction : settings.searchConjunction,
2112-
sort : sort
2126+
sort : sort,
2127+
nesting : settings.nesting
21132128
};
21142129
},
21152130

@@ -2243,10 +2258,12 @@
22432258
$dropdown_content.html(html);
22442259

22452260
// highlight matching terms inline
2246-
if (self.settings.highlight && results.query.length && results.tokens.length) {
2261+
if (self.settings.highlight) {
22472262
$dropdown_content.removeHighlight();
2248-
for (i = 0, n = results.tokens.length; i < n; i++) {
2249-
highlight($dropdown_content, results.tokens[i].regex);
2263+
if (results.query.length && results.tokens.length) {
2264+
for (i = 0, n = results.tokens.length; i < n; i++) {
2265+
highlight($dropdown_content, results.tokens[i].regex);
2266+
}
22502267
}
22512268
}
22522269

@@ -2481,10 +2498,15 @@
24812498
self.loadedSearches = {};
24822499
self.userOptions = {};
24832500
self.renderCache = {};
2484-
self.options = self.sifter.items = {};
2501+
var options = self.options;
2502+
$.each(self.options, function(key, value) {
2503+
if(self.items.indexOf(key) == -1) {
2504+
delete options[key];
2505+
}
2506+
});
2507+
self.options = self.sifter.items = options;
24852508
self.lastQuery = null;
24862509
self.trigger('option_clear');
2487-
self.clear();
24882510
},
24892511

24902512
/**
@@ -2554,11 +2576,23 @@
25542576
* @param {boolean} silent
25552577
*/
25562578
addItems: function(values, silent) {
2579+
this.buffer = document.createDocumentFragment();
2580+
2581+
var childNodes = this.$control[0].childNodes;
2582+
for (var i = 0; i < childNodes.length; i++) {
2583+
this.buffer.appendChild(childNodes[i]);
2584+
}
2585+
25572586
var items = $.isArray(values) ? values : [values];
25582587
for (var i = 0, n = items.length; i < n; i++) {
25592588
this.isPending = (i < n - 1);
25602589
this.addItem(items[i], silent);
25612590
}
2591+
2592+
var control = this.$control[0];
2593+
control.insertBefore(this.buffer, control.firstChild);
2594+
2595+
this.buffer = null;
25622596
},
25632597

25642598
/**
@@ -2611,13 +2645,16 @@
26112645
// hide the menu if the maximum number of items have been selected or no options are left
26122646
if (!$options.length || self.isFull()) {
26132647
self.close();
2614-
} else {
2648+
} else if (!self.isPending) {
26152649
self.positionDropdown();
26162650
}
26172651

26182652
self.updatePlaceholder();
26192653
self.trigger('item_add', value, $item);
2620-
self.updateOriginalInput({silent: silent});
2654+
2655+
if (!self.isPending) {
2656+
self.updateOriginalInput({silent: silent});
2657+
}
26212658
}
26222659
});
26232660
},
@@ -2872,7 +2909,13 @@
28722909

28732910
if (self.settings.mode === 'single' && self.items.length) {
28742911
self.hideInput();
2875-
self.$control_input.blur(); // close keyboard on iOS
2912+
2913+
// Do not trigger blur while inside a blur event,
2914+
// this fixes some weird tabbing behavior in FF and IE.
2915+
// See #1164
2916+
if (!self.isBlurring) {
2917+
self.$control_input.blur(); // close keyboard on iOS
2918+
}
28762919
}
28772920

28782921
self.isOpen = false;
@@ -2893,7 +2936,7 @@
28932936
offset.top += $control.outerHeight(true);
28942937

28952938
this.$dropdown.css({
2896-
width : $control.outerWidth(),
2939+
width : $control[0].getBoundingClientRect().width,
28972940
top : offset.top,
28982941
left : offset.left
28992942
});
@@ -2929,11 +2972,15 @@
29292972
*/
29302973
insertAtCaret: function($el) {
29312974
var caret = Math.min(this.caretPos, this.items.length);
2975+
var el = $el[0];
2976+
var target = this.buffer || this.$control[0];
2977+
29322978
if (caret === 0) {
2933-
this.$control.prepend($el);
2979+
target.insertBefore(el, target.firstChild);
29342980
} else {
2935-
$(this.$control[0].childNodes[caret]).before($el);
2981+
target.insertBefore(el, target.childNodes[caret]);
29362982
}
2983+
29372984
this.setCaret(caret + 1);
29382985
},
29392986

@@ -3169,6 +3216,11 @@
31693216
self.$control_input.removeData('grow');
31703217
self.$input.removeData('selectize');
31713218

3219+
if (--Selectize.count == 0 && Selectize.$testInput) {
3220+
Selectize.$testInput.remove();
3221+
Selectize.$testInput = undefined;
3222+
}
3223+
31723224
$(window).off(eventNS);
31733225
$(document).off(eventNS);
31743226
$(document.body).off(eventNS);
@@ -3211,11 +3263,16 @@
32113263

32123264
// add mandatory attributes
32133265
if (templateName === 'option' || templateName === 'option_create') {
3214-
html.attr('data-selectable', '');
3266+
if (!data[self.settings.disabledField]) {
3267+
html.attr('data-selectable', '');
3268+
}
32153269
}
32163270
else if (templateName === 'optgroup') {
32173271
id = data[self.settings.optgroupValueField] || '';
32183272
html.attr('data-group', id);
3273+
if(data[self.settings.disabledField]) {
3274+
html.attr('data-disabled', '');
3275+
}
32193276
}
32203277
if (templateName === 'option' || templateName === 'item') {
32213278
html.attr('data-value', value || '');
@@ -3297,6 +3354,7 @@
32973354
optgroupField: 'optgroup',
32983355
valueField: 'value',
32993356
labelField: 'text',
3357+
disabledField: 'disabled',
33003358
optgroupLabelField: 'label',
33013359
optgroupValueField: 'value',
33023360
lockOptgroupOrder: false,
@@ -3353,6 +3411,7 @@
33533411
var attr_data = settings.dataAttr;
33543412
var field_label = settings.labelField;
33553413
var field_value = settings.valueField;
3414+
var field_disabled = settings.disabledField;
33563415
var field_optgroup = settings.optgroupField;
33573416
var field_optgroup_label = settings.optgroupLabelField;
33583417
var field_optgroup_value = settings.optgroupValueField;
@@ -3433,6 +3492,7 @@
34333492
var option = readData($option) || {};
34343493
option[field_label] = option[field_label] || $option.text();
34353494
option[field_value] = option[field_value] || value;
3495+
option[field_disabled] = option[field_disabled] || $option.prop('disabled');
34363496
option[field_optgroup] = option[field_optgroup] || group;
34373497

34383498
optionsMap[value] = option;
@@ -3453,6 +3513,7 @@
34533513
optgroup = readData($optgroup) || {};
34543514
optgroup[field_optgroup_label] = id;
34553515
optgroup[field_optgroup_value] = id;
3516+
optgroup[field_disabled] = $optgroup.prop('disabled');
34563517
settings_element.optgroups.push(optgroup);
34573518
}
34583519

@@ -3710,7 +3771,8 @@
37103771
* @return {string}
37113772
*/
37123773
var append = function(html_container, html_element) {
3713-
return html_container + html_element;
3774+
return $('<span>').append(html_container)
3775+
.append(html_element);
37143776
};
37153777

37163778
thisRef.setup = (function() {

‎app/assets/javascripts/activeadmin/selectize/selectize.min.js‎

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

‎app/assets/javascripts/activeadmin/selectize_input.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
$(document).ready( function() {
2-
$('.selectized').each( function() {
1+
function initSelectizeInputs() {
2+
$('[data-selectize-input]').each( function() {
33
var remote = $(this).attr( 'data-opt-remote' ) ? $(this).attr( 'data-opt-remote' ) : '';
44
var field_text = $(this).attr( 'data-opt-text' ) ? $(this).attr( 'data-opt-text' ) : 'name';
55
var field_value = $(this).attr( 'data-opt-value' ) ? $(this).attr( 'data-opt-value' ) : 'id';
@@ -41,4 +41,12 @@ $(document).ready( function() {
4141
};
4242
$(this).selectize( opts );
4343
});
44+
}
45+
46+
$(document).on('has_many_add:after', function () {
47+
initSelectizeInputs();
48+
});
49+
50+
$(document).ready( function() {
51+
initSelectizeInputs();
4452
});

‎app/assets/stylesheets/activeadmin/_selectize_input.sass‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎app/assets/stylesheets/activeadmin/_selectize_input.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import 'activeadmin/selectize/selectize';
2+
3+
.selectize-control {
4+
.selectize-input {
5+
width: calc(80% - 22px);
6+
}
7+
&.multi .selectize-input, .selectize-input {
8+
padding: 0 5px;
9+
&.has-items {
10+
padding: 0 5px;
11+
}
12+
}
13+
&.plugin-remove_button .remove-single {
14+
font-size: 16px;
15+
}
16+
}

0 commit comments

Comments
 (0)