Foodsoft/foodsoft
1
1
Fork 0
Code Issues 36 Pull requests 5 Projects 1 Releases Wiki Activity

Fixed messages. New styling for token input plugin.

Browse source
This commit is contained in:
benni 2012-10-08 18:19:15 +02:00
parent c0c41a7752
commit 52e62f8ddb
14 changed files with 359 additions and 412 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/application.css
View file

@ -1,6 +1,6 @@
/* /*
*= require bootstrap_and_overrides *= require bootstrap_and_overrides
*= require foodsoft *= require foodsoft
*= require token-input *= require token-input-bootstrappy
*= require jquery.fancybox-1.3.4 *= require jquery.fancybox-1.3.4
*/ */

58
app/assets/stylesheets/nav.css
View file

@ -1,58 +0,0 @@
/* Navigation .... */
#nav {
position: relative;
height: 3em;
text-align: right;
margin-top: 5px; }
#nav ul {
padding: 0 0 0 0;
margin: -2.3em 0 0 0;
list-style: none; }
#nav ul li {
display: inline;
list-style: none;
padding: 0.3em 0 0.3em 0;
margin: 0 0 0 0.2em;
background: none;
vertical-align: middle; }
#nav ul li a {
margin: 0.1em 0 0 0;
text-align: center;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
color: #737272;
border: none;
background: #e3e3e3;
padding: 0.5em 1.2em 0.6em 1.2em;
margin-top: 0; }
#nav ul li a:hover {
color: #ed0606; }
#nav ul li ul {
display: none;
position: absolute;
margin: 0;
left: 0;
padding: 0.6em;
bottom: -1.4em;
right: 0em;
background: #ed0606; }
#nav ul li ul li {
border-left: 0.1em dotted white;
background: none; }
#nav ul li ul a, #nav ul li ul a:hover {
border: none;
background: none;
color: white;
font-style: normal;
font-size: 1em; }
#nav ul li.current a {
border: none;
border-bottom: none;
background: #ed0606;
padding-bottom: 0.6em;
color: white; }
#nav ul li.current ul {
display: inline; }
#nav ul li.current ul a {
background: none; }

68
app/assets/stylesheets/rails_messages.scss
View file

@ -1,68 +0,0 @@
/* rails messages .... */
h3.notice, div.notice {
color: #090; }
h3.notice {
background: #dfd image-url('icon_message.gif') no-repeat 10px 3px;
border: 1px solid #bfb;
padding: 4px 40px;
margin: 2em 0 1em 0;
font-size: 100%;
position: relative; }
h3.alert, div.alert, div.error {
color: red;
font-size: 100%;
font-weight: bold; }
h3.alert {
background: yellow image-url('error.png') no-repeat 10px 3px;
border: 1px solid red;
padding: 4px 40px;
position: relative;
margin: 2em 0 1em 0;
font-weight: normal; }
.fieldWithErrors {
padding: 2px;
background-color: red;
display: table; }
.fieldWithErrors input {
background-color: yellow; }
#errorExplanation {
width: 40em;
padding: 7px;
padding-bottom: 12px;
color: #ed0606; }
#errorExplanation h2 {
color: #ed0606;
text-align: left;
font-weight: bold;
margin: 0;
padding: 5px 5px 5px 5px;
font-size: 15px; }
#errorExplanation p {
margin: 0;
padding: 5px; }
#errorExplanation ul, #errorExplanation li {
margin: 0; }
#errorExplanation li {
padding: 0;
font-size: 12px;
list-style: square; }
div.uploadStatus {
margin: 5px; }
div.progressBar {
margin: 5px; }
div.progressBar div.border {
background-color: #fff;
border: 1px solid grey;
width: 100%; }
div.progressBar div.background {
background-color: #333;
height: 18px;
width: 0%; }

54
app/assets/stylesheets/scaffold.css
View file

@ -1,54 +0,0 @@
body { background-color: #fff; color: #333; }
body, p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
pre {
background-color: #eee;
padding: 10px;
font-size: 11px;
}
a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }
.fieldWithErrors {
padding: 2px;
background-color: red;
display: table;
}
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}

42
app/assets/stylesheets/simple_form.css
View file

