Commit 25a486d1b2e5e13bce65e78c732af6936493e4ec
1 parent
558cde51
Exists in
staging
and in
42 other branches
Fix hintText with permanentDropdown option
Showing
5 changed files
with
49 additions
and
6 deletions
Show diff stats
public/javascripts/jquery.tokeninput.js
| @@ -47,7 +47,8 @@ var DEFAULT_CLASSES = { | @@ -47,7 +47,8 @@ var DEFAULT_CLASSES = { | ||
| 47 | dropdownItem: "token-input-dropdown-item", | 47 | dropdownItem: "token-input-dropdown-item", |
| 48 | dropdownItem2: "token-input-dropdown-item2", | 48 | dropdownItem2: "token-input-dropdown-item2", |
| 49 | selectedDropdownItem: "token-input-selected-dropdown-item", | 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 | // Input box position "enum" | 54 | // Input box position "enum" |
| @@ -159,7 +160,7 @@ $.TokenList = function (input, url_or_data, settings) { | @@ -159,7 +160,7 @@ $.TokenList = function (input, url_or_data, settings) { | ||
| 159 | 160 | ||
| 160 | // Keep track of the timeout, old vals | 161 | // Keep track of the timeout, old vals |
| 161 | var timeout; | 162 | var timeout; |
| 162 | - var input_val; | 163 | + var input_val = ''; |
| 163 | 164 | ||
| 164 | // Create a new text input an attach keyup events | 165 | // Create a new text input an attach keyup events |
| 165 | var input_box = $("<input type=\"text\" autocomplete=\"off\">") | 166 | var input_box = $("<input type=\"text\" autocomplete=\"off\">") |
| @@ -169,11 +170,17 @@ $.TokenList = function (input, url_or_data, settings) { | @@ -169,11 +170,17 @@ $.TokenList = function (input, url_or_data, settings) { | ||
| 169 | .attr("id", settings.idPrefix + input.id) | 170 | .attr("id", settings.idPrefix + input.id) |
| 170 | .focus(function () { | 171 | .focus(function () { |
| 171 | if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { | 172 | if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { |
| 173 | + if(settings.permanentDropdown) | ||
| 174 | + hide_dropdown_hint(); | ||
| 175 | + else | ||
| 172 | show_dropdown_hint(); | 176 | show_dropdown_hint(); |
| 173 | } | 177 | } |
| 174 | }) | 178 | }) |
| 175 | .blur(function () { | 179 | .blur(function () { |
| 176 | - hide_dropdown(); | 180 | + if(settings.permanentDropdown) |
| 181 | + show_dropdown_hint(); | ||
| 182 | + else | ||
| 183 | + hide_dropdown(); | ||
| 177 | }) | 184 | }) |
| 178 | .bind("keyup keydown blur update", resize_input) | 185 | .bind("keyup keydown blur update", resize_input) |
| 179 | .keydown(function (event) { | 186 | .keydown(function (event) { |
| @@ -334,6 +341,10 @@ $.TokenList = function (input, url_or_data, settings) { | @@ -334,6 +341,10 @@ $.TokenList = function (input, url_or_data, settings) { | ||
| 334 | do_search(); | 341 | do_search(); |
| 335 | } | 342 | } |
| 336 | 343 | ||
| 344 | + // Hint for permanentDropdown | ||
| 345 | + if(settings.permanentDropdown) | ||
| 346 | + show_dropdown_hint(); | ||
| 347 | + | ||
| 337 | // Magic element to help us resize the text input | 348 | // Magic element to help us resize the text input |
| 338 | var input_resizer = $("<tester/>") | 349 | var input_resizer = $("<tester/>") |
| 339 | .insertAfter(input_box) | 350 | .insertAfter(input_box) |
| @@ -418,6 +429,9 @@ $.TokenList = function (input, url_or_data, settings) { | @@ -418,6 +429,9 @@ $.TokenList = function (input, url_or_data, settings) { | ||
| 418 | var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); | 429 | var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); |
| 419 | input_resizer.html(escaped); | 430 | input_resizer.html(escaped); |
| 420 | input_box.width(input_resizer.width() + 30); | 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 | function is_printable_character(keycode) { | 437 | function is_printable_character(keycode) { |
| @@ -626,12 +640,26 @@ $.TokenList = function (input, url_or_data, settings) { | @@ -626,12 +640,26 @@ $.TokenList = function (input, url_or_data, settings) { | ||
| 626 | } | 640 | } |
| 627 | 641 | ||
| 628 | function show_dropdown_hint () { | 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 | dropdown.html("<p>"+settings.hintText+"</p>"); | 650 | dropdown.html("<p>"+settings.hintText+"</p>"); |
| 631 | show_dropdown(); | 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 | // Highlight the query part of the search term | 663 | // Highlight the query part of the search term |
| 636 | function highlight_term(value, term) { | 664 | function highlight_term(value, term) { |
| 637 | return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>"); | 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,4 +119,8 @@ div.token-input-dropdown-facebook ul li em { | ||
| 119 | div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { | 119 | div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { |
| 120 | background-color: #3b5998; | 120 | background-color: #3b5998; |
| 121 | color: #fff; | 121 | color: #fff; |
| 122 | -} | ||
| 123 | \ No newline at end of file | 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,3 +113,7 @@ div.token-input-dropdown-facet ul li.token-input-selected-dropdown-item-facet { | ||
| 113 | background-color: #d0efa0; | 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,3 +202,7 @@ div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.t | ||
| 202 | div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac { | 202 | div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac { |
| 203 | color: #fff; | 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,4 +110,7 @@ div.token-input-dropdown ul li em { | ||
| 110 | div.token-input-dropdown ul li.token-input-selected-dropdown-item { | 110 | div.token-input-dropdown ul li.token-input-selected-dropdown-item { |
| 111 | background-color: #d0efa0; | 111 | background-color: #d0efa0; |
| 112 | } | 112 | } |
| 113 | - | 113 | +.token-input-blur-text { |
| 114 | + font-style: italic; | ||
| 115 | + color: #AAA; | ||
| 116 | +} |