Commit 25a486d1b2e5e13bce65e78c732af6936493e4ec
1 parent
558cde51
Exists in
master
and in
29 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