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 | 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, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); |
| 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
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