rails_tokeninput 0.0.2 → 1.6.0

data/README.md

@@ -39,3 +39,5 @@ In your assets/stylesheets/application.css, you can add the stylesheets you want
 	.
 	*= require token-input-facebook
 	..etc.
+
+## As of 3-15-2012, the version numbers for this gem reflects the version number of the plugin.

data/lib/rails_tokeninput/version.rb

@@ -1,3 +1,3 @@
 module RailsTokeninput
-  VERSION = "0.0.2"
+  VERSION = "1.6.0"
 end

data/vendor/assets/javascripts/jquery.tokeninput.js

@@ -11,46 +11,47 @@
 (function ($) {
 // Default settings
 var DEFAULT_SETTINGS = {
-	// Search settings
+    // Search settings
     method: "GET",
-    contentType: "json",
     queryParam: "q",
     searchDelay: 300,
     minChars: 1,
     propertyToSearch: "name",
     jsonContainer: null,
+    contentType: "json",
 
-	// Display settings
+    // Prepopulation settings
+    prePopulate: null,
+    processPrePopulate: false,
+
+    // Display settings
     hintText: "Type in a search term",
     noResultsText: "No results",
     searchingText: "Searching...",
     deleteText: "×",
     animateDropdown: true,
+    theme: null,
+    zindex: 999,
+    resultsFormatter: function(item){ return "<li>" + item[this.propertyToSearch]+ "</li>" },
+    tokenFormatter: function(item) { return "<li><p>" + item[this.propertyToSearch] + "</p></li>" },
 
-	// Tokenization settings
+    // Tokenization settings
     tokenLimit: null,
     tokenDelimiter: ",",
     preventDuplicates: false,
-
-	// Output settings
     tokenValue: "id",
 
-	// Prepopulation settings
-    prePopulate: null,
-    processPrePopulate: false,
-
-	// Manipulation settings
-    idPrefix: "token-input-",
-
-	// Formatters
-    resultsFormatter: function(item){ return "<li>" + item[this.propertyToSearch]+ "</li>" },
-    tokenFormatter: function(item) { return "<li><p>" + item[this.propertyToSearch] + "</p></li>" },
-
-	// Callbacks
+    // Callbacks
     onResult: null,
     onAdd: null,
     onDelete: null,
-    onReady: null
+    onReady: null,
+
+    // Other settings
+    idPrefix: "token-input-",
+
+    // Keep track if the input is currently in disabled mode
+    disabled: false
 };
 
 // Default classes to use when theming
@@ -64,7 +65,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"
@@ -115,8 +117,12 @@ var methods = {
         return this;
     },
     get: function() {
-    	return this.data("tokenInputObject").getTokens();
-   	}
+        return this.data("tokenInputObject").getTokens();
+    },
+    toggleDisabled: function(disable) {
+        this.data("tokenInputObject").toggleDisabled(disable);
+        return this;
+    }
 }
 
 // Expose the .tokenInput function to jQuery as a plugin