@ -1,42 +0,0 @@
.simple_form label {
float: left;
width: 120px;
text-align: right;
margin: 2px 10px;
}
.simple_form div.input {
margin-bottom: 10px;
clear: both;
}
.simple_form div.boolean, .simple_form input[type='submit'] {
margin-left: 140px;
}
.simple_form div.boolean label, .simple_form label.collection_radio {
float: none;
margin: 0;
}
.simple_form label.collection_radio {
margin-right: 10px;
margin-left: 2px;
}
.simple_form .error {
clear: left;
margin-left: 140px;
font-size: 12px;
color: #D00;
display: block;
}
.simple_form .hint {
clear: left;
margin-left: 140px;
font-size: 12px;
color: #555;
display: block;
font-style: italic;
}

133
app/assets/stylesheets/token-input-bootstrappy.css Normal file
View file

@ -0,0 +1,133 @@
/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
overflow: hidden;
height: auto !important;
height: 1%;
width: 400px;
border: 1px solid #BBB;
cursor: text;
font-size: 12px;
font-family: Verdana, sans-serif;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul.token-input-list-facebook.token-input-focused-facebook {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted 9;
}
ul.token-input-list-facebook li input {
border: 0;
width: 100px;
padding: 3px 8px;
background-color: white;
margin: 2px 0;
-webkit-appearance: caret;
}
li.token-input-token-facebook {
overflow: hidden;
height: auto !important;
height: 15px;
margin: 3px;
padding: 1px 3px;
background-color: #F5F5F5;
color: #555;
cursor: default;
border: 1px solid #BBB;
font-size: 11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
white-space: nowrap;
}
li.token-input-token-facebook p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-facebook span {
color: #a6b3cf;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
li.token-input-selected-token-facebook {
background-color: #5670a6;
border: 1px solid #3b5998;
color: #fff;
}
li.token-input-input-token-facebook {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
div.token-input-dropdown-facebook {
position: absolute;
width: 400px;
background-color: #F5F5F5;
overflow: hidden;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: default;
font-size: 12px;
font-family: Verdana, sans-serif;
z-index: 1;
}
div.token-input-dropdown-facebook p {
margin: 0;
padding: 5px;
font-weight: bold;
color: #555;
}
div.token-input-dropdown-facebook ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-facebook ul li {
background-color: #f5f5f5;
padding: 3px;
margin: 0;
list-style-type: none;
}
div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
background-color: #f5f5f5;
}
div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
background-color: #f5f5f5;
}
div.token-input-dropdown-facebook ul li em {
font-weight: bold;
font-style: normal;
}
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
background-color: #08C;
color: #f5f5f5;
}

112
app/assets/stylesheets/token-input.css
View file

@ -1,112 +0,0 @@
/* Example tokeninput style #1: Token vertical list*/
ul.token-input-list {
overflow: hidden;
height: auto !important;
height: 1%;
width: 300px;
border: 1px solid #999;
cursor: text;
font-size: 12px;
font-family: Verdana;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
}
ul.token-input-list li {
list-style-type: none;
}
ul.token-input-list li input {
border: 0;
width: 350px;
padding: 3px 8px;
background-color: white;
-webkit-appearance: caret;
}
li.token-input-token {
overflow: hidden;
height: auto !important;
height: 1%;
margin: 3px;
padding: 3px 5px;
background-color: #d0efa0;
color: #000;
font-weight: bold;
cursor: default;
display: block;
}
li.token-input-token p {
float: left;
padding: 0;
margin: 0;
}
li.token-input-token span {
float: right;
color: #777;
cursor: pointer;
}
li.token-input-selected-token {
background-color: #08844e;
color: #fff;
}
li.token-input-selected-token span {
color: #bbb;
}
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: 12px;
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;
list-style-type: none;
}
div.token-input-dropdown ul li.token-input-dropdown-item {
background-color: #fafafa;
}
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: #d0efa0;
}

2
app/controllers/messages_controller.rb
View file

