aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default
diff options
context:
space:
mode:
authormistic100 <mistic@piwigo.org>2013-06-16 20:53:20 +0000
committermistic100 <mistic@piwigo.org>2013-06-16 20:53:20 +0000
commit68ffc79d86eebbe981b65913c67dc0ae7fa4531d (patch)
tree4b4c99adae65a1d1cc769736fff07c697497b51b /themes/default
parentc17bc66aeb4cbbe4ec17b8b6b6ef9b3d66d89664 (diff)
feature:2927 Update TokenInput to 1.6.1/mistic100
git-svn-id: http://piwigo.org/svn/trunk@23275 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--themes/default/js/plugins/jquery.tokeninput.css16
-rw-r--r--themes/default/js/plugins/jquery.tokeninput.js713
2 files changed, 525 insertions, 204 deletions
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: "&times;",
+ // 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: "&times;",
+ 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 = {
+ '&': '&amp;',
+ '<': '&lt;',
+ '>': '&gt;',
+ '"': '&quot;',
+ "'": '&#x27;',
+ '/': '&#x2F;'
+};
-// 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, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
- 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));
+