@@ -144,7 +150,7 @@ $.TokenList = function (input, url_or_data, settings) {
         var url = computeURL();
 
         // Make a smart guess about cross-domain if it wasn't explicitly specified
-        if(settings.crossDomain === undefined) {
+        if(settings.crossDomain === undefined && typeof url === "string") {
             if(url.indexOf("://") === -1) {
                 settings.crossDomain = false;
             } else {
@@ -191,6 +197,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();
             }
@@ -239,8 +248,8 @@ $.TokenList = function (input, url_or_data, settings) {
                         if(dropdown_item.length) {
                             select_dropdown_item(dropdown_item);
                         }
-                        return false;
                     }
+                    return false;
                     break;
 
                 case KEY.BACKSPACE:
@@ -292,7 +301,7 @@ $.TokenList = function (input, url_or_data, settings) {
                            .hide()
                            .val("")
                            .focus(function () {
-                               input_box.focus();
+                               focus_with_timeout(input_box);
                            })
                            .blur(function () {
                                input_box.blur();
@@ -317,7 +326,7 @@ $.TokenList = function (input, url_or_data, settings) {
                 }
 
                 // Focus input box
-                input_box.focus();
+                focus_with_timeout(input_box);
             }
         })
         .mouseover(function (event) {
@@ -374,6 +383,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();
@@ -412,15 +426,36 @@ $.TokenList = function (input, url_or_data, settings) {
             }
         });
     }
-    
+
     this.getTokens = function() {
-   		return saved_tokens;
-   	}
+        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();
@@ -457,14 +492,15 @@ $.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
-        var token_data = {"id": item.id};
-        token_data[settings.propertyToSearch] = item[settings.propertyToSearch];
+        var token_data = item;
         $.data(this_token.get(0), "tokeninput", item);
 
         // Save this token for duplicate checking
@@ -504,7 +540,7 @@ $.TokenList = function (input, url_or_data, settings) {
             if(found_existing_token) {
                 select_token(found_existing_token);
                 input_token.insertAfter(found_existing_token);
-                input_box.focus();
+                focus_with_timeout(input_box);
                 return;
             }
         }
@@ -529,14 +565,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
@@ -556,7 +594,7 @@ $.TokenList = function (input, url_or_data, settings) {
         }
 
         // Show the input box and give it focus again
-        input_box.focus();
+        focus_with_timeout(input_box);
     }
 
     // Toggle selection of a token in the token list
@@ -588,7 +626,7 @@ $.TokenList = function (input, url_or_data, settings) {
         selected_token = null;
 
         // Show the input box and give it focus again
-        input_box.focus();
+        focus_with_timeout(input_box);
 
         // Remove this token from the saved list
         saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1));
@@ -602,8 +640,8 @@ $.TokenList = function (input, url_or_data, settings) {
         if(settings.tokenLimit !== null) {
             input_box
                 .show()
-                .val("")
-                .focus();
+                .val("");
+            focus_with_timeout(input_box);
         }
 
         // Execute the onDelete callback if defined
@@ -615,6 +653,9 @@ $.TokenList = function (input, url_or_data, settings) {
     // Update the hidden input box value
     function update_hidden_input(saved_tokens, hidden_input) {
         var token_values = $.map(saved_tokens, function (el) {
+            if(typeof settings.tokenValue == 'function')
+              return settings.tokenValue.call(this, el);
+            
             return el[settings.tokenValue];
         });
         hidden_input.val(token_values.join(settings.tokenDelimiter));
@@ -633,7 +674,8 @@ $.TokenList = function (input, url_or_data, settings) {
                 position: "absolute",
                 top: $(token_list).offset().top + $(token_list).outerHeight(),
                 left: $(token_list).offset().left,
-                zindex: 999
+                width: $(token_list).outerWidth(),
+                'z-index': settings.zindex
             })
             .show();
     }
@@ -656,7 +698,7 @@ $.TokenList = function (input, url_or_data, settings) {
     function highlight_term(value, term) {
         return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
     }
-    
+
     function find_value_and_highlight_term(template, value, term) {
         return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + value + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term));
     }