@ -2,7 +2,7 @@ class MessagesController < ApplicationController
# Renders the "inbox" action. # Renders the "inbox" action.
def index def index
@messages = Message.public.paginate :page => params[:page], :per_page => 20, :order => 'created_at DESC' @messages = Message.public.page(params[:page]).per(@per_page).order('created_at DESC')
end end
# Creates a new message object. # Creates a new message object.

4
app/views/messages/_messages.html.haml
View file

@ -1,3 +1,7 @@
- if Message.public.count > 20
= items_per_page
= pagination_links_remote messages
- unless messages.empty? - unless messages.empty?
%table.table.table-striped %table.table.table-striped
%tbody %tbody

7
app/views/messages/index.html.haml
View file

@ -1,8 +1,5 @@
- title "Nachrichten im Überblick" - title "Nachrichten"
%p= link_to('Neue Nachricht', :action => 'new')
%div{:style => "text-align:right"}= will_paginate @messages
= link_to 'Neue Nachricht', new_message_path, class: 'btn btn-primary'
#messages #messages
= render :partial => 'messages', :locals => { :messages => @messages, :subject_length => 130 } = render :partial => 'messages', :locals => { :messages => @messages, :subject_length => 130 }

13
app/views/messages/new.haml
View file

@ -1,4 +1,4 @@
- content_for :head do - content_for :javascript do
:javascript :javascript
$(function() { $(function() {
$('#message_recipient_tokens').tokenInput("#{users_path(:format => :json)}", { $('#message_recipient_tokens').tokenInput("#{users_path(:format => :json)}", {
@ -6,7 +6,8 @@
prePopulate: $('#message_recipient_tokens').data('pre'), prePopulate: $('#message_recipient_tokens').data('pre'),
hintText: 'Nach Nutzerin suchen', hintText: 'Nach Nutzerin suchen',
noResultText: 'Keine Nutzerin gefunden', noResultText: 'Keine Nutzerin gefunden',
searchingText: 'Suche ...' searchingText: 'Suche ...',
theme: 'facebook'
}); });
$('#message_sent_to_all').click(function() { $('#message_sent_to_all').click(function() {
@ -38,6 +39,8 @@
= f.input :recipient_tokens, :input_html => { 'data-pre' => User.find_all_by_id(@message.recipients_ids).map { |u| u.token_attributes }.to_json } = f.input :recipient_tokens, :input_html => { 'data-pre' => User.find_all_by_id(@message.recipients_ids).map { |u| u.token_attributes }.to_json }
= f.input :group_id, :as => :select, :collection => Group.order('type DESC, name DESC').all.reject { |g| g.memberships.empty? } = f.input :group_id, :as => :select, :collection => Group.order('type DESC, name DESC').all.reject { |g| g.memberships.empty? }
= f.input :private = f.input :private
= f.input :subject = f.input :subject, input_html: {class: 'input-xxlarge'}
= f.input :body = f.input :body, input_html: {class: 'input-xxlarge'}
= f.submit .form-actions
= f.submit
= link_to 'oder abbrechen', :back

2
app/views/messages/show.haml
View file

@ -16,6 +16,6 @@
%p= simple_format(h(@message.body)) %p= simple_format(h(@message.body))
%hr/ %hr/
%p %p
= link_to('Antworten', new_message_path(:message => {:reply_to => @message.id})) = link_to 'Antworten', new_message_path(:message => {:reply_to => @message.id}), class: 'btn'
| |
= link_to 'Nachricht im Überblick', messages_path = link_to 'Nachricht im Überblick', messages_path

4
config/locales/de.yml
View file

@ -331,7 +331,7 @@ de:
group_id: 'Gruppe' group_id: 'Gruppe'
subject: 'Betreff' subject: 'Betreff'
body: 'Inhalt' body: 'Inhalt'
private: 'privat verschicken, Nachricht erscheint nicht im Foodsoft Posteingang' private: Privat
page: page:
body: 'Inhalt' body: 'Inhalt'
supplier: supplier:
@ -394,3 +394,5 @@ de:
unit: 'z.B. KG oder 1L oder 500g' unit: 'z.B. KG oder 1L oder 500g'
stock_article: stock_article:
supplier: '' supplier: ''
message:
private: Nachricht erscheint nicht im Foodsoft Posteingang

268
vendor/assets/javascripts/jquery.tokeninput.js vendored
View file

@ -1,6 +1,6 @@
/* /*
* jQuery Plugin: Tokenizing Autocomplete Text Entry * jQuery Plugin: Tokenizing Autocomplete Text Entry
* Version 1.4.2 * Version 1.6.0
* *
* Copyright (c) 2009 James Smith (http://loopj.com) * Copyright (c) 2009 James Smith (http://loopj.com)
* Licensed jointly under the GPL and MIT licenses, * Licensed jointly under the GPL and MIT licenses,
@ -11,24 +11,46 @@
(function ($) { (function ($) {
// Default settings // Default settings
var DEFAULT_SETTINGS = { var DEFAULT_SETTINGS = {
// Search settings
method: "GET",
contentType: "json",
queryParam: "q",
searchDelay: 300,
minChars: 1,
propertyToSearch: "name",
jsonContainer: null,
// Display settings
hintText: "Type in a search term", hintText: "Type in a search term",
noResultsText: "No results", noResultsText: "No results",
searchingText: "Searching...", searchingText: "Searching...",
deleteText: "&times;", deleteText: "&times;",
searchDelay: 300, animateDropdown: true,
minChars: 1,
// Tokenization settings
tokenLimit: null, tokenLimit: null,
jsonContainer: null,
method: "GET",
contentType: "json",
queryParam: "q",
tokenDelimiter: ",", tokenDelimiter: ",",
preventDuplicates: false, preventDuplicates: false,
// Output settings
tokenValue: "id",
// Prepopulation settings
prePopulate: null, prePopulate: null,
animateDropdown: true, 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
onResult: null, onResult: null,
onAdd: null, onAdd: null,
onDelete: null onDelete: null,
onReady: null
}; };
// Default classes to use when theming // Default classes to use when theming
@ -71,17 +93,42 @@ var KEY = {
COMMA: 188 COMMA: 188
}; };
// Additional public (exposed) methods
var methods = {
init: function(url_or_data_or_function, options) {
var settings = $.extend({}, DEFAULT_SETTINGS, options || {});
return this.each(function () {
$(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();
}
}
// Expose the .tokenInput function to jQuery as a plugin // Expose the .tokenInput function to jQuery as a plugin
$.fn.tokenInput = function (url_or_data, options) { $.fn.tokenInput = function (method) {
var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); // Method calling and initialization logic
if(methods[method]) {
return this.each(function () { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
new $.TokenList(this, url_or_data, settings); } else {
}); return methods.init.apply(this, arguments);
}
}; };
// TokenList class for each input // TokenList class for each input
$.TokenList = function (input, url_or_data, settings) { $.TokenList = function (input, url_or_data, settings) {
// //
@ -89,19 +136,22 @@ $.TokenList = function (input, url_or_data, settings) {
// //
// Configure the data source // Configure the data source
if($.type(url_or_data) === "string") { if($.type(url_or_data) === "string" || $.type(url_or_data) === "function") {
// Set the url to query against // Set the url to query against
settings.url = url_or_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 // Make a smart guess about cross-domain if it wasn't explicitly specified
if(settings.crossDomain === undefined) { if(settings.crossDomain === undefined) {
if(settings.url.indexOf("://") === -1) { if(url.indexOf("://") === -1) {
settings.crossDomain = false; settings.crossDomain = false;
} else { } else {
settings.crossDomain = (location.href.split(/\/+/g)[1] !== settings.url.split(/\/+/g)[1]); settings.crossDomain = (location.href.split(/\/+/g)[1] !== url.split(/\/+/g)[1]);
} }
} }
} else if($.type(url_or_data) === "array") { } else if(typeof(url_or_data) === "object") {
// Set the local data to search through // Set the local data to search through
settings.local_data = url_or_data; settings.local_data = url_or_data;
} }
@ -139,6 +189,7 @@ $.TokenList = function (input, url_or_data, settings) {
.css({ .css({
outline: "none" outline: "none"
}) })
.attr("id", settings.idPrefix + input.id)
.focus(function () { .focus(function () {
if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
show_dropdown_hint(); show_dropdown_hint();
@ -146,6 +197,7 @@ $.TokenList = function (input, url_or_data, settings) {
}) })
.blur(function () { .blur(function () {
hide_dropdown(); hide_dropdown();
$(this).val("");
}) })
.bind("keyup keydown blur update", resize_input) .bind("keyup keydown blur update", resize_input)
.keydown(function (event) { .keydown(function (event) {
@ -197,6 +249,7 @@ $.TokenList = function (input, url_or_data, settings) {
if(!$(this).val().length) { if(!$(this).val().length) {
if(selected_token) { if(selected_token) {
delete_token($(selected_token)); delete_token($(selected_token));
hidden_input.change();
} else if(previous_token.length) { } else if(previous_token.length) {
select_token($(previous_token.get(0))); select_token($(previous_token.get(0)));
} }
@ -215,7 +268,8 @@ $.TokenList = function (input, url_or_data, settings) {
case KEY.NUMPAD_ENTER: case KEY.NUMPAD_ENTER:
case KEY.COMMA: case KEY.COMMA:
if(selected_dropdown_item) { if(selected_dropdown_item) {
add_token($(selected_dropdown_item)); add_token($(selected_dropdown_item).data("tokeninput"));
hidden_input.change();
return false; return false;
} }
break; break;
@ -246,6 +300,7 @@ $.TokenList = function (input, url_or_data, settings) {
// Keep a reference to the selected token and dropdown item // Keep a reference to the selected token and dropdown item
var selected_token = null; var selected_token = null;
var selected_token_index = 0;
var selected_dropdown_item = null; var selected_dropdown_item = null;
// The list to store the token items in // The list to store the token items in
@ -308,19 +363,72 @@ $.TokenList = function (input, url_or_data, settings) {
// Pre-populate list if items exist // Pre-populate list if items exist
hidden_input.val(""); hidden_input.val("");
li_data = settings.prePopulate || hidden_input.data("pre"); var li_data = settings.prePopulate || hidden_input.data("pre");
if(settings.processPrePopulate && $.isFunction(settings.onResult)) {
li_data = settings.onResult.call(hidden_input, li_data);
}
if(li_data && li_data.length) { if(li_data && li_data.length) {
$.each(li_data, function (index, value) { $.each(li_data, function (index, value) {
insert_token(value.id, value.name); insert_token(value);
checkTokenLimit();
}); });
} }
// Initialization is done
if($.isFunction(settings.onReady)) {
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;
}
// //
// Private functions // Private functions
// //
function checkTokenLimit() {
if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
input_box.hide();
hide_dropdown();
return;
}
}
function resize_input() { function resize_input() {
if(input_val === (input_val = input_box.val())) {return;} if(input_val === (input_val = input_box.val())) {return;}
@ -338,8 +446,9 @@ $.TokenList = function (input, url_or_data, settings) {
} }
// Inner function to a token to the list // Inner function to a token to the list
function insert_token(id, value) { function insert_token(item) {
var this_token = $("<li><p>"+ value +"</p> </li>") var this_token = settings.tokenFormatter(item);
this_token = $(this_token)
.addClass(settings.classes.token) .addClass(settings.classes.token)
.insertBefore(input_token); .insertBefore(input_token);
@ -349,30 +458,35 @@ $.TokenList = function (input, url_or_data, settings) {
.appendTo(this_token) .appendTo(this_token)
.click(function () { .click(function () {
delete_token($(this).parent()); delete_token($(this).parent());
hidden_input.change();
return false; return false;
}); });
// Store data on the token // Store data on the token
var token_data = {"id": id, "name": value}; var token_data = {"id": item.id};
$.data(this_token.get(0), "tokeninput", token_data); token_data[settings.propertyToSearch] = item[settings.propertyToSearch];
$.data(this_token.get(0), "tokeninput", item);
// Save this token for duplicate checking // Save this token for duplicate checking
saved_tokens.push(token_data); 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 // Update the hidden input
var token_ids = $.map(saved_tokens, function (el) { update_hidden_input(saved_tokens, hidden_input);
return el.id;
});
hidden_input.val(token_ids.join(settings.tokenDelimiter));
token_count += 1; token_count += 1;
// Check the token limit
if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
input_box.hide();
hide_dropdown();
}
return this_token; return this_token;
} }
// Add a token to the token list based on user input // Add a token to the token list based on user input
function add_token (item) { function add_token (item) {
var li_data = $.data(item.get(0), "tokeninput");
var callback = settings.onAdd; var callback = settings.onAdd;
// See if the token already exists and select it if we don't want duplicates // See if the token already exists and select it if we don't want duplicates
@ -381,7 +495,7 @@ $.TokenList = function (input, url_or_data, settings) {
token_list.children().each(function () { token_list.children().each(function () {
var existing_token = $(this); var existing_token = $(this);
var existing_data = $.data(existing_token.get(0), "tokeninput"); var existing_data = $.data(existing_token.get(0), "tokeninput");
if(existing_data && existing_data.id === li_data.id) { if(existing_data && existing_data.id === item.id) {
found_existing_token = existing_token; found_existing_token = existing_token;
return false; return false;
} }
@ -396,15 +510,9 @@ $.TokenList = function (input, url_or_data, settings) {
} }
// Insert the new tokens // Insert the new tokens
insert_token(li_data.id, li_data.name); if(settings.tokenLimit == null || token_count < settings.tokenLimit) {
insert_token(item);
// Check the token limit checkTokenLimit();
if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
input_box.hide();
hide_dropdown();
return;
} else {
input_box.focus();
} }
// Clear input box // Clear input box
@ -415,7 +523,7 @@ $.TokenList = function (input, url_or_data, settings) {
// Execute the onAdd callback if defined // Execute the onAdd callback if defined
if($.isFunction(callback)) { if($.isFunction(callback)) {
callback(li_data); callback.call(hidden_input,item);
} }
} }
@ -438,10 +546,13 @@ $.TokenList = function (input, url_or_data, settings) {
if(position === POSITION.BEFORE) { if(position === POSITION.BEFORE) {
input_token.insertBefore(token); input_token.insertBefore(token);
selected_token_index--;
} else if(position === POSITION.AFTER) { } else if(position === POSITION.AFTER) {
input_token.insertAfter(token); input_token.insertAfter(token);
selected_token_index++;
} else { } else {
input_token.appendTo(token_list); input_token.appendTo(token_list);
selected_token_index = token_count;
} }
// Show the input box and give it focus again // Show the input box and give it focus again
@ -469,6 +580,9 @@ $.TokenList = function (input, url_or_data, settings) {
var token_data = $.data(token.get(0), "tokeninput"); var token_data = $.data(token.get(0), "tokeninput");
var callback = settings.onDelete; var callback = settings.onDelete;
var index = token.prevAll().length;
if(index > selected_token_index) index--;
// Delete the token // Delete the token
token.remove(); token.remove();
selected_token = null; selected_token = null;
@ -477,15 +591,11 @@ $.TokenList = function (input, url_or_data, settings) {
input_box.focus(); input_box.focus();
// Remove this token from the saved list // Remove this token from the saved list
saved_tokens = $.grep(saved_tokens, function (val) { saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1));
return (val.id !== token_data.id); if(index < selected_token_index) selected_token_index--;
});
// Update the hidden input // Update the hidden input
var token_ids = $.map(saved_tokens, function (el) { update_hidden_input(saved_tokens, hidden_input);
return el.id;
});
hidden_input.val(token_ids.join(settings.tokenDelimiter));
token_count -= 1; token_count -= 1;
@ -498,10 +608,19 @@ $.TokenList = function (input, url_or_data, settings) {
// Execute the onDelete callback if defined // Execute the onDelete callback if defined
if($.isFunction(callback)) { if($.isFunction(callback)) {
callback(token_data); callback.call(hidden_input,token_data);
} }
} }
// Update the hidden input box value
function update_hidden_input(saved_tokens, hidden_input) {
var token_values = $.map(saved_tokens, function (el) {
return el[settings.tokenValue];
});
hidden_input.val(token_values.join(settings.tokenDelimiter));
}
// Hide and clear the results dropdown // Hide and clear the results dropdown
function hide_dropdown () { function hide_dropdown () {
dropdown.hide().empty(); dropdown.hide().empty();
@ -538,6 +657,10 @@ $.TokenList = function (input, url_or_data, settings) {
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>"); 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));
}
// Populate the results dropdown with some results // Populate the results dropdown with some results
function populate_dropdown (query, results) { function populate_dropdown (query, results) {
if(results && results.length) { if(results && results.length) {
@ -548,14 +671,18 @@ $.TokenList = function (input, url_or_data, settings) {
select_dropdown_item($(event.target).closest("li")); select_dropdown_item($(event.target).closest("li"));
}) })
.mousedown(function (event) { .mousedown(function (event) {
add_token($(event.target).closest("li")); add_token($(event.target).closest("li").data("tokeninput"));
hidden_input.change();
return false; return false;
}) })
.hide(); .hide();
$.each(results, function(index, value) { $.each(results, function(index, value) {
var this_li = $("<li>" + highlight_term(value.name, query) + "</li>") var this_li = settings.resultsFormatter(value);
.appendTo(dropdown_ul);
this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query);
this_li = $(this_li).appendTo(dropdown_ul);
if(index % 2) { if(index % 2) {
this_li.addClass(settings.classes.dropdownItem); this_li.addClass(settings.classes.dropdownItem);
@ -567,7 +694,7 @@ $.TokenList = function (input, url_or_data, settings) {
select_dropdown_item(this_li); 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(); show_dropdown();
@ -628,17 +755,19 @@ $.TokenList = function (input, url_or_data, settings) {
// Do the actual search // Do the actual search
function run_search(query) { 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(cached_results) {
populate_dropdown(query, cached_results); populate_dropdown(query, cached_results);
} else { } else {
// Are we doing an ajax search or local data search? // Are we doing an ajax search or local data search?
if(settings.url) { if(settings.url) {
var url = computeURL();
// Extract exisiting get params // Extract exisiting get params
var ajax_params = {}; var ajax_params = {};
ajax_params.data = {}; ajax_params.data = {};
if(settings.url.indexOf("?") > -1) { if(url.indexOf("?") > -1) {
var parts = settings.url.split("?"); var parts = url.split("?");
ajax_params.url = parts[0]; ajax_params.url = parts[0];
var param_array = parts[1].split("&"); var param_array = parts[1].split("&");
@ -647,7 +776,7 @@ $.TokenList = function (input, url_or_data, settings) {
ajax_params.data[kv[0]] = kv[1]; ajax_params.data[kv[0]] = kv[1];
}); });
} else { } else {
ajax_params.url = settings.url; ajax_params.url = url;
} }
// Prepare the request // Prepare the request
@ -661,9 +790,9 @@ $.TokenList = function (input, url_or_data, settings) {
// Attach the success callback // Attach the success callback
ajax_params.success = function(results) { ajax_params.success = function(results) {
if($.isFunction(settings.onResult)) { if($.isFunction(settings.onResult)) {
results = settings.onResult.call(this, results); results = settings.onResult.call(hidden_input, results);
} }
cache.add(query, settings.jsonContainer ? results[settings.jsonContainer] : results); cache.add(cache_key, settings.jsonContainer ? results[settings.jsonContainer] : results);
// only populate the dropdown if the results are associated with the active search query // only populate the dropdown if the results are associated with the active search query
if(input_box.val().toLowerCase() === query) { if(input_box.val().toLowerCase() === query) {
@ -676,13 +805,26 @@ $.TokenList = function (input, url_or_data, settings) {
} else if(settings.local_data) { } else if(settings.local_data) {
// Do the search through local data // Do the search through local data
var results = $.grep(settings.local_data, function (row) { var results = $.grep(settings.local_data, function (row) {
return row.name.toLowerCase().indexOf(query.toLowerCase()) > -1; return row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) > -1;
}); });
if($.isFunction(settings.onResult)) {
results = settings.onResult.call(hidden_input, results);
}
cache.add(cache_key, results);
populate_dropdown(query, results); populate_dropdown(query, results);
} }
} }
} }
// compute the dynamic URL
function computeURL() {
var url = settings.url;
if(typeof settings.url == 'function') {
url = settings.url.call();
}
return url;
}
}; };
// Really basic cache for the results // Really basic cache for the results