Commit 25a486d1b2e5e13bce65e78c732af6936493e4ec

Authored by Braulio Bhavamitra
1 parent 558cde51

Fix hintText with permanentDropdown option

public/javascripts/jquery.tokeninput.js
... ... @@ -47,7 +47,8 @@ var DEFAULT_CLASSES = {
47 47 dropdownItem: "token-input-dropdown-item",
48 48 dropdownItem2: "token-input-dropdown-item2",
49 49 selectedDropdownItem: "token-input-selected-dropdown-item",
50   - inputToken: "token-input-input-token"
  50 + inputToken: "token-input-input-token",
  51 + blurText: "token-input-blur-text",
51 52 };
52 53  
53 54 // Input box position "enum"
... ... @@ -159,7 +160,7 @@ $.TokenList = function (input, url_or_data, settings) {
159 160  
160 161 // Keep track of the timeout, old vals
161 162 var timeout;
162   - var input_val;
  163 + var input_val = '';
163 164  
164 165 // Create a new text input an attach keyup events
165 166 var input_box = $("<input type=\"text\" autocomplete=\"off\">")
... ... @@ -169,11 +170,17 @@ $.TokenList = function (input, url_or_data, settings) {
169 170 .attr("id", settings.idPrefix + input.id)
170 171 .focus(function () {
171 172 if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
  173 + if(settings.permanentDropdown)
  174 + hide_dropdown_hint();
  175 + else
172 176 show_dropdown_hint();
173 177 }
174 178 })
175 179 .blur(function () {
176   - hide_dropdown();
  180 + if(settings.permanentDropdown)
  181 + show_dropdown_hint();
  182 + else
  183 + hide_dropdown();
177 184 })
178 185 .bind("keyup keydown blur update", resize_input)
179 186 .keydown(function (event) {
... ... @@ -334,6 +341,10 @@ $.TokenList = function (input, url_or_data, settings) {
334 341 do_search();
335 342 }
336 343  
  344 + // Hint for permanentDropdown
  345 + if(settings.permanentDropdown)
  346 + show_dropdown_hint();
  347 +
337 348 // Magic element to help us resize the text input
338 349 var input_resizer = $("<tester/>")
339 350 .insertAfter(input_box)
... ... @@ -418,6 +429,9 @@ $.TokenList = function (input, url_or_data, settings) {
418 429 var escaped = input_val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
419 430 input_resizer.html(escaped);
420 431 input_box.width(input_resizer.width() + 30);
  432 +
  433 + if(settings.permanentDropdown && input_box.hasClass(settings.classes.blurText))
  434 + input_val = '';
421 435 }
422 436  
423 437 function is_printable_character(keycode) {
... ... @@ -626,12 +640,26 @@ $.TokenList = function (input, url_or_data, settings) {
626 640 }
627 641  
628 642 function show_dropdown_hint () {
629   - if(!settings.permanentDropdown && settings.hintText) {
  643 + if(settings.hintText) {
  644 + if(settings.permanentDropdown) {
  645 + if (input_val == '') {
  646 + input_box.val(settings.hintText);
  647 + input_box.toggleClass(settings.classes.blurText);
  648 + }
  649 + } else {
630 650 dropdown.html("<p>"+settings.hintText+"</p>");
631 651 show_dropdown();
  652 + }
632 653 }
633 654 }
634 655  
  656 + function hide_dropdown_hint () {
  657 + if (input_box.hasClass(settings.classes.blurText)) {
  658 + input_box.val('');
  659 + input_box.toggleClass(settings.classes.blurText);
  660 + }
  661 + }
  662 +
635 663 // Highlight the query part of the search term
636 664 function highlight_term(value, term) {
637 665 return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
... ...
public/stylesheets/token-input-facebook.css
... ... @@ -119,4 +119,8 @@ div.token-input-dropdown-facebook ul li em {
119 119 div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
120 120 background-color: #3b5998;
121 121 color: #fff;
122   -}
123 122 \ No newline at end of file
  123 +}
  124 +.token-input-blur-text-facebook {
  125 + font-style: italic;
  126 + color: #AAA;
  127 +}
... ...
public/stylesheets/token-input-facet.css
... ... @@ -113,3 +113,7 @@ div.token-input-dropdown-facet ul li.token-input-selected-dropdown-item-facet {
113 113 background-color: #d0efa0;
114 114 }
115 115  
  116 +.token-input-blur-text-facet {
  117 + font-style: italic;
  118 + color: #AAA;
  119 +}
... ...
public/stylesheets/token-input-mac.css
... ... @@ -202,3 +202,7 @@ div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.t
202 202 div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
203 203 color: #fff;
204 204 }
  205 +.token-input-blur-text-mac {
  206 + font-style: italic;
  207 + color: #AAA;
  208 +}
... ...
public/stylesheets/token-input.css
... ... @@ -110,4 +110,7 @@ div.token-input-dropdown ul li em {
110 110 div.token-input-dropdown ul li.token-input-selected-dropdown-item {
111 111 background-color: #d0efa0;
112 112 }
113   -
  113 +.token-input-blur-text {
  114 + font-style: italic;
  115 + color: #AAA;
  116 +}
... ...