Add toggleDisable functionality

Add functionality to toggle enabling / disabling the widget. Added example of this functionality to demo.html Fixes issue #47 from upstream
daniel-huang · Dec 6, 2011 · e4e4951 · e4e4951
1 parent 1273e68
commit e4e4951
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 16 deletions.
diff --git a/demo.html b/demo.html
@@ -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>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFo
         });
         </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>
diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js
@@ -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));
diff --git a/styles/token-input.css b/styles/token-input.css
@@ -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;
 }
-