Download as
Browse Code »

Commit f0b5cd9dd6dd8e69772c0ae0ecbc587785b0c0b2

Authored by Braulio Bhavamitra
1 parent 22493257
Exists in master and in 28 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, stable, temp_ratings, tests, tests_fixies

Add token input extension for facet selection 

Using modified version o jquery token input available at
https://github.com/brauliobo/jquery-tokeninput
Showing 4 changed files with 167 additions and 23 deletions   Show diff stats
app/views/layouts/application-ng.rhtml
  Diff comments   View file @f0b5cd9
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 <%= stylesheet_link_tag icon_theme_stylesheet_path %> 13 <%= stylesheet_link_tag icon_theme_stylesheet_path %>
14 <%= stylesheet_link_tag theme_stylesheet_path %> 14 <%= stylesheet_link_tag theme_stylesheet_path %>
15 <%= stylesheet_link_tag jquery_ui_theme_stylesheet_path %> 15 <%= stylesheet_link_tag jquery_ui_theme_stylesheet_path %>
  16 + <%= stylesheet_link_tag "token-input-facet" %>
16 <% @plugins.enabled_plugins.each do |plugin| %> 17 <% @plugins.enabled_plugins.each do |plugin| %>
17 <% if plugin.stylesheet? %> 18 <% if plugin.stylesheet? %>
18 <%= stylesheet_tag plugin.class.public_path('style.css'), {} %> 19 <%= stylesheet_tag plugin.class.public_path('style.css'), {} %>
public/javascripts/jquery.tokeninput.js
  Diff comments   View file @f0b5cd9
