Skip to content
This repository was archived by the owner on Sep 10, 2023. It is now read-only.

Commit e4e4951

Browse files
vitorbalvitorbal
committed
Add toggleDisable functionality
Add functionality to toggle enabling / disabling the widget. Added example of this functionality to demo.html Fixes issue #47 from upstream
1 parent 1273e68 commit e4e4951

File tree

3 files changed

+114
-16
lines changed

3 files changed

+114
-16
lines changed

‎demo.html

+46-3
Original file line numberDiff line numberDiff line change
@@ -233,9 +233,12 @@ <h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2>
233233
</div>
234234

235235

236-
<h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
236+
<h2 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods</h2>
237237
<div>
238-
<a href="#" id="plugin-methods-add">Add Token</a> | <a href="#" id="plugin-methods-remove">Remove Token</a> | <a href="#" id="plugin-methods-clear">Clear Tokens</a><br />
238+
<a href="#" id="plugin-methods-add">Add Token</a> |
239+
<a href="#" id="plugin-methods-remove">Remove Token</a> |
240+
<a href="#" id="plugin-methods-clear">Clear Tokens</a> |
241+
<a href="#" id="plugin-methods-toggle-disable">Toggle Disabled</a><br />
239242
<input type="text" id="demo-input-plugin-methods" name="blah" />
240243
<input type="button" value="Submit" />
241244
<script type="text/javascript">
@@ -259,6 +262,13 @@ <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
259262
$("#demo-input-plugin-methods").tokenInput("clear");
260263
return false;
261264
});
265+
266+
267+
// Toggle Disable / Enable the widget
268+
$("#plugin-methods-toggle-disable").click(function () {
269+
$("#demo-input-plugin-methods").tokenInput("toggleDisabled");
270+
return false;
271+
});
262272
});
263273
</script>
264274
</div>
@@ -445,5 +455,38 @@ <h2>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFo
445455
});
446456
</script>
447457
</div>
458+
459+
460+
<h2>Start disabled</h2>
461+
<div>
462+
<input type="text" id="demo-input-disabled" name="blah" />
463+
<input type="button" value="Submit" />
464+
<script type="text/javascript">
465+
$(document).ready(function() {
466+
$("#demo-input-disabled").tokenInput([
467+
{id: 7, name: "Ruby"},
468+
{id: 11, name: "Python"},
469+
{id: 13, name: "JavaScript"},
470+
{id: 17, name: "ActionScript"},
471+
{id: 19, name: "Scheme"},
472+
{id: 23, name: "Lisp"},
473+
{id: 29, name: "C#"},
474+
{id: 31, name: "Fortran"},
475+
{id: 37, name: "Visual Basic"},
476+
{id: 41, name: "C"},
477+
{id: 43, name: "C++"},
478+
{id: 47, name: "Java"}
479+
], {
480+
disabled: true,
481+
prePopulate: [
482+
{id: 123, name: "Slurms MacKenzie"},
483+
{id: 555, name: "Bob Hoskins"},
484+
{id: 9000, name: "Kriss Akabusi"}
485+
]
486+
});
487+
});
488+
</script>
489+
</div>
490+
448491
</body>
449-
</html>
492+
</html>

‎src/jquery.tokeninput.js

+53-12
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ var DEFAULT_SETTINGS = {
4747
onReady: null,
4848

4949
// Other settings
50-
idPrefix: "token-input-"
50+
idPrefix: "token-input-",
51+
52+
// Keep track if the input is currently in disabled mode
53+
disabled: false
5154
};
5255

5356
// Default classes to use when theming
@@ -61,7 +64,8 @@ var DEFAULT_CLASSES = {
6164
dropdownItem: "token-input-dropdown-item",
6265
dropdownItem2: "token-input-dropdown-item2",
6366
selectedDropdownItem: "token-input-selected-dropdown-item",
64-
inputToken: "token-input-input-token"
67+
inputToken: "token-input-input-token",
68+
disabled: "token-input-disabled"
6569
};
6670

6771
// Input box position "enum"
@@ -113,6 +117,10 @@ var methods = {
113117
},
114118
get: function() {
115119
return this.data("tokenInputObject").getTokens();
120+
},
121+
toggleDisabled: function(disable) {
122+
this.data("tokenInputObject").toggleDisabled(disable);
123+
return this;
116124
}
117125
}
118126

