Add token input extension for facet selection

Using modified version o jquery token input available at https://github.com/brauliobo/jquery-tokeninput

Add token input extension for facet selection
Using modified version o jquery token input available at https://github.com/brauliobo/jquery-tokeninput
Braulio Bhavamitra
1 parent 22493257
Showing 4 changed files with 167 additions and 23 deletions Show diff stats
app/views/layouts/application-ng.rhtml
public/javascripts/jquery.tokeninput.js
public/stylesheets/token-input-facet.css
public/stylesheets/token-input.css
@@ -13,6 +13,7 @@
     <%= stylesheet_link_tag icon_theme_stylesheet_path %>
     <%= stylesheet_link_tag theme_stylesheet_path %>
     <%= stylesheet_link_tag jquery_ui_theme_stylesheet_path %>
+    <%= stylesheet_link_tag "token-input-facet" %>
     <% @plugins.enabled_plugins.each do |plugin| %>
       <% if plugin.stylesheet? %>
         <%= stylesheet_tag plugin.class.public_path('style.css'), {} %>
@@ -17,6 +17,7 @@ var DEFAULT_SETTINGS = {
     deleteText: "&times;",
     searchDelay: 300,
     minChars: 1,
+    permanentDropdown: false,
     tokenLimit: null,
     jsonContainer: null,
     method: "GET",
@@ -27,6 +28,7 @@ var DEFAULT_SETTINGS = {
     prePopulate: null,
     processPrePopulate: false,
     animateDropdown: true,
+    dontAdd: false,
     onResult: null,
     onAdd: null,
     onDelete: null,
@@ -58,6 +60,7 @@ var POSITION = {
 // Keys "enum"
 var KEY = {
     BACKSPACE: 8,
+    DELETE: 46,
     TAB: 9,
     ENTER: 13,
     ESCAPE: 27,
@@ -77,10 +80,8 @@ var KEY = {
 // 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));
+            $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, options));
         });
     },
     clear: function() {
@@ -112,6 +113,7 @@ $.TokenList = function (input, url_or_data, settings) {
     //
     // Initialization
     //
+    var settings = $.extend({}, DEFAULT_SETTINGS, options || {});
  
     // Configure the data source
     if(typeof(url_or_data) === "string") {
@@ -172,7 +174,6 @@ $.TokenList = function (input, url_or_data, settings) {
         })
         .blur(function () {
             hide_dropdown();
-            $(this).val("");
         })
         .bind("keyup keydown blur update", resize_input)
         .keydown(function (event) {
@@ -205,7 +206,11 @@ $.TokenList = function (input, url_or_data, settings) {
                     } else {
                         var dropdown_item = null;
  
-                        if(event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) {
+                        if (event.keyCode == KEY.LEFT && (this.selectionStart > 0 || this.selectionStart != this.selectionEnd))
+                            return true;
+                        else if (event.keyCode == KEY.RIGHT && (this.selectionEnd < $(this).val().length || this.selectionStart != this.selectionEnd))
+                            return true;
+                        else if(event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) {
                             dropdown_item = $(selected_dropdown_item).next();
                         } else {
                             dropdown_item = $(selected_dropdown_item).prev();
@@ -219,16 +224,21 @@ $.TokenList = function (input, url_or_data, settings) {
                     break;
  
                 case KEY.BACKSPACE:
+                case KEY.DELETE:
                     previous_token = input_token.prev();
-                    if(!$(this).val().length && settings.backspaceDeleteItem) {
+                    next_token = input_token.next();
+
+                    if(!$(this).val().length) {
                         if(selected_token) {
                             delete_token($(selected_token));
-                        } else if(previous_token.length) {
+                        } else if(KEY.DELETE && next_token.length) {
+                            select_token($(next_token.get(0)));
+                        } else if(KEY.BACKSPACE && previous_token.length) {
                             select_token($(previous_token.get(0)));
                         }
  
                         return false;
-                    } else if($(this).val().length === 1) {
+                    } else if(!settings.permanentDropdown && $(this).val().length === 1) {
                         hide_dropdown();
                     } else {
                         // set a timeout just long enough to let this function finish.
@@ -315,8 +325,14 @@ $.TokenList = function (input, url_or_data, settings) {
     // The list to store the dropdown items in
     var dropdown = $("<div>")
         .addClass(settings.classes.dropdown)
-        .appendTo("body")
         .hide();
+    dropdown.appendTo("body");
+    if (!settings.permanentDropdown)
+        dropdown.appendTo("body");
+    else {
+        $(input).after(dropdown.show());
+        do_search();
+    }
  
     // Magic element to help us resize the text input
     var input_resizer = $("<tester/>")
@@ -447,6 +463,9 @@ $.TokenList = function (input, url_or_data, settings) {
  
     // Add a token to the token list based on user input
     function add_token (item) {
+        if (settings.dontAdd)
+            return;
+
         var callback = settings.onAdd;
  
         // See if the token already exists and select it if we don't want duplicates
@@ -575,19 +594,28 @@ $.TokenList = function (input, url_or_data, settings) {
  
     // Hide and clear the results dropdown
     function hide_dropdown () {
-        dropdown.hide().empty();
-        selected_dropdown_item = null;
+        if (!settings.permanentDropdown) {
+            dropdown.hide().empty();
+            selected_dropdown_item = null;
+        } 
     }
  
     function show_dropdown() {
-        dropdown
-            .css({
-                position: "absolute",
-                top: $(token_list).offset().top + $(token_list).outerHeight(),
-                left: $(token_list).offset().left,
-                zindex: 999
-            })
-            .show();
+        if (!settings.permanentDropdown)
+            dropdown
+                .css({
+                    position: "absolute",
+                    top: $(token_list).offset().top + $(token_list).outerHeight(),
+                    left: $(token_list).offset().left,
+                    zindex: 999
+                })
+                .show();
+        else
+            dropdown
+                .css({
+                    position: "relative",
+                })
+                .show();
     }
  
     function show_dropdown_searching () {
@@ -598,7 +626,7 @@ $.TokenList = function (input, url_or_data, settings) {
     }
  
     function show_dropdown_hint () {
-        if(settings.hintText) {
+        if(!settings.permanentDropdown && settings.hintText) {
             dropdown.html("<p>"+settings.hintText+"</p>");
             show_dropdown();
         }
@@ -694,7 +722,8 @@ $.TokenList = function (input, url_or_data, settings) {
             } else {
                 hide_dropdown();
             }
-        }
+        } else if (settings.permanentDropdown)
+            run_search('');
     }
  
     // Do the actual search
@@ -0,0 +1,114 @@
+/* Example tokeninput style #1: Token vertical list*/
+ul.token-input-list-facet {
+    overflow: hidden; 
+    height: auto !important; 
+    height: 1%;
+    width: 130px;
+    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;
+    clear: left;
+}
+
+ul.token-input-list-facet li {
+    list-style-type: none;
+}
+
+ul.token-input-list-facet li input {
+    border: 0;
+    width: 350px;
+    padding: 3px 8px;
+    background-color: white;
+    -webkit-appearance: caret;
+}
+
+li.token-input-token-facet {
+    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-facet p {
+    float: left;
+    padding: 0;
+    margin: 0;
+}
+
+li.token-input-token-facet span {
+    float: right;
+    color: #777;
+    cursor: pointer;
+}
+
+li.token-input-selected-token-facet {
+    background-color: #08844e;
+    color: #fff;
+}
+
+li.token-input-selected-token-facet span {
+    color: #bbb;
+}
+
+div.token-input-dropdown-facet {
+    position: relative;
+    width: 130px;
+    height: 150px;
+    background-color: #E5F4FB;
+    overflow: auto;
+    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-facet p {
+    margin: 0;
+    padding: 5px;
+    font-weight: bold;
+    color: #777;
+}
+
+div.token-input-dropdown-facet ul {
+    margin: 0;
+    padding: 0;
+}
+
+div.token-input-dropdown-facet ul li {
+    background-color: #E5F4FB;
+    padding: 3px;
+    list-style-type: none;
+}
+
+div.token-input-dropdown-facet ul li.token-input-dropdown-item-facet {
+    background-color: #E5F4FB;
+}
+
+div.token-input-dropdown-facet ul li.token-input-dropdown-item2-facet {
+    background-color: #E5F4FB;
+}
+
+div.token-input-dropdown-facet ul li em {
+    font-weight: bold;
+    font-style: normal;
+}
+
+div.token-input-dropdown-facet ul li.token-input-selected-dropdown-item-facet {
+    background-color: #d0efa0;
+}
+
@@ -3,7 +3,7 @@ ul.token-input-list {
     overflow: hidden; 
     height: auto !important; 
     height: 1%;
-    width: 497px;
+    width: 400px;
     border: 1px solid #999;
     cursor: text;
     font-size: 12px;
@@ -64,7 +64,7 @@ li.token-input-selected-token span {
  
 div.token-input-dropdown {
     position: absolute;
-    width: 497px;
+    width: 400px;
     background-color: #fff;
     overflow: hidden;
     border-left: 1px solid #ccc;
...	...	@@ -13,6 +13,7 @@
13	13	<%= stylesheet_link_tag icon_theme_stylesheet_path %>
14	14	<%= stylesheet_link_tag theme_stylesheet_path %>
15	15	<%= stylesheet_link_tag jquery_ui_theme_stylesheet_path %>
	16	+ <%= stylesheet_link_tag "token-input-facet" %>
16	17	<% @plugins.enabled_plugins.each do \|plugin\| %>
17	18	<% if plugin.stylesheet? %>
18	19	<%= stylesheet_tag plugin.class.public_path('style.css'), {} %>
...	...
...	...	@@ -17,6 +17,7 @@ var DEFAULT_SETTINGS = {
17	17	deleteText: "×",
18	18	searchDelay: 300,
19	19	minChars: 1,
	20	+ permanentDropdown: false,
20	21	tokenLimit: null,
21	22	jsonContainer: null,
22	23	method: "GET",
...	...	@@ -27,6 +28,7 @@ var DEFAULT_SETTINGS = {
27	28	prePopulate: null,
28	29	processPrePopulate: false,
29	30	animateDropdown: true,
	31	+ dontAdd: false,
30	32	onResult: null,
31	33	onAdd: null,
32	34	onDelete: null,
...	...	@@ -58,6 +60,7 @@ var POSITION = {
58	60	// Keys "enum"
59	61	var KEY = {
60	62	BACKSPACE: 8,
	63	+ DELETE: 46,
61	64	TAB: 9,
62	65	ENTER: 13,
63	66	ESCAPE: 27,
...	...	@@ -77,10 +80,8 @@ var KEY = {
77	80	// Additional public (exposed) methods
78	81	var methods = {
79	82	init: function(url_or_data_or_function, options) {
80		- var settings = $.extend({}, DEFAULT_SETTINGS, options \|\| {});
81		-
82	83	return this.each(function () {
83		- $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings));
	84	+ $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, options));
84	85	});
85	86	},
86	87	clear: function() {
...	...	@@ -112,6 +113,7 @@ $.TokenList = function (input, url_or_data, settings) {
112	113	//
113	114	// Initialization
114	115	//
	116	+ var settings = $.extend({}, DEFAULT_SETTINGS, options \|\| {});
115	117
116	118	// Configure the data source
117	119	if(typeof(url_or_data) === "string") {
...	...	@@ -172,7 +174,6 @@ $.TokenList = function (input, url_or_data, settings) {
172	174	})
173	175	.blur(function () {
174	176	hide_dropdown();
175		- $(this).val("");
176	177	})
177	178	.bind("keyup keydown blur update", resize_input)
178	179	.keydown(function (event) {
...	...	@@ -205,7 +206,11 @@ $.TokenList = function (input, url_or_data, settings) {
205	206	} else {
206	207	var dropdown_item = null;
207	208
208		- if(event.keyCode === KEY.DOWN \|\| event.keyCode === KEY.RIGHT) {
	209	+ if (event.keyCode == KEY.LEFT && (this.selectionStart > 0 \|\| this.selectionStart != this.selectionEnd))
	210	+ return true;
	211	+ else if (event.keyCode == KEY.RIGHT && (this.selectionEnd < $(this).val().length \|\| this.selectionStart != this.selectionEnd))
	212	+ return true;
	213	+ else if(event.keyCode === KEY.DOWN \|\| event.keyCode === KEY.RIGHT) {
209	214	dropdown_item = $(selected_dropdown_item).next();
210	215	} else {
211	216	dropdown_item = $(selected_dropdown_item).prev();
...	...	@@ -219,16 +224,21 @@ $.TokenList = function (input, url_or_data, settings) {
219	224	break;
220	225
221	226	case KEY.BACKSPACE:
	227	+ case KEY.DELETE:
222	228	previous_token = input_token.prev();
223		- if(!$(this).val().length && settings.backspaceDeleteItem) {
	229	+ next_token = input_token.next();
	230	+
	231	+ if(!$(this).val().length) {
224	232	if(selected_token) {
225	233	delete_token($(selected_token));
226		- } else if(previous_token.length) {
	234	+ } else if(KEY.DELETE && next_token.length) {
	235	+ select_token($(next_token.get(0)));
	236	+ } else if(KEY.BACKSPACE && previous_token.length) {
227	237	select_token($(previous_token.get(0)));
228	238	}
229	239
230	240	return false;
231		- } else if($(this).val().length === 1) {
	241	+ } else if(!settings.permanentDropdown && $(this).val().length === 1) {
232	242	hide_dropdown();
233	243	} else {
234	244	// set a timeout just long enough to let this function finish.
...	...	@@ -315,8 +325,14 @@ $.TokenList = function (input, url_or_data, settings) {
315	325	// The list to store the dropdown items in
316	326	var dropdown = $("<div>")
317	327	.addClass(settings.classes.dropdown)
318		- .appendTo("body")
319	328	.hide();
	329	+ dropdown.appendTo("body");
	330	+ if (!settings.permanentDropdown)
	331	+ dropdown.appendTo("body");
	332	+ else {
	333	+ $(input).after(dropdown.show());
	334	+ do_search();
	335	+ }
320	336
321	337	// Magic element to help us resize the text input
322	338	var input_resizer = $("<tester/>")
...	...	@@ -447,6 +463,9 @@ $.TokenList = function (input, url_or_data, settings) {
447	463
448	464	// Add a token to the token list based on user input
449	465	function add_token (item) {
	466	+ if (settings.dontAdd)
	467	+ return;
	468	+
450	469	var callback = settings.onAdd;
451	470
452	471	// See if the token already exists and select it if we don't want duplicates
...	...	@@ -575,19 +594,28 @@ $.TokenList = function (input, url_or_data, settings) {
575	594
576	595	// Hide and clear the results dropdown
577	596	function hide_dropdown () {
578		- dropdown.hide().empty();
579		- selected_dropdown_item = null;
	597	+ if (!settings.permanentDropdown) {
	598	+ dropdown.hide().empty();
	599	+ selected_dropdown_item = null;
	600	+ }
580	601	}
581	602
582	603	function show_dropdown() {
583		- dropdown
584		- .css({
585		- position: "absolute",
586		- top: $(token_list).offset().top + $(token_list).outerHeight(),
587		- left: $(token_list).offset().left,
588		- zindex: 999
589		- })
590		- .show();
	604	+ if (!settings.permanentDropdown)
	605	+ dropdown
	606	+ .css({
	607	+ position: "absolute",
	608	+ top: $(token_list).offset().top + $(token_list).outerHeight(),
	609	+ left: $(token_list).offset().left,
	610	+ zindex: 999
	611	+ })
	612	+ .show();
	613	+ else
	614	+ dropdown
	615	+ .css({
	616	+ position: "relative",
	617	+ })
	618	+ .show();
591	619	}
592	620
593	621	function show_dropdown_searching () {
...	...	@@ -598,7 +626,7 @@ $.TokenList = function (input, url_or_data, settings) {
598	626	}
599	627
600	628	function show_dropdown_hint () {
601		- if(settings.hintText) {
	629	+ if(!settings.permanentDropdown && settings.hintText) {
602	630	dropdown.html("<p>"+settings.hintText+"</p>");
603	631	show_dropdown();
604	632	}
...	...	@@ -694,7 +722,8 @@ $.TokenList = function (input, url_or_data, settings) {
694	722	} else {
695	723	hide_dropdown();
696	724	}
697		- }
	725	+ } else if (settings.permanentDropdown)
	726	+ run_search('');
698	727	}
699	728
700	729	// Do the actual search
...	...
...	...	@@ -0,0 +1,114 @@
	1	+/* Example tokeninput style #1: Token vertical list*/
	2	+ul.token-input-list-facet {
	3	+ overflow: hidden;
	4	+ height: auto !important;
	5	+ height: 1%;
	6	+ width: 130px;
	7	+ border: 1px solid #999;
	8	+ cursor: text;
	9	+ font-size: 12px;
	10	+ font-family: Verdana;
	11	+ z-index: 999;
	12	+ margin: 0;
	13	+ padding: 0;
	14	+ background-color: #fff;
	15	+ list-style-type: none;
	16	+ clear: left;
	17	+}
	18	+
	19	+ul.token-input-list-facet li {
	20	+ list-style-type: none;
	21	+}
	22	+
	23	+ul.token-input-list-facet li input {
	24	+ border: 0;
	25	+ width: 350px;
	26	+ padding: 3px 8px;
	27	+ background-color: white;
	28	+ -webkit-appearance: caret;
	29	+}
	30	+
	31	+li.token-input-token-facet {
	32	+ overflow: hidden;
	33	+ height: auto !important;
	34	+ height: 1%;
	35	+ margin: 3px;
	36	+ padding: 3px 5px;
	37	+ background-color: #d0efa0;
	38	+ color: #000;
	39	+ font-weight: bold;
	40	+ cursor: default;
	41	+ display: block;
	42	+}
	43	+
	44	+li.token-input-token-facet p {
	45	+ float: left;
	46	+ padding: 0;
	47	+ margin: 0;
	48	+}
	49	+
	50	+li.token-input-token-facet span {
	51	+ float: right;
	52	+ color: #777;
	53	+ cursor: pointer;
	54	+}
	55	+
	56	+li.token-input-selected-token-facet {
	57	+ background-color: #08844e;
	58	+ color: #fff;
	59	+}
	60	+
	61	+li.token-input-selected-token-facet span {
	62	+ color: #bbb;
	63	+}
	64	+
	65	+div.token-input-dropdown-facet {
	66	+ position: relative;
	67	+ width: 130px;
	68	+ height: 150px;
	69	+ background-color: #E5F4FB;
	70	+ overflow: auto;
	71	+ border-left: 1px solid #ccc;
	72	+ border-right: 1px solid #ccc;
	73	+ border-bottom: 1px solid #ccc;
	74	+ cursor: default;
	75	+ font-size: 12px;
	76	+ font-family: Verdana;
	77	+ z-index: 1;
	78	+}
	79	+
	80	+div.token-input-dropdown-facet p {
	81	+ margin: 0;
	82	+ padding: 5px;
	83	+ font-weight: bold;
	84	+ color: #777;
	85	+}
	86	+
	87	+div.token-input-dropdown-facet ul {
	88	+ margin: 0;
	89	+ padding: 0;
	90	+}
	91	+
	92	+div.token-input-dropdown-facet ul li {
	93	+ background-color: #E5F4FB;
	94	+ padding: 3px;
	95	+ list-style-type: none;
	96	+}
	97	+
	98	+div.token-input-dropdown-facet ul li.token-input-dropdown-item-facet {
	99	+ background-color: #E5F4FB;
	100	+}
	101	+
	102	+div.token-input-dropdown-facet ul li.token-input-dropdown-item2-facet {
	103	+ background-color: #E5F4FB;
	104	+}
	105	+
	106	+div.token-input-dropdown-facet ul li em {
	107	+ font-weight: bold;
	108	+ font-style: normal;
	109	+}
	110	+
	111	+div.token-input-dropdown-facet ul li.token-input-selected-dropdown-item-facet {
	112	+ background-color: #d0efa0;
	113	+}
	114	+
...	...
...	...	@@ -3,7 +3,7 @@ ul.token-input-list {
3	3	overflow: hidden;
4	4	height: auto !important;
5	5	height: 1%;
6		- width: 497px;
	6	+ width: 400px;
7	7	border: 1px solid #999;
8	8	cursor: text;
9	9	font-size: 12px;
...	...	@@ -64,7 +64,7 @@ li.token-input-selected-token span {
64	64
65	65	div.token-input-dropdown {
66	66	position: absolute;
67		- width: 497px;
	67	+ width: 400px;
68	68	background-color: #fff;
69	69	overflow: hidden;
70	70	border-left: 1px solid #ccc;
...	...