Skip to content

Commit a90e6d9

Browse files
brianreavisbrianreavis
committed
Don't allow dragging / remove_button clicks / item selection when locked (fixes selectize#140).
1 parent da3a33d commit a90e6d9

File tree

6 files changed

+53
-11
lines changed

6 files changed

+53
-11
lines changed

‎examples/plugins.html

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,14 @@ <h1>Selectize.js</h1>
2525
<h2>Plugin: "remove_button"</h2>
2626
<div class="control-group">
2727
<label for="input-tags">Tags:</label>
28-
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
28+
<input type="text" id="input-tags" class="input-tags demo-default" value="awesome,neat">
29+
</div>
30+
<div class="control-group">
31+
<label for="input-tags2">Tags:</label>
32+
<input type="text" disabled id="input-tags2" class="input-tags demo-default" value="awesome,neat">
2933
</div>
3034
<script>
31-
$('#input-tags').selectize({
35+
$('.input-tags').selectize({
3236
plugins: ['remove_button'],
3337
delimiter: ',',
3438
persist: false,
@@ -53,11 +57,11 @@ <h2>Plugin: "remove_button"</h2>
5357
<div class="demo">
5458
<h2>Plugin: "restore_on_backspace"</h2>
5559
<div class="control-group">
56-
<label for="input-tags2">Tags:</label>
57-
<input type="text" id="input-tags2" class="demo-default" value="awesome,neat">
60+
<label for="input-tags6">Tags:</label>
61+
<input type="text" id="input-tags6" class="demo-default" value="awesome,neat">
5862
</div>
5963
<script>
60-
$('#input-tags2').selectize({
64+
$('#input-tags6').selectize({
6165
plugins: ['restore_on_backspace'],
6266
delimiter: ',',
6367
persist: false,
@@ -75,10 +79,14 @@ <h2>Plugin: "restore_on_backspace"</h2>
7579
<h2>Plugin: "drag_drop"</h2>
7680
<div class="control-group">
7781
<label for="input-sortable">Tags:</label>
78-
<input type="text" id="input-sortable" class="demo-default" value="drag,these,items,around">
82+
<input type="text" id="input-sortable" class="input-sortable demo-default" value="drag,these,items,around">
83+
</div>
84+
<div class="control-group">
85+
<label for="input-sortable2">Tags:</label>
86+
<input type="text" id="input-sortable2" disabled class="input-sortable demo-default" value="drag,these,items,around">
7987
</div>
8088
<script>
81-
$('#input-sortable').selectize({
89+
$('.input-sortable').selectize({
8290
plugins: ['drag_drop'],
8391
delimiter: ',',
8492
persist: false,

‎src/less/selectize.default.less

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,14 @@
3737
color: #999;
3838
text-shadow: none;
3939
background: none;
40-
border-color: #e6e6e6;
4140
.selectize-box-shadow(none);
41+
42+
&, .remove {
43+
border-color: #e6e6e6;
44+
}
45+
.remove {
46+
background: none;
47+
}
4248
}
4349
[data-value] {
4450
text-shadow: 0 1px 0 rgba(0,51,83,0.3);

‎src/plugins/drag_drop/plugin.js

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,40 @@ Selectize.define('drag_drop', function(options) {
1919
if (this.settings.mode !== 'multi') return;
2020
var self = this;
2121

22-
this.setup = (function() {
22+
self.lock = (function() {
23+
var original = self.lock;
24+
return function() {
25+
var sortable = self.$control.data('sortable');
26+
if (sortable) sortable.disable();
27+
return original.apply(self, arguments);
28+
};
29+
})();
30+
31+
self.unlock = (function() {
32+
var original = self.unlock;
33+
return function() {
34+
var sortable = self.$control.data('sortable');
35+
if (sortable) sortable.enable();
36+
return original.apply(self, arguments);
37+
};
38+
})();
39+
40+
self.setup = (function() {
2341
var original = self.setup;
2442
return function() {
2543
original.apply(this, arguments);
2644

27-
var $control = this.$control.sortable({
45+
var $control = self.$control.sortable({
2846
items: '[data-value]',
2947
forcePlaceholderSize: true,
48+
disabled: self.isLocked,
3049
start: function(e, ui) {
3150
ui.placeholder.css('width', ui.helper.css('width'));
3251
$control.css({overflow: 'visible'});
3352
},
3453
stop: function() {
3554
$control.css({overflow: 'hidden'});
36-
var active = this.$activeItems ? this.$activeItems.slice() : null;
55+
var active = self.$activeItems ? self.$activeItems.slice() : null;
3756
var values = [];
3857
$control.children('[data-value]').each(function() {
3958
values.push($(this).attr('data-value'));

‎src/plugins/remove_button/plugin.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ Selectize.define('remove_button', function(options) {
5555
// add event listener
5656
this.$control.on('click', '.' + options.className, function(e) {
5757
e.preventDefault();
58+
if (self.isLocked) return;
59+
5860
var $item = $(e.target).parent();
5961
self.setActiveItem($item);
6062
if (self.deleteSelection()) {

‎src/plugins/remove_button/plugin.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,10 @@
2727
[data-value].active .remove {
2828
border-left-color: @selectize-color-item-active-border;
2929
}
30+
.disabled [data-value] .remove:hover {
31+
background: none;
32+
}
33+
.disabled [data-value] .remove {
34+
border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
35+
}
3036
}

‎src/selectize.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,7 @@ $.extend(Selectize.prototype, {
573573
onItemSelect: function(e) {
574574
var self = this;
575575

576+
if (self.isLocked) return;
576577
if (self.settings.mode === 'multi') {
577578
e.preventDefault();
578579
self.setActiveItem(e.currentTarget, e);

0 commit comments

Comments
 (0)