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;
@@ -0,0 +1,114 @@		@@ -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,7 +3,7 @@ ul.token-input-list {
3	overflow: hidden;	3	overflow: hidden;
4	height: auto !important;	4	height: auto !important;
5	height: 1%;	5	height: 1%;
6	- width: 497px;	6	+ width: 400px;
7	border: 1px solid #999;	7	border: 1px solid #999;
8	cursor: text;	8	cursor: text;
9	font-size: 12px;	9	font-size: 12px;
	@@ -64,7 +64,7 @@ li.token-input-selected-token span {		@@ -64,7 +64,7 @@ li.token-input-selected-token span {
64		64
65	div.token-input-dropdown {	65	div.token-input-dropdown {
66	position: absolute;	66	position: absolute;
67	- width: 497px;	67	+ width: 400px;
68	background-color: #fff;	68	background-color: #fff;
69	overflow: hidden;	69	overflow: hidden;
70	border-left: 1px solid #ccc;	70	border-left: 1px solid #ccc;