@@ -188,6 +196,9 @@ $.TokenList = function (input, url_or_data, settings) {
188196
})
189197
.attr("id", settings.idPrefix + input.id)
190198
.focus(function () {
199+
if (settings.disabled) {
200+
return false;
201+
} else
191202
if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
192203
show_dropdown_hint();
193204
}
@@ -371,6 +382,11 @@ $.TokenList = function (input, url_or_data, settings) {
371382
});
372383
}
373384

385+
// Check if widget should initialize as disabled
386+
if (settings.disabled) {
387+
toggleDisabled(true);
388+
}
389+
374390
// Initialization is done
375391
if($.isFunction(settings.onReady)) {
376392
settings.onReady.call();
@@ -414,10 +430,31 @@ $.TokenList = function (input, url_or_data, settings) {
414430
return saved_tokens;
415431
}
416432

433+
this.toggleDisabled = function(disable) {
434+
toggleDisabled(disable);
435+
}
436+
417437
//
418438
// Private functions
419439
//
420440

441+
// Toggles the widget between enabled and disabled state, or according
442+
// to the [disable] parameter.
443+
function toggleDisabled(disable) {
444+
if (typeof disable === 'boolean') {
445+
settings.disabled = disable
446+
} else {
447+
settings.disabled = !settings.disabled;
448+
}
449+
input_box.prop('disabled', settings.disabled);
450+
token_list.toggleClass(settings.classes.disabled, settings.disabled);
451+
// if there is any token selected we deselect it
452+
if(selected_token) {
453+
deselect_token($(selected_token), POSITION.END);
454+
}
455+
hidden_input.prop('disabled', settings.disabled);
456+
}
457+
421458
function checkTokenLimit() {
422459
if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
423460
input_box.hide();
@@ -454,9 +491,11 @@ $.TokenList = function (input, url_or_data, settings) {
454491
.addClass(settings.classes.tokenDelete)
455492
.appendTo(this_token)
456493
.click(function () {
457-
delete_token($(this).parent());
458-
hidden_input.change();
459-
return false;
494+
if (!settings.disabled) {
495+
delete_token($(this).parent());
496+
hidden_input.change();
497+
return false;
498+
}
460499
});
461500

462501
// Store data on the token
@@ -525,14 +564,16 @@ $.TokenList = function (input, url_or_data, settings) {
525564

526565
// Select a token in the token list
527566
function select_token (token) {
528-
token.addClass(settings.classes.selectedToken);
529-
selected_token = token.get(0);
567+
if (!settings.disabled) {
568+
token.addClass(settings.classes.selectedToken);
569+
selected_token = token.get(0);
530570

531-
// Hide input box
532-
input_box.val("");
571+
// Hide input box
572+
input_box.val("");
533573

534-
// Hide dropdown if it is visible (eg if we clicked to select token)
535-
hide_dropdown();
574+
// Hide dropdown if it is visible (eg if we clicked to select token)
575+
hide_dropdown();
576+
}
536577
}
537578

538579
// Deselect a token in the token list
@@ -857,4 +898,4 @@ $.TokenList.Cache = function (options) {
857898
return data[query];
858899
};
859900
};
860-
}(jQuery));
901+
}(jQuery));

‎styles/token-input.css

+15-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,21 @@ ul.token-input-list li input {
2828
-webkit-appearance: caret;
2929
}
3030

31+
ul.token-input-disabled,
32+
ul.token-input-disabled li input {
33+
background-color: #E8E8E8;
34+
}
35+
36+
ul.token-input-disabled li.token-input-token {
37+
background-color: #D9E3CA;
38+
color: #7D7D7D
39+
}
40+
41+
ul.token-input-disabled li.token-input-token span {
42+
color: #CFCFCF;
43+
cursor: default;
44+
}
45+
3146
li.token-input-token {
3247
overflow: hidden;
3348
height: auto !important;
@@ -110,4 +125,3 @@ div.token-input-dropdown ul li em {
110125
div.token-input-dropdown ul li.token-input-selected-dropdown-item {
111126
background-color: #d0efa0;
112127
}
113-

0 commit comments

Comments
 (0)