@@ -679,11 +721,11 @@ $.TokenList = function (input, url_or_data, settings) {
 
             $.each(results, function(index, value) {
                 var this_li = settings.resultsFormatter(value);
-                
-                this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query);            
-                
+
+                this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query);
+
                 this_li = $(this_li).appendTo(dropdown_ul);
-                
+
                 if(index % 2) {
                     this_li.addClass(settings.classes.dropdownItem);
                 } else {
@@ -733,7 +775,7 @@ $.TokenList = function (input, url_or_data, settings) {
     // Do a search and show the "searching" dropdown if the input is longer
     // than settings.minChars
     function do_search() {
-        var query = input_box.val().toLowerCase();
+        var query = input_box.val();
 
         if(query && query.length) {
             if(selected_token) {
@@ -795,7 +837,7 @@ $.TokenList = function (input, url_or_data, settings) {
                   cache.add(cache_key, settings.jsonContainer ? results[settings.jsonContainer] : results);
 
                   // only populate the dropdown if the results are associated with the active search query
-                  if(input_box.val().toLowerCase() === query) {
+                  if(input_box.val() === query) {
                       populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
                   }
                 };
@@ -821,10 +863,20 @@ $.TokenList = function (input, url_or_data, settings) {
     function computeURL() {
         var url = settings.url;
         if(typeof settings.url == 'function') {
-            url = settings.url.call();
+            url = settings.url.call(settings);
         }
         return url;
     }
+
+    // Bring browser focus to the specified object.
+    // Use of setTimeout is to get around an IE bug.
+    // (See, e.g., http://stackoverflow.com/questions/2600186/focus-doesnt-work-in-ie)
+    // 
+    // obj: a jQuery object to focus()
+    function focus_with_timeout(obj) {
+        setTimeout(function() { obj.focus(); }, 50);
+    }
+
 };
 
 // Really basic cache for the results

data/vendor/assets/stylesheets/token-input-facebook.css

@@ -7,7 +7,7 @@ ul.token-input-list-facebook {
     border: 1px solid #8496ba;
     cursor: text;
     font-size: 12px;
-    font-family: Verdana;
+    font-family: Verdana, sans-serif;
     min-height: 1px;
     z-index: 999;
     margin: 0;
@@ -80,7 +80,7 @@ div.token-input-dropdown-facebook {
     border-bottom: 1px solid #ccc;
     cursor: default;
     font-size: 11px;
-    font-family: Verdana;
+    font-family: Verdana, sans-serif;
     z-index: 1;
 }
 

data/vendor/assets/stylesheets/token-input-mac.css

@@ -26,7 +26,7 @@ ul.token-input-list-mac {
     height: 1%;
     cursor: text;
     font-size: 12px;
-    font-family: Verdana;
+    font-family: Verdana, sans-serif;
     min-height: 1px;
     z-index: 999;
     margin: 0;
@@ -58,7 +58,7 @@ li.token-input-token-mac span {
 /* TOKENS */
 
 li.token-input-token-mac {
-    font-family: "Lucida Grande", Arial, serif;
+    font-family: "Lucida Grande", Arial, sans-serif;
     font-size: 9pt;
     line-height: 12pt;
     overflow: hidden; 
@@ -122,7 +122,7 @@ div.token-input-dropdown-mac {
     overflow: hidden;
     cursor: default;
     font-size: 10pt;
-    font-family: "Lucida Grande", Arial, serif;
+    font-family: "Lucida Grande", Arial, sans-serif;
     padding: 5px;
     border-radius: 0 0 10px 10px;
     -moz-border-radius: 0 0 10px 10px;
@@ -142,7 +142,7 @@ div.token-input-dropdown-mac p {
 }
 
 div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
-  font-family: "Lucida Grande", Arial, serif;
+  font-family: "Lucida Grande", Arial, sans-serif;
   font-size: 10pt;
   font-weight: bold;
   border: none;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_tokeninput
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.6.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-12-29 00:00:00.000000000Z
+date: 2012-03-15 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &70215912227620 !ruby/object:Gem::Requirement
+  requirement: &70095240341120 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *70215912227620
+  version_requirements: *70095240341120
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &70215912227100 !ruby/object:Gem::Requirement
+  requirement: &70095240340580 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -32,10 +32,10 @@ dependencies:
         version: 1.0.0
   type: :development
   prerelease: false
-  version_requirements: *70215912227100
+  version_requirements: *70095240340580
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &70215912226620 !ruby/object:Gem::Requirement
+  requirement: &70095240340120 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -43,7 +43,7 @@ dependencies:
         version: '3.1'
   type: :development
   prerelease: false
-  version_requirements: *70215912226620
+  version_requirements: *70095240340120
 description: Gem installation of jquery tokeninput scripts and stylesheets
 email:
 - han@logicallsat.com