Permalink
Browse files

Add toggleDisable functionality

Add functionality to toggle enabling / disabling the widget.
Added example of this functionality to demo.html

Fixes issue #47 from upstream
  • Loading branch information...
1 parent 1273e68 commit e4e4951044592cab21403c8a65a73f507441d804 @vitorbal vitorbal committed Dec 5, 2011
Showing with 114 additions and 16 deletions.
  1. +46 −3 demo.html
  2. +53 −12 src/jquery.tokeninput.js
  3. +15 −1 styles/token-input.css
View
@@ -233,9 +233,12 @@ <h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2>
</div>
- <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
+ <h2 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods</h2>
<div>
- <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 />
+ <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> |
+ <a href="#" id="plugin-methods-toggle-disable">Toggle Disabled</a><br />
<input type="text" id="demo-input-plugin-methods" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
@@ -259,6 +262,13 @@ <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
$("#demo-input-plugin-methods").tokenInput("clear");
return false;
});
+
+
+ // Toggle Disable / Enable the widget
+ $("#plugin-methods-toggle-disable").click(function () {
+ $("#demo-input-plugin-methods").tokenInput("toggleDisabled");
+ return false;
+ });
});
</script>
</div>
@@ -445,5 +455,38 @@ <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
});
</script>
</div>
+
+
+ <h2>Start disabled</h2>
+ <div>
+ <input type="text" id="demo-input-disabled" name="blah" />
+ <input type="button" value="Submit" />
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#demo-input-disabled").tokenInput([
+ {id: 7, name: "Ruby"},
+ {id: 11, name: "Python"},
+ {id: 13, name: "JavaScript"},
+ {id: 17, name: "ActionScript"},
+ {id: 19, name: "Scheme"},
+ {id: 23, name: "Lisp"},
+ {id: 29, name: "C#"},
+ {id: 31, name: "Fortran"},
+ {id: 37, name: "Visual Basic"},
+ {id: 41, name: "C"},
+ {id: 43, name: "C++"},
+ {id: 47, name: "Java"}
+ ], {
+ disabled: true,
+ prePopulate: [
+ {id: 123, name: "Slurms MacKenzie"},
+ {id: 555, name: "Bob Hoskins"},
+ {id: 9000, name: "Kriss Akabusi"}
+ ]
+ });
+ });
+ </script>
+ </div>
+
</body>
-</html>
+</html>
@@ -47,7 +47,10 @@ var DEFAULT_SETTINGS = {
onReady: null,
// Other settings
- idPrefix: "token-input-"
+ idPrefix: "token-input-",
+
+ // Keep track if the input is currently in disabled mode
+ disabled: false
};
// Default classes to use when theming
@@ -61,7 +64,8 @@ var DEFAULT_CLASSES = {
dropdownItem: "token-input-dropdown-item",
dropdownItem2: "token-input-dropdown-item2",
selectedDropdownItem: "token-input-selected-dropdown-item",
- inputToken: "token-input-input-token"
+ inputToken: "token-input-input-token",
+ disabled: "token-input-disabled"
};
// Input box position "enum"
@@ -113,6 +117,10 @@ var methods = {
},
get: function() {
return this.data("tokenInputObject").getTokens();
+ },
+ toggleDisabled: function(disable) {
+ this.data("tokenInputObject").toggleDisabled(disable);
+ return this;
}
}
@@ -188,6 +196,9 @@ $.TokenList = function (input, url_or_data, settings) {
})
.attr("id", settings.idPrefix + input.id)
.focus(function () {
+ if (settings.disabled) {
+ return false;
+ } else
if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
show_dropdown_hint();
}
@@ -371,6 +382,11 @@ $.TokenList = function (input, url_or_data, settings) {
});
}
+ // Check if widget should initialize as disabled
+ if (settings.disabled) {
+ toggleDisabled(true);
+ }
+
// Initialization is done
if($.isFunction(settings.onReady)) {
settings.onReady.call();
@@ -414,10 +430,31 @@ $.TokenList = function (input, url_or_data, settings) {
return saved_tokens;
}
+ this.toggleDisabled = function(disable) {
+ toggleDisabled(disable);
+ }
+
//
// Private functions
//
+ // Toggles the widget between enabled and disabled state, or according
+ // to the [disable] parameter.
+ function toggleDisabled(disable) {
+ if (typeof disable === 'boolean') {
+ settings.disabled = disable
+ } else {
+ settings.disabled = !settings.disabled;
+ }
+ input_box.prop('disabled', settings.disabled);
+ token_list.toggleClass(settings.classes.disabled, settings.disabled);
+ // if there is any token selected we deselect it
+ if(selected_token) {
+ deselect_token($(selected_token), POSITION.END);
+ }
+ hidden_input.prop('disabled', settings.disabled);
+ }
+
function checkTokenLimit() {
if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
input_box.hide();
@@ -454,9 +491,11 @@ $.TokenList = function (input, url_or_data, settings) {
.addClass(settings.classes.tokenDelete)
.appendTo(this_token)
.click(function () {
- delete_token($(this).parent());
- hidden_input.change();
- return false;
+ if (!settings.disabled) {
+ delete_token($(this).parent());
+ hidden_input.change();
+ return false;
+ }
});
// Store data on the token
@@ -525,14 +564,16 @@ $.TokenList = function (input, url_or_data, settings) {
// Select a token in the token list
function select_token (token) {
- token.addClass(settings.classes.selectedToken);
- selected_token = token.get(0);
+ if (!settings.disabled) {
+ token.addClass(settings.classes.selectedToken);
+ selected_token = token.get(0);
- // Hide input box
- input_box.val("");
+ // Hide input box
+ input_box.val("");
- // Hide dropdown if it is visible (eg if we clicked to select token)
- hide_dropdown();
+ // Hide dropdown if it is visible (eg if we clicked to select token)
+ hide_dropdown();
+ }
}
// Deselect a token in the token list
@@ -857,4 +898,4 @@ $.TokenList.Cache = function (options) {
return data[query];
};
};
-}(jQuery));
+}(jQuery));
@@ -28,6 +28,21 @@ ul.token-input-list li input {
-webkit-appearance: caret;
}
+ul.token-input-disabled,
+ul.token-input-disabled li input {
+ background-color: #E8E8E8;
+}
+
+ul.token-input-disabled li.token-input-token {
+ background-color: #D9E3CA;
+ color: #7D7D7D
+}
+
+ul.token-input-disabled li.token-input-token span {
+ color: #CFCFCF;
+ cursor: default;
+}
+
li.token-input-token {
overflow: hidden;
height: auto !important;
@@ -110,4 +125,3 @@ div.token-input-dropdown ul li em {
div.token-input-dropdown ul li.token-input-selected-dropdown-item {
background-color: #d0efa0;
}
-

0 comments on commit e4e4951

Please sign in to comment.