@@ -17,6 +17,7 @@ var DEFAULT_SETTINGS = { @@ -17,6 +17,7 @@ var DEFAULT_SETTINGS = {
17 deleteText: "&times;", 17 deleteText: "&times;",
18 searchDelay: 300, 18 searchDelay: 300,
19 minChars: 1, 19 minChars: 1,
  20 + permanentDropdown: false,
20 tokenLimit: null, 21 tokenLimit: null,
21 jsonContainer: null, 22 jsonContainer: null,
22 method: "GET", 23 method: "GET",
@@ -27,6 +28,7 @@ var DEFAULT_SETTINGS = { @@ -27,6 +28,7 @@ var DEFAULT_SETTINGS = {
27 prePopulate: null, 28 prePopulate: null,
28 processPrePopulate: false, 29 processPrePopulate: false,
29 animateDropdown: true, 30 animateDropdown: true,
  31 + dontAdd: false,
30 onResult: null, 32 onResult: null,
31 onAdd: null, 33 onAdd: null,
32 onDelete: null, 34 onDelete: null,
@@ -58,6 +60,7 @@ var POSITION = { @@ -58,6 +60,7 @@ var POSITION = {
58 // Keys "enum" 60 // Keys "enum"
59 var KEY = { 61 var KEY = {
60 BACKSPACE: 8, 62 BACKSPACE: 8,
  63 + DELETE: 46,
61 TAB: 9, 64 TAB: 9,
62 ENTER: 13, 65 ENTER: 13,
63 ESCAPE: 27, 66 ESCAPE: 27,
@@ -77,10 +80,8 @@ var KEY = { @@ -77,10 +80,8 @@ var KEY = {
77 // Additional public (exposed) methods 80 // Additional public (exposed) methods
78 var methods = { 81 var methods = {
79 init: function(url_or_data_or_function, options) { 82 init: function(url_or_data_or_function, options) {
80 - var settings = $.extend({}, DEFAULT_SETTINGS, options || {});  
81 -  
82 return this.each(function () { 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 clear: function() { 87 clear: function() {
@@ -112,6 +113,7 @@ $.TokenList = function (input, url_or_data, settings) { @@ -112,6 +113,7 @@ $.TokenList = function (input, url_or_data, settings) {
112 // 113 //
113 // Initialization 114 // Initialization
114 // 115 //
  116 + var settings = $.extend({}, DEFAULT_SETTINGS, options || {});
115 117
116 // Configure the data source 118 // Configure the data source
117 if(typeof(url_or_data) === "string") { 119 if(typeof(url_or_data) === "string") {
@@ -172,7 +174,6 @@ $.TokenList = function (input, url_or_data, settings) { @@ -172,7 +174,6 @@ $.TokenList = function (input, url_or_data, settings) {
172 }) 174 })
173 .blur(function () { 175 .blur(function () {
174 hide_dropdown(); 176 hide_dropdown();
175 - $(this).val("");  
176 }) 177 })
177 .bind("keyup keydown blur update", resize_input) 178 .bind("keyup keydown blur update", resize_input)
178 .keydown(function (event) { 179 .keydown(function (event) {
@@ -205,7 +206,11 @@ $.TokenList = function (input, url_or_data, settings) { @@ -205,7 +206,11 @@ $.TokenList = function (input, url_or_data, settings) {
205 } else { 206 } else {
206 var dropdown_item = null; 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 dropdown_item = $(selected_dropdown_item).next(); 214 dropdown_item = $(selected_dropdown_item).next();
210 } else { 215 } else {
211 dropdown_item = $(selected_dropdown_item).prev(); 216 dropdown_item = $(selected_dropdown_item).prev();
@@ -219,16 +224,21 @@ $.TokenList = function (input, url_or_data, settings) { @@ -219,16 +224,21 @@ $.TokenList = function (input, url_or_data, settings) {
219 break; 224 break;
220 225
221 case KEY.BACKSPACE: 226 case KEY.BACKSPACE:
  227 + case KEY.DELETE:
222 previous_token = input_token.prev(); 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 if(selected_token) { 232 if(selected_token) {
225 delete_token($(selected_token)); 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 select_token($(previous_token.get(0))); 237 select_token($(previous_token.get(0)));
228 } 238 }
229 239
230 return false; 240 return false;
231 - } else if($(this).val().length === 1) { 241 + } else if(!settings.permanentDropdown && $(this).val().length === 1) {
232 hide_dropdown(); 242 hide_dropdown();
233 } else { 243 } else {
234 // set a timeout just long enough to let this function finish. 244 // set a timeout just long enough to let this function finish.
@@ -315,8 +325,14 @@ $.TokenList = function (input, url_or_data, settings) { @@ -315,8 +325,14 @@ $.TokenList = function (input, url_or_data, settings) {
315 // The list to store the dropdown items in 325 // The list to store the dropdown items in
316 var dropdown = $("<div>") 326 var dropdown = $("<div>")
317 .addClass(settings.classes.dropdown) 327 .addClass(settings.classes.dropdown)
318 - .appendTo("body")  
319 .hide(); 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 // Magic element to help us resize the text input 337 // Magic element to help us resize the text input
322 var input_resizer = $("<tester/>") 338 var input_resizer = $("<tester/>")
@@ -447,6 +463,9 @@ $.TokenList = function (input, url_or_data, settings) { @@ -447,6 +463,9 @@ $.TokenList = function (input, url_or_data, settings) {
447 463
448 // Add a token to the token list based on user input 464 // Add a token to the token list based on user input
449 function add_token (item) { 465 function add_token (item) {
  466 + if (settings.dontAdd)
  467 + return;
  468 +
450 var callback = settings.onAdd; 469 var callback = settings.onAdd;
451 470
452 // See if the token already exists and select it if we don't want duplicates 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,19 +594,28 @@ $.TokenList = function (input, url_or_data, settings) {
575 594
576 // Hide and clear the results dropdown 595 // Hide and clear the results dropdown
577 function hide_dropdown () { 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 function show_dropdown() { 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 function show_dropdown_searching () { 621 function show_dropdown_searching () {
@@ -598,7 +626,7 @@ $.TokenList = function (input, url_or_data, settings) { @@ -598,7 +626,7 @@ $.TokenList = function (input, url_or_data, settings) {
598 } 626 }
599 627
600 function show_dropdown_hint () { 628 function show_dropdown_hint () {
601 - if(settings.hintText) { 629 + if(!settings.permanentDropdown && settings.hintText) {
602 dropdown.html("<p>"+settings.hintText+"</p>"); 630 dropdown.html("<p>"+settings.hintText+"</p>");
603 show_dropdown(); 631 show_dropdown();
604 } 632 }
@@ -694,7 +722,8 @@ $.TokenList = function (input, url_or_data, settings) { @@ -694,7 +722,8 @@ $.TokenList = function (input, url_or_data, settings) {
694 } else { 722 } else {
695 hide_dropdown(); 723 hide_dropdown();
696 } 724 }
697 - } 725 + } else if (settings.permanentDropdown)
  726 + run_search('');
698 } 727 }
699 728
700 // Do the actual search 729 // Do the actual search
public/stylesheets/token-input-facet.css 0 → 100644
  Diff comments   View file @f0b5cd9
@@ -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 +
public/stylesheets/token-input.css
  Diff comments   View file @f0b5cd9
@@ -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;