diff options
| -rw-r--r-- | admin/themes/default/template/batch_manager_global.tpl | 5 | ||||
| -rw-r--r-- | admin/themes/default/template/batch_manager_unit.tpl | 3 | ||||
| -rw-r--r-- | admin/themes/default/template/picture_modify.tpl | 3 | ||||
| -rw-r--r-- | admin/themes/default/theme.css | 18 | ||||
| -rw-r--r-- | admin/themes/roma/theme.css | 12 | ||||
| -rw-r--r-- | themes/default/js/plugins/jquery.tokeninput.css | 16 | ||||
| -rw-r--r-- | themes/default/js/plugins/jquery.tokeninput.js | 713 |
7 files changed, 538 insertions, 232 deletions
diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl index 913000a9a..0c7347026 100644 --- a/admin/themes/default/template/batch_manager_global.tpl +++ b/admin/themes/default/template/batch_manager_global.tpl @@ -55,6 +55,7 @@ jQuery(document).ready(function() { }); {/literal}{/footer_script} +{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'} {combine_script id='jquery.tokeninput' load='footer' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} {combine_script id='jquery.progressBar' load='footer' path='themes/default/js/plugins/jquery.progressbar.min.js'} {combine_script id='jquery.ajaxmanager' load='footer' path='themes/default/js/plugins/jquery.ajaxmanager.js'} @@ -73,7 +74,7 @@ jQuery(document).ready(function() {ldelim} newText: ' ({'new'|@translate})', animateDropdown: false, preventDuplicates: true, - allowCreation: true + allowFreeTagging: true } ); @@ -85,7 +86,7 @@ jQuery(document).ready(function() {ldelim} searchingText: '{'Searching...'|@translate}', animateDropdown: false, preventDuplicates: true, - allowCreation: false + allowFreeTagging: false } ); diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index 7dee4fa51..859a9b6a0 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -2,6 +2,7 @@ {include file='include/datepicker.inc.tpl'} {include file='include/colorbox.inc.tpl'} +{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'} {combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} {footer_script require='jquery.tokeninput'} jQuery(document).ready(function() {ldelim} @@ -14,7 +15,7 @@ jQuery(document).ready(function() {ldelim} newText: ' ({'new'|@translate})', animateDropdown: false, preventDuplicates: true, - allowCreation: true + allowFreeTagging: true } ); diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl index 5d2238eea..a19815f1c 100644 --- a/admin/themes/default/template/picture_modify.tpl +++ b/admin/themes/default/template/picture_modify.tpl @@ -11,6 +11,7 @@ jQuery(document).ready(function() { }); {/literal}{/footer_script} +{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'} {combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'} {footer_script require='jquery.tokeninput'} jQuery(document).ready(function() {ldelim} @@ -23,7 +24,7 @@ jQuery(document).ready(function() {ldelim} newText: ' ({'new'|@translate})', animateDropdown: false, preventDuplicates: true, - allowCreation: true + allowFreeTagging: true } ); }); diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index ce8b78b9e..760d73398 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -962,24 +962,6 @@ LEGEND { #batchManagerGlobal #filter_dimension blockquote {margin:5px 0 20px 15px;} #batchManagerGlobal #filter_dimension .ui-slider-horizontal {width:650px;margin:5px 0 10px 0;} - -/* TokenInput (with Facebook style) */ -ul.token-input-list {overflow: hidden; height: auto !important; height: 1%;width: 400px;border: 1px solid #8496ba;cursor: text;font-size: 12px;font-family: Verdana;min-height: 1px;z-index: 999;margin: 0;padding: 0;background-color: #fff;list-style-type: none;clear: left;} -ul.token-input-list li input {border: 0;width: 100px;padding: 3px 8px;background-color: white;margin: 2px 0;-webkit-appearance: caret;} -li.token-input-token {overflow: hidden; height: auto !important; height: 15px;margin: 3px;padding: 1px 3px;background-color: #eff2f7;color: #000;cursor: default;border: 1px solid #ccd5e4;font-size: 11px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;float: left;white-space: nowrap;} -li.token-input-token p {display: inline;padding: 0;margin: 0;} -li.token-input-token span {color: #a6b3cf;margin-left: 5px;font-weight: bold;cursor: pointer;} -li.token-input-selected-token {background-color: #5670a6;border: 1px solid #3b5998;color: #fff;} -li.token-input-input-token {float: left;margin: 0;padding: 0;list-style-type: none;width:10px;} -div.token-input-dropdown {position: absolute;width: 400px;background-color: #fff;overflow: hidden;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: default;font-size: 11px;font-family: Verdana;z-index: 1;} -div.token-input-dropdown p {margin: 0;padding: 5px;font-weight: bold;color: #777;} -div.token-input-dropdown ul {margin: 0;padding: 0;} -div.token-input-dropdown ul li {background-color: #fff;padding: 3px;margin: 0;list-style-type: none;} -div.token-input-dropdown ul li.token-input-dropdown-item {background-color: #fff;} -div.token-input-dropdown ul li.token-input-dropdown-item2 {background-color: #fff;} -div.token-input-dropdown ul li em {font-weight: bold;font-style: normal;} -div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color: #3b5998;color: #fff;} - #mainConf a.addFilter {font-weight:normal;margin-left:20px;} #mainConf a.removeFilter {font-weight:normal;} #mainConf span.property span.filter:first-child a.removeFilter {display:none;} /* can't delete the first field */ diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 39167787b..c95d26c19 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -274,12 +274,12 @@ color:transparent;} #batchManagerGlobal #selectedMessage {background-color:#555; color:#ddd;} /* TokenInput (with Facebook style for ROMA) */ -ul.token-input-list {border-color:#666;background-color:#444;} -ul.token-input-list li input {background-color:#444;} -li.token-input-token span {color:#878787;} -div.token-input-dropdown {background-color:#eee;border-color:#666;} -div.token-input-dropdown ul li {background-color:#eee;} -div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800;} +ul.token-input-list {border-color:#666 !important;background-color:#444 !important;} +ul.token-input-list li input {background-color:#444 !important;} +li.token-input-token span {color:#878787 !important;} +div.token-input-dropdown {background-color:#eee !important;border-color:#666 !important;} +div.token-input-dropdown ul li {background-color:#eee !important;} +div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;} #progressbar {border:1px solid #666; background-color:#666;} diff --git a/themes/default/js/plugins/jquery.tokeninput.css b/themes/default/js/plugins/jquery.tokeninput.css new file mode 100644 index 000000000..8db9cff44 --- /dev/null +++ b/themes/default/js/plugins/jquery.tokeninput.css @@ -0,0 +1,16 @@ +/* TokenInput (with Facebook style) */ +ul.token-input-list {overflow: hidden; height: auto !important; height: 1%;width: 400px;border: 1px solid #8496ba;cursor: text;font-size: 12px;font-family: Verdana;min-height: 1px;z-index: 999;margin: 0;padding: 0;background-color: #fff;list-style-type: none;clear: left;} +ul.token-input-list li input {border: 0;width: 100px;padding: 3px 8px;background-color: white;margin: 2px 0;-webkit-appearance: caret;} +li.token-input-token {overflow: hidden; height: auto !important; height: 15px;margin: 3px;padding: 1px 3px;background-color: #eff2f7;color: #000;cursor: default;border: 1px solid #ccd5e4;font-size: 11px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;float: left;white-space: nowrap;} +li.token-input-token p {display: inline;padding: 0;margin: 0;} +li.token-input-token span {color: #a6b3cf;margin-left: 5px;font-weight: bold;cursor: pointer;} +li.token-input-selected-token {background-color: #5670a6;border: 1px solid #3b5998;color: #fff;} +li.token-input-input-token {float: left;margin: 0;padding: 0;list-style-type: none;width:10px;} +div.token-input-dropdown {position: absolute;width: 400px;background-color: #fff;overflow: hidden;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: default;font-size: 11px;font-family: Verdana;z-index: 1;} +div.token-input-dropdown p {margin: 0;padding: 5px;font-weight: bold;color: #777;} +div.token-input-dropdown ul {margin: 0;padding: 0;} +div.token-input-dropdown ul li {background-color: #fff;padding: 3px;margin: 0;list-style-type: none;} +div.token-input-dropdown ul li.token-input-dropdown-item {background-color: #fff;} +div.token-input-dropdown ul li.token-input-dropdown-item2 {background-color: #fff;} +div.token-input-dropdown ul li em {font-weight: bold;font-style: normal;} +div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color: #3b5998;color: #fff;}
\ No newline at end of file diff --git a/themes/default/js/plugins/jquery.tokeninput.js b/themes/default/js/plugins/jquery.tokeninput.js index 0bbf8336b..7348639ae 100644 --- a/themes/default/js/plugins/jquery.tokeninput.js +++ b/themes/default/js/plugins/jquery.tokeninput.js @@ -1,51 +1,85 @@ -/** - DON'T MAKE AUTOMATIC UPGRADE - This is a merged version of : - + https://github.com/gr2m/jquery-tokeninput/ - + https://github.com/mistic100/jquery-tokeninput/ -*/ - /* * jQuery Plugin: Tokenizing Autocomplete Text Entry - * Version 1.4.2 + * Version 1.6.1 * * Copyright (c) 2009 James Smith (http://loopj.com) * Licensed jointly under the GPL and MIT licenses, * choose which one suits your project best! * + * https://github.com/mistic100/jquery-tokeninput */ (function ($) { // Default settings var DEFAULT_SETTINGS = { - hintText: "Type in a search term", - noResultsText: "No results", - searchingText: "Searching...", - newText: "(new)", - deleteText: "×", + // Search settings + method: "GET", + queryParam: "q", searchDelay: 300, minChars: 1, - tokenLimit: null, + propertyToSearch: "name", jsonContainer: null, - method: "GET", contentType: "json", - queryParam: "q", - tokenDelimiter: ",", - preventDuplicates: false, + + // Prepopulation settings prePopulate: null, processPrePopulate: false, + + // Display settings + hintText: "Type in a search term", + noResultsText: "No results", + searchingText: "Searching...", + deleteText: "×", + newText: " (new)", animateDropdown: true, + placeholder: null, + theme: null, + zindex: 999, + resultsLimit: null, + + enableHTML: false, + + resultsFormatter: function(item) { + var string = item[this.propertyToSearch]; + return "<li>" + (this.enableHTML ? string : _escapeHTML(string)) + "</li>"; + }, + + tokenFormatter: function(item) { + var string = item[this.propertyToSearch]; + return "<li><p>" + (this.enableHTML ? string : _escapeHTML(string)) + "</p></li>"; + }, + + // Tokenization settings + tokenLimit: null, + tokenDelimiter: ",", + preventDuplicates: false, + tokenValue: "id", + + // Behavioral settings + allowFreeTagging: false, + freeTaggingHint: true, + allowTabOut: false, + + // Callbacks onResult: null, + onCachedResult: null, onAdd: null, + onFreeTaggingAdd: null, onDelete: null, - allowCreation: false, - caseSensitive: false + 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 var DEFAULT_CLASSES = { tokenList: "token-input-list", token: "token-input-token", + tokenReadOnly: "token-input-token-readonly", tokenDelete: "token-input-delete-token", selectedToken: "token-input-selected-token", highlightedToken: "token-input-highlighted-token", @@ -53,7 +87,9 @@ 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", + focused: "token-input-focused", + disabled: "token-input-disabled" }; // Input box position "enum" @@ -82,16 +118,82 @@ var KEY = { COMMA: 188 }; +var HTML_ESCAPES = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + '/': '/' +}; -// Expose the .tokenInput function to jQuery as a plugin -$.fn.tokenInput = function (url_or_data, options) { - var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); +var HTML_ESCAPE_CHARS = /[&<>"'\/]/g; + +function coerceToString(val) { + return String((val === null || val === undefined) ? '' : val); +} + +function _escapeHTML(text) { + return coerceToString(text).replace(HTML_ESCAPE_CHARS, function(match) { + return HTML_ESCAPES[match]; + }); +} + +// Additional public (exposed) methods +var methods = { + init: function(url_or_data_or_function, options) { + var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); - return this.each(function () { - new $.TokenList(this, url_or_data, settings); - }); + return this.each(function () { + $(this).data("settings", settings); + $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings)); + }); + }, + clear: function() { + this.data("tokenInputObject").clear(); + return this; + }, + add: function(item) { + this.data("tokenInputObject").add(item); + return this; + }, + remove: function(item) { + this.data("tokenInputObject").remove(item); + return this; + }, + get: function() { + return this.data("tokenInputObject").getTokens(); + }, + toggleDisabled: function(disable) { + this.data("tokenInputObject").toggleDisabled(disable); + return this; + }, + setOptions: function(options){ + $(this).data("settings", $.extend({}, $(this).data("settings"), options || {})); + return this; + }, + destroy: function () { + if(this.data("tokenInputObject")){ + this.data("tokenInputObject").clear(); + var tmpInput = this; + var closest = this.parent(); + closest.empty(); + tmpInput.show(); + closest.append(tmpInput); + return tmpInput; + } + } }; +// Expose the .tokenInput function to jQuery as a plugin +$.fn.tokenInput = function (method) { + // Method calling and initialization logic + if(methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else { + return methods.init.apply(this, arguments); + } +}; // TokenList class for each input $.TokenList = function (input, url_or_data, settings) { @@ -100,35 +202,38 @@ $.TokenList = function (input, url_or_data, settings) { // // Configure the data source - if(typeof(url_or_data) === "string") { + if($.type(url_or_data) === "string" || $.type(url_or_data) === "function") { // Set the url to query against - settings.url = url_or_data; + $(input).data("settings").url = url_or_data; + + // If the URL is a function, evaluate it here to do our initalization work + var url = computeURL(); // Make a smart guess about cross-domain if it wasn't explicitly specified - if(settings.crossDomain === undefined) { - if(settings.url.indexOf("://") === -1) { - settings.crossDomain = false; + if($(input).data("settings").crossDomain === undefined && typeof url === "string") { + if(url.indexOf("://") === -1) { + $(input).data("settings").crossDomain = false; } else { - settings.crossDomain = (location.href.split(/\/+/g)[1] !== settings.url.split(/\/+/g)[1]); + $(input).data("settings").crossDomain = (location.href.split(/\/+/g)[1] !== url.split(/\/+/g)[1]); } } } else if(typeof(url_or_data) === "object") { // Set the local data to search through - settings.local_data = url_or_data; + $(input).data("settings").local_data = url_or_data; } // Build class names - if(settings.classes) { + if($(input).data("settings").classes) { // Use custom class names - settings.classes = $.extend({}, DEFAULT_CLASSES, settings.classes); - } else if(settings.theme) { + $(input).data("settings").classes = $.extend({}, DEFAULT_CLASSES, $(input).data("settings").classes); + } else if($(input).data("settings").theme) { // Use theme-suffixed default class names - settings.classes = {}; + $(input).data("settings").classes = {}; $.each(DEFAULT_CLASSES, function(key, value) { - settings.classes[key] = value + "-" + settings.theme; + $(input).data("settings").classes[key] = value + "-" + $(input).data("settings").theme; }); } else { - settings.classes = DEFAULT_CLASSES; + $(input).data("settings").classes = DEFAULT_CLASSES; } @@ -146,17 +251,29 @@ $.TokenList = function (input, url_or_data, settings) { var input_val; // Create a new text input an attach keyup events - var input_box = $("<input type=\"text\" autocomplete=\"off\">") + var input_box = $("<input type=\"text\" autocomplete=\"off\" autocapitalize=\"off\">") .css({ outline: "none" }) + .attr("id", $(input).data("settings").idPrefix + input.id) .focus(function () { - if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { + if ($(input).data("settings").disabled) { + return false; + } else + if ($(input).data("settings").tokenLimit === null || $(input).data("settings").tokenLimit !== token_count) { show_dropdown_hint(); } + token_list.addClass($(input).data("settings").classes.focused); }) .blur(function () { hide_dropdown(); + + if ($(input).data("settings").allowFreeTagging) { + add_freetagging_tokens(); + } + + $(this).val(""); + token_list.removeClass($(input).data("settings").classes.focused); }) .bind("keyup keydown blur update", resize_input) .keydown(function (event) { @@ -198,8 +315,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: @@ -208,6 +325,7 @@ $.TokenList = function (input, url_or_data, settings) { if(!$(this).val().length) { if(selected_token) { delete_token($(selected_token)); + hidden_input.change(); } else if(previous_token.length) { select_token($(previous_token.get(0))); } @@ -226,10 +344,25 @@ $.TokenList = function (input, url_or_data, settings) { case KEY.NUMPAD_ENTER: case KEY.COMMA: if(selected_dropdown_item) { - add_token($(selected_dropdown_item)); - return false; + add_token($(selected_dropdown_item).data("tokeninput")); + hidden_input.change(); + } else { + if ($(input).data("settings").allowFreeTagging) { + if($(input).data("settings").allowTabOut && $(this).val() === "") { + return true; + } else { + add_freetagging_tokens(); + } + } else { + $(this).val(""); + if($(input).data("settings").allowTabOut) { + return true; + } + } + event.stopPropagation(); + event.preventDefault(); } - break; + return false; case KEY.ESCAPE: hide_dropdown(); @@ -244,29 +377,52 @@ $.TokenList = function (input, url_or_data, settings) { } }); + // Keep reference for placeholder + if (settings.placeholder) + input_box.attr("placeholder", settings.placeholder) + if ($(input).get(0).tagName == 'SELECT') { - // Create a new input to store selected tokens, original will be delete later - var hidden_input = $("<input type=\"text\" name=\"" + $(input).attr('name') + "\" autocomplete=\"off\">") - .hide() - .val("") - .focus(function () { - input_box.focus(); - }) - .blur(function () { - input_box.blur(); - }) - .insertBefore(input); + // Create a new input to store selected tokens, original will be removed later + var hidden_input = $("<input type=\"text\" name=\"" + $(input).attr('name') + "\" autocomplete=\"off\">") + .hide() + .val("") + .focus(function () { + focus_with_timeout(input_box); + }) + .blur(function () { + input_box.blur(); + return hidden_input; + }) + .insertBefore(input); + + // get prepopulate options and store them in hidden_input + var select_data = []; + $(input).children('option').each(function () { + var item = {}; + item[$(input).data("settings").tokenValue] = $(this).attr('value'); + item[$(input).data("settings").propertyToSearch] = $(this).text(); + select_data[ select_data.length ] = item; + }); + hidden_input.data("pre", select_data); + + // remove the SELECT object + hidden_input.data("settings", $(input).data("settings")); + $(input).remove(); + input = hidden_input[0]; + } else { - // Keep a reference to the original input box - var hidden_input = $(input) - .hide() - .val("") - .focus(function () { - input_box.focus(); - }) - .blur(function () { - input_box.blur(); - }); + // Keep a reference to the original input box + var hidden_input = $(input) + .hide() + .val("") + .focus(function () { + focus_with_timeout(input_box); + }) + .blur(function () { + input_box.blur(); + //return the object to this can be referenced in the callback functions. + return hidden_input; + }); } // Keep a reference to the selected token and dropdown item @@ -276,7 +432,7 @@ $.TokenList = function (input, url_or_data, settings) { // The list to store the token items in var token_list = $("<ul />") - .addClass(settings.classes.tokenList) + .addClass($(input).data("settings").classes.tokenList) .click(function (event) { var li = $(event.target).closest("li"); if(li && li.get(0) && $.data(li.get(0), "tokeninput")) { @@ -288,32 +444,32 @@ $.TokenList = function (input, url_or_data, settings) { } // Focus input box - input_box.focus(); + focus_with_timeout(input_box); } }) .mouseover(function (event) { var li = $(event.target).closest("li"); if(li && selected_token !== this) { - li.addClass(settings.classes.highlightedToken); + li.addClass($(input).data("settings").classes.highlightedToken); } }) .mouseout(function (event) { var li = $(event.target).closest("li"); if(li && selected_token !== this) { - li.removeClass(settings.classes.highlightedToken); + li.removeClass($(input).data("settings").classes.highlightedToken); } }) .insertBefore(hidden_input); // The token holding the input box var input_token = $("<li />") - .addClass(settings.classes.inputToken) + .addClass($(input).data("settings").classes.inputToken) .appendTo(token_list) .append(input_box); // The list to store the dropdown items in var dropdown = $("<div>") - .addClass(settings.classes.dropdown) + .addClass($(input).data("settings").classes.dropdown) .appendTo("body") .hide(); @@ -334,36 +490,116 @@ $.TokenList = function (input, url_or_data, settings) { // Pre-populate list if items exist hidden_input.val(""); - var li_data = settings.prePopulate || hidden_input.data("pre"); - if(settings.processPrePopulate && $.isFunction(settings.onResult)) { - li_data = settings.onResult.call(hidden_input, li_data); - } + var li_data = $(input).data("settings").prePopulate || hidden_input.data("pre"); + if($(input).data("settings").processPrePopulate && $.isFunction($(input).data("settings").onResult)) { + li_data = $(input).data("settings").onResult.call(hidden_input, li_data); + } if(li_data && li_data.length) { $.each(li_data, function (index, value) { - insert_token(value.id, value.name); + insert_token(value); + checkTokenLimit(); + input_box.attr("placeholder", null) }); } - - // Pre-populate from SELECT options - if ($(input).get(0).tagName == 'SELECT') { - $(input).children('option').each(function () { - insert_token($(this).attr('value'), $(this).text()); - }); + + // Check if widget should initialize as disabled + if ($(input).data("settings").disabled) { + toggleDisabled(true); } + // Initialization is done + if($.isFunction($(input).data("settings").onReady)) { + $(input).data("settings").onReady.call(); + } + + // + // Public functions + // + + this.clear = function() { + token_list.children("li").each(function() { + if ($(this).children("input").length === 0) { + delete_token($(this)); + } + }); + }; + this.add = function(item) { + add_token(item); + }; + + this.remove = function(item) { + token_list.children("li").each(function() { + if ($(this).children("input").length === 0) { + var currToken = $(this).data("tokeninput"); + var match = true; + for (var prop in item) { + if (item[prop] !== currToken[prop]) { + match = false; + break; + } + } + if (match) { + delete_token($(this)); + } + } + }); + }; + + this.getTokens = function() { + return saved_tokens; + }; + + this.toggleDisabled = function(disable) { + toggleDisabled(disable); + }; + + // Resize input to maximum width so the placeholder can be seen + resize_input(); // // Private functions // + function escapeHTML(text) { + return $(input).data("settings").enableHTML ? text : _escapeHTML(text); + } + + // Toggles the widget between enabled and disabled state, or according + // to the [disable] parameter. + function toggleDisabled(disable) { + if (typeof disable === 'boolean') { + $(input).data("settings").disabled = disable + } else { + $(input).data("settings").disabled = !$(input).data("settings").disabled; + } + input_box.attr('disabled', $(input).data("settings").disabled); + token_list.toggleClass($(input).data("settings").classes.disabled, $(input).data("settings").disabled); + // if there is any token selected we deselect it + if(selected_token) { + deselect_token($(selected_token), POSITION.END); + } + hidden_input.attr('disabled', $(input).data("settings").disabled); + } + + function checkTokenLimit() { + if($(input).data("settings").tokenLimit !== null && token_count >= $(input).data("settings").tokenLimit) { + input_box.hide(); + hide_dropdown(); + return; + } + } + function resize_input() { if(input_val === (input_val = input_box.val())) {return;} + // Get width left on the current line + var width_left = token_list.width() - input_box.offset().left - token_list.offset().left; // Enter new content into resizer and resize input accordingly - var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); - input_resizer.html(escaped); - input_box.width(input_resizer.width() + 30); + input_resizer.html(_escapeHTML(input_val)); + // Get maximum width, minimum the size of input and maximum the widget's width + input_box.width(Math.min(token_list.width(), + Math.max(width_left, input_resizer.width() + 30))); } function is_printable_character(keycode) { @@ -373,52 +609,79 @@ $.TokenList = function (input, url_or_data, settings) { (keycode >= 219 && keycode <= 222)); // ( \ ) ' } + function add_freetagging_tokens() { + var value = $.trim(input_box.val()); + var tokens = value.split($(input).data("settings").tokenDelimiter); + $.each(tokens, function(i, token) { + if (!token) { + return; + } + + if ($.isFunction($(input).data("settings").onFreeTaggingAdd)) { + token = $(input).data("settings").onFreeTaggingAdd.call(hidden_input, token); + } + var object = {}; + object[$(input).data("settings").tokenValue] = object[$(input).data("settings").propertyToSearch] = token; + add_token(object); + }); + } + // Inner function to a token to the list - function insert_token(id, value) { - var this_token = $("<li><p>"+ value +"</p></li>") - .addClass(settings.classes.token) - .insertBefore(input_token); + function insert_token(item) { + var $this_token = $($(input).data("settings").tokenFormatter(item)); + var readonly = item.readonly === true ? true : false; + + if(readonly) $this_token.addClass($(input).data("settings").classes.tokenReadOnly); + + $this_token.addClass($(input).data("settings").classes.token).insertBefore(input_token); // The 'delete token' button - $("<span>" + settings.deleteText + "</span>") - .addClass(settings.classes.tokenDelete) - .appendTo(this_token) - .click(function () { - delete_token($(this).parent()); - return false; - }); + if(!readonly) { + $("<span>" + $(input).data("settings").deleteText + "</span>") + .addClass($(input).data("settings").classes.tokenDelete) + .appendTo($this_token) + .click(function () { + if (!$(input).data("settings").disabled) { + delete_token($(this).parent()); + hidden_input.change(); + return false; + } + }); + } // Store data on the token - var token_data = {"id": id, "name": value}; - $.data(this_token.get(0), "tokeninput", token_data); + var token_data = item; + $.data($this_token.get(0), "tokeninput", item); // Save this token for duplicate checking saved_tokens = saved_tokens.slice(0,selected_token_index).concat([token_data]).concat(saved_tokens.slice(selected_token_index)); selected_token_index++; // Update the hidden input - var token_ids = $.map(saved_tokens, function (el) { - return el.id; - }); - hidden_input.val(token_ids.join(settings.tokenDelimiter)); + update_hidden_input(saved_tokens, hidden_input); token_count += 1; - return this_token; + // Check the token limit + if($(input).data("settings").tokenLimit !== null && token_count >= $(input).data("settings").tokenLimit) { + input_box.hide(); + hide_dropdown(); + } + + return $this_token; } // Add a token to the token list based on user input function add_token (item) { - var li_data = $.data(item.get(0), "tokeninput"); - var callback = settings.onAdd; + var callback = $(input).data("settings").onAdd; // See if the token already exists and select it if we don't want duplicates - if(token_count > 0 && settings.preventDuplicates) { + if(token_count > 0 && $(input).data("settings").preventDuplicates) { var found_existing_token = null; token_list.children().each(function () { var existing_token = $(this); var existing_data = $.data(existing_token.get(0), "tokeninput"); - if(existing_data && existing_data.id === li_data.id) { + if(existing_data && existing_data[settings.tokenValue] === item[settings.tokenValue]) { found_existing_token = existing_token; return false; } @@ -427,21 +690,20 @@ $.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; } } - // Insert the new tokens - insert_token(li_data.id, li_data.name); + // Squeeze input_box so we force no unnecessary line break + input_box.width(0); - // Check the token limit - if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) { - input_box.hide(); - hide_dropdown(); - return; - } else { - input_box.focus(); + // Insert the new tokens + if($(input).data("settings").tokenLimit == null || token_count < $(input).data("settings").tokenLimit) { + insert_token(item); + // Remove the placeholder so it's not seen after you've added a token + input_box.attr("placeholder", null) + checkTokenLimit(); } // Clear input box @@ -452,25 +714,27 @@ $.TokenList = function (input, url_or_data, settings) { // Execute the onAdd callback if defined if($.isFunction(callback)) { - callback.call(hidden_input,li_data); + callback.call(hidden_input,item); } } // Select a token in the token list function select_token (token) { - token.addClass(settings.classes.selectedToken); - selected_token = token.get(0); + if (!$(input).data("settings").disabled) { + token.addClass($(input).data("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 function deselect_token (token, position) { - token.removeClass(settings.classes.selectedToken); + token.removeClass($(input).data("settings").classes.selectedToken); selected_token = null; if(position === POSITION.BEFORE) { @@ -485,7 +749,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 @@ -507,7 +771,7 @@ $.TokenList = function (input, url_or_data, settings) { function delete_token (token) { // Remove the id from the saved list var token_data = $.data(token.get(0), "tokeninput"); - var callback = settings.onDelete; + var callback = $(input).data("settings").onDelete; var index = token.prevAll().length; if(index > selected_token_index) index--; @@ -517,25 +781,25 @@ $.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)); + if (saved_tokens.length == 0) { + input_box.attr("placeholder", settings.placeholder) + } if(index < selected_token_index) selected_token_index--; // Update the hidden input - var token_ids = $.map(saved_tokens, function (el) { - return el.id; - }); - hidden_input.val(token_ids.join(settings.tokenDelimiter)); + update_hidden_input(saved_tokens, hidden_input); token_count -= 1; - if(settings.tokenLimit !== null) { + if($(input).data("settings").tokenLimit !== null) { input_box .show() - .val("") - .focus(); + .val(""); + focus_with_timeout(input_box); } // Execute the onDelete callback if defined @@ -544,6 +808,18 @@ $.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 $(input).data("settings").tokenValue == 'function') + return $(input).data("settings").tokenValue.call(this, el); + + return el[$(input).data("settings").tokenValue]; + }); + hidden_input.val(token_values.join($(input).data("settings").tokenDelimiter)); + + } + // Hide and clear the results dropdown function hide_dropdown () { dropdown.hide().empty(); @@ -554,37 +830,47 @@ $.TokenList = function (input, url_or_data, settings) { dropdown .css({ position: "absolute", - top: $(token_list).offset().top + $(token_list).outerHeight(), - left: $(token_list).offset().left, - zindex: 999 + top: token_list.offset().top + token_list.outerHeight(), + left: token_list.offset().left, + width: token_list.width(), + 'z-index': $(input).data("settings").zindex }) .show(); } function show_dropdown_searching () { - if(settings.searchingText) { - dropdown.html("<p>"+settings.searchingText+"</p>"); + if($(input).data("settings").searchingText) { + dropdown.html("<p>" + escapeHTML($(input).data("settings").searchingText) + "</p>"); show_dropdown(); } } function show_dropdown_hint () { - if(settings.hintText) { - dropdown.html("<p>"+settings.hintText+"</p>"); + if($(input).data("settings").hintText) { + dropdown.html("<p>" + escapeHTML($(input).data("settings").hintText) + "</p>"); show_dropdown(); } } + var regexp_special_chars = new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\-]', 'g'); + function regexp_escape(term) { + return term.replace(regexp_special_chars, '\\$&'); + } + // Highlight the query part of the search term function highlight_term(value, term) { - var param = "g"; - if (!settings.caseSensitive) param+= "i"; - return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escape_regexp_chars(term) + ")(?![^<>]*>)(?![^&;]+;)", param), "<b>$1</b>"); + return value.replace( + new RegExp( + "(?![^&;]+;)(?!<[^<>]*)(" + regexp_escape(term) + ")(?![^<>]*>)(?![^&;]+;)", + "gi" + ), function(match, p1) { + return "<b>" + escapeHTML(p1) + "</b>"; + } + ); } - - function escape_regexp_chars(string) { - var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\ - return string.replace(specials, "\\$&"); + + function find_value_and_highlight_term(template, value, term) { + return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + regexp_escape(value) + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term)); } // Populate the results dropdown with some results @@ -597,38 +883,46 @@ $.TokenList = function (input, url_or_data, settings) { select_dropdown_item($(event.target).closest("li")); }) .mousedown(function (event) { - add_token($(event.target).closest("li")); + add_token($(event.target).closest("li").data("tokeninput")); + hidden_input.change(); return false; }) .hide(); + if ($(input).data("settings").resultsLimit && results.length > $(input).data("settings").resultsLimit) { + results = results.slice(0, $(input).data("settings").resultsLimit); + } + $.each(results, function(index, value) { - var this_li = $("<li>" + highlight_term(value.name, query) + "</li>") - .appendTo(dropdown_ul); + var this_li = $(input).data("settings").resultsFormatter(value); + + this_li = find_value_and_highlight_term(this_li ,value[$(input).data("settings").propertyToSearch], query); + + this_li = $(this_li).appendTo(dropdown_ul); if(index % 2) { - this_li.addClass(settings.classes.dropdownItem); + this_li.addClass($(input).data("settings").classes.dropdownItem); } else { - this_li.addClass(settings.classes.dropdownItem2); + this_li.addClass($(input).data("settings").classes.dropdownItem2); } if(index === 0) { select_dropdown_item(this_li); } - $.data(this_li.get(0), "tokeninput", {"id": value.id, "name": value.name}); + $.data(this_li.get(0), "tokeninput", value); }); show_dropdown(); - if(settings.animateDropdown) { + if($(input).data("settings").animateDropdown) { dropdown_ul.slideDown("fast"); } else { dropdown_ul.show(); } } else { - if(settings.noResultsText) { - dropdown.html("<p>"+settings.noResultsText+"</p>"); + if($(input).data("settings").noResultsText) { + dropdown.html("<p>" + escapeHTML($(input).data("settings").noResultsText) + "</p>"); show_dropdown(); } } @@ -641,35 +935,34 @@ $.TokenList = function (input, url_or_data, settings) { deselect_dropdown_item($(selected_dropdown_item)); } - item.addClass(settings.classes.selectedDropdownItem); + item.addClass($(input).data("settings").classes.selectedDropdownItem); selected_dropdown_item = item.get(0); } } // Remove highlighting from an item in the results dropdown function deselect_dropdown_item (item) { - item.removeClass(settings.classes.selectedDropdownItem); + item.removeClass($(input).data("settings").classes.selectedDropdownItem); selected_dropdown_item = null; } // Do a search and show the "searching" dropdown if the input is longer - // than settings.minChars + // than $(input).data("settings").minChars function do_search() { var query = input_box.val(); - if (!settings.caseSensitive) query = query.toLowerCase(); if(query && query.length) { if(selected_token) { deselect_token($(selected_token), POSITION.AFTER); } - if(query.length >= settings.minChars) { + if(query.length >= $(input).data("settings").minChars) { show_dropdown_searching(); clearTimeout(timeout); timeout = setTimeout(function(){ run_search(query); - }, settings.searchDelay); + }, $(input).data("settings").searchDelay); } else { hide_dropdown(); } @@ -678,17 +971,22 @@ $.TokenList = function (input, url_or_data, settings) { // Do the actual search function run_search(query) { - var cached_results = cache.get(query); + var cache_key = query + computeURL(); + var cached_results = cache.get(cache_key); if(cached_results) { + if ($.isFunction($(input).data("settings").onCachedResult)) { + cached_results = $(input).data("settings").onCachedResult.call(hidden_input, cached_results); + } populate_dropdown(query, cached_results); } else { // Are we doing an ajax search or local data search? - if(settings.url) { + if($(input).data("settings").url) { + var url = computeURL(); // Extract exisiting get params var ajax_params = {}; ajax_params.data = {}; - if(settings.url.indexOf("?") > -1) { - var parts = settings.url.split("?"); + if(url.indexOf("?") > -1) { + var parts = url.split("?"); ajax_params.url = parts[0]; var param_array = parts[1].split("&"); @@ -697,67 +995,73 @@ $.TokenList = function (input, url_or_data, settings) { ajax_params.data[kv[0]] = kv[1]; }); } else { - ajax_params.url = settings.url; + ajax_params.url = url; } // Prepare the request - ajax_params.data[settings.queryParam] = query; - ajax_params.type = settings.method; - ajax_params.dataType = settings.contentType; - if(settings.crossDomain) { + ajax_params.data[$(input).data("settings").queryParam] = query; + ajax_params.type = $(input).data("settings").method; + ajax_params.dataType = $(input).data("settings").contentType; + if($(input).data("settings").crossDomain) { ajax_params.dataType = "jsonp"; } // Attach the success callback ajax_params.success = function(results) { - if($.isFunction(settings.onResult)) { - results = settings.onResult.call(hidden_input, results); + cache.add(cache_key, $(input).data("settings").jsonContainer ? results[$(input).data("settings").jsonContainer] : results); + if($.isFunction($(input).data("settings").onResult)) { + results = $(input).data("settings").onResult.call(hidden_input, results); } - if(settings.allowCreation) { - results.push({name: input_box.val() + settings.newText, id: input_box.val()}); + if($(input).data("settings").allowFreeTagging && $(input).data("settings").freeTaggingHint) { + results.push({name: input_box.val() + $(input).data("settings").newText, id: input_box.val()}); } - cache.add(query, settings.jsonContainer ? results[settings.jsonContainer] : results); // only populate the dropdown if the results are associated with the active search query - var value = input_box.val(); - if (!settings.caseSensitive) value = value.toLowerCase(); - if(value === query) { - populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results); + if(input_box.val() === query) { + populate_dropdown(query, $(input).data("settings").jsonContainer ? results[$(input).data("settings").jsonContainer] : results); } }; // Make the request $.ajax(ajax_params); - } else if(settings.local_data) { + } else if($(input).data("settings").local_data) { // Do the search through local data - var results = $.grep(settings.local_data, function (row) { - if (settings.caseSensitive) { - return row.name.indexOf(query) > -1; - } - else { - return row.name.toLowerCase().indexOf(query.toLowerCase()) > -1; - } + var results = $.grep($(input).data("settings").local_data, function (row) { + return row[$(input).data("settings").propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) > -1; }); - - if($.isFunction(settings.onResult)) { - results = settings.onResult.call(hidden_input, results); - } - if(settings.allowCreation) { - results.push({name: input_box.val() + settings.newText, id: input_box.val()}); + if($(input).data("settings").allowFreeTagging && $(input).data("settings").freeTaggingHint) { + results.push({name: input_box.val() + $(input).data("settings").newText, id: input_box.val()}); + } + + cache.add(cache_key, results); + if($.isFunction($(input).data("settings").onResult)) { + results = $(input).data("settings").onResult.call(hidden_input, results); } - - cache.add(query, results); - populate_dropdown(query, results); } } } - - if ($(input).get(0).tagName == 'SELECT') { - $(input).remove(); + + // compute the dynamic URL + function computeURL() { + var url = $(input).data("settings").url; + if(typeof $(input).data("settings").url == 'function') { + url = $(input).data("settings").url.call($(input).data("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 @@ -791,3 +1095,4 @@ $.TokenList.Cache = function (options) { }; }; }(jQuery)); + |