Download as
Browse Code »

Commit 74a91f4bdee91bc793343255e6fabe322f28259d

Authored by Braulio Bhavamitra
1 parent 16c07fb9
Exists in master and in 23 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, merge_deactive_and_ban, news_page, script_to_update, stable, template_mirror_block, tests, tests_fixies

Fix version of token input 

From https://github.com/brauliobo/jquery-tokeninput
Showing 1 changed file with 53 additions and 38 deletions   Show diff stats
public/javascripts/jquery.tokeninput.js
  Diff comments   View file @74a91f4
1 1 /*
2 2 * jQuery Plugin: Tokenizing Autocomplete Text Entry
3 3 * Version 1.5.0
  4 + * Requires jQuery 1.6+
4 5 *
5 6 * Copyright (c) 2009 James Smith (http://loopj.com)
6 7 * Licensed jointly under the GPL and MIT licenses,
... ... @@ -18,6 +19,7 @@ var DEFAULT_SETTINGS = {
18 19 searchDelay: 300,
19 20 minChars: 1,
20 21 permanentDropdown: false,
  22 + showAllResults: false,
21 23 tokenLimit: null,
22 24 jsonContainer: null,
23 25 method: "GET",
... ... @@ -170,17 +172,20 @@ $.TokenList = function (input, url_or_data, options) {
170 172 .attr("id", settings.idPrefix + input.id)
171 173 .focus(function () {
172 174 if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
173   - if(settings.permanentDropdown)
  175 + if(settings.permanentDropdown || settings.showAllResults) {
174 176 hide_dropdown_hint();
175   - else
  177 + } else
176 178 show_dropdown_hint();
  179 + if (settings.showAllResults)
  180 + do_search();
177 181 }
178 182 })
179 183 .blur(function () {
180 184 if(settings.permanentDropdown)
181 185 show_dropdown_hint();
182   - else
  186 + else {
183 187 hide_dropdown();
  188 + }
184 189 })
185 190 .bind("keyup keydown blur update", resize_input)
186 191 .keydown(function (event) {
... ... @@ -235,9 +240,10 @@ $.TokenList = function (input, url_or_data, options) {
235 240 previous_token = input_token.prev();
236 241 next_token = input_token.next();
237 242  
238   - if(!$(this).val().length) {
  243 + if(!$(this).val().length && settings.backspaceDeleteItem) {
239 244 if(selected_token) {
240 245 delete_token($(selected_token));
  246 + input_box.focus();
241 247 } else if(KEY.DELETE && next_token.length) {
242 248 select_token($(next_token.get(0)));
243 249 } else if(KEY.BACKSPACE && previous_token.length) {
... ... @@ -259,6 +265,7 @@ $.TokenList = function (input, url_or_data, options) {
259 265 case KEY.COMMA:
260 266 if(selected_dropdown_item) {
261 267 add_token($(selected_dropdown_item).data("tokeninput"));
  268 + input_box.focus();
262 269 return false;
263 270 }
264 271 break;
... ... @@ -305,8 +312,9 @@ $.TokenList = function (input, url_or_data, options) {
305 312 deselect_token($(selected_token), POSITION.END);
306 313 }
307 314  
308   - // Focus input box
309   - input_box.focus();
  315 + // Transfer focus
  316 + if (!input_box.is(':focus'))
  317 + input_box.focus();
310 318 }
311 319 })
312 320 .mouseover(function (event) {
... ... @@ -336,13 +344,17 @@ $.TokenList = function (input, url_or_data, options) {
336 344 dropdown.appendTo("body");
337 345 if (!settings.permanentDropdown)
338 346 dropdown.appendTo("body");
339   - else {
  347 + else
340 348 $(input).after(dropdown.show());
341   - do_search();
  349 +
  350 + if (settings.permanentDropdown || settings.showAllResults) {
  351 + do_search();
  352 + if (!settings.permanentDropdown && settings.showAllResults)
  353 + hide_dropdown();
342 354 }
343 355  
344 356 // Hint for permanentDropdown
345   - if(settings.permanentDropdown)
  357 + if (settings.permanentDropdown || settings.showAllResults)
346 358 show_dropdown_hint();
347 359  
348 360 // Magic element to help us resize the text input
... ... @@ -430,7 +442,7 @@ $.TokenList = function (input, url_or_data, options) {
430 442 input_resizer.html(escaped);
431 443 input_box.width(input_resizer.width() + 30);
432 444  
433   - if(settings.permanentDropdown && input_box.hasClass(settings.classes.blurText))
  445 + if((settings.permanentDropdown || settings.showAllResults) && input_box.hasClass(settings.classes.blurText))
434 446 input_val = '';
435 447 }
436 448  
... ... @@ -497,7 +509,6 @@ $.TokenList = function (input, url_or_data, options) {
497 509 if(found_existing_token) {
498 510 select_token(found_existing_token);
499 511 input_token.insertAfter(found_existing_token);
500   - input_box.focus();
501 512 return;
502 513 }
503 514 }
... ... @@ -578,9 +589,6 @@ $.TokenList = function (input, url_or_data, options) {
578 589 token.remove();
579 590 selected_token = null;
580 591  
581   - // Show the input box and give it focus again
582   - input_box.focus();
583   -
584 592 // Remove this token from the saved list
585 593 saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1));
586 594 if(index < selected_token_index) selected_token_index--;
... ... @@ -593,12 +601,8 @@ $.TokenList = function (input, url_or_data, options) {
593 601  
594 602 token_count -= 1;
595 603  
596   - if(settings.tokenLimit !== null) {
597   - input_box
598   - .show()
599   - .val("")
600   - .focus();
601   - }
  604 + if(settings.tokenLimit !== null)
  605 + input_box.show().val("");
602 606  
603 607 // Execute the onDelete callback if defined
604 608 if($.isFunction(callback)) {
... ... @@ -609,27 +613,27 @@ $.TokenList = function (input, url_or_data, options) {
609 613 // Hide and clear the results dropdown
610 614 function hide_dropdown () {
611 615 if (!settings.permanentDropdown) {
612   - dropdown.hide().empty();
  616 + dropdown.hide();
  617 + if (!settings.showAllResults)
  618 + dropdown.empty();
613 619 selected_dropdown_item = null;
614 620 }
  621 + if (settings.showAllResults)
  622 + show_dropdown_hint();
615 623 }
616 624  
617 625 function show_dropdown() {
618 626 if (!settings.permanentDropdown)
619   - dropdown
620   - .css({
621   - position: "absolute",
622   - top: $(token_list).offset().top + $(token_list).outerHeight(),
623   - left: $(token_list).offset().left,
624   - zindex: 999
625   - })
626   - .show();
  627 + dropdown.css({
  628 + position: "absolute",
  629 + top: $(token_list).offset().top + $(token_list).outerHeight(),
  630 + left: $(token_list).offset().left,
  631 + zindex: 999
  632 + }).show();
627 633 else
628   - dropdown
629   - .css({
630   - position: "relative",
631   - })
632   - .show();
  634 + dropdown.css({
  635 + position: "relative",
  636 + }).show();
633 637 }
634 638  
635 639 function show_dropdown_searching () {
... ... @@ -641,10 +645,10 @@ $.TokenList = function (input, url_or_data, options) {
641 645  
642 646 function show_dropdown_hint () {
643 647 if(settings.hintText) {
644   - if(settings.permanentDropdown) {
  648 + if(settings.permanentDropdown || settings.showAllResults) {
645 649 if (input_val == '') {
646 650 input_box.val(settings.hintText);
647   - input_box.toggleClass(settings.classes.blurText);
  651 + input_box.addClass(settings.classes.blurText);
648 652 }
649 653 } else {
650 654 dropdown.html("<p>"+settings.hintText+"</p>");
... ... @@ -656,7 +660,7 @@ $.TokenList = function (input, url_or_data, options) {
656 660 function hide_dropdown_hint () {
657 661 if (input_box.hasClass(settings.classes.blurText)) {
658 662 input_box.val('');
659   - input_box.toggleClass(settings.classes.blurText);
  663 + input_box.removeClass(settings.classes.blurText);
660 664 }
661 665 }
662 666  
... ... @@ -676,6 +680,7 @@ $.TokenList = function (input, url_or_data, options) {
676 680 })
677 681 .mousedown(function (event) {
678 682 add_token($(event.target).closest("li").data("tokeninput"));
  683 + input_box.blur();
679 684 return false;
680 685 })
681 686 .hide();
... ... @@ -721,6 +726,16 @@ $.TokenList = function (input, url_or_data, options) {
721 726  
722 727 item.addClass(settings.classes.selectedDropdownItem);
723 728 selected_dropdown_item = item.get(0);
  729 +
  730 + isBefore = item[0].offsetTop <= (dropdown[0].scrollTop + dropdown[0].scrollWidth);
  731 + isAfter = item[0].offsetTop >= dropdown[0].scrollTop;
  732 + visible = isBefore && isAfter;
  733 + if (!visible) {
  734 + if (isBefore)
  735 + dropdown[0].scrollTop = item[0].offsetTop;
  736 + else //isAfter
  737 + dropdown[0].scrollTop = item[0].offsetTop - dropdown[0].scrollWidth;
  738 + }
724 739 }
725 740 }
726 741  
... ... @@ -750,7 +765,7 @@ $.TokenList = function (input, url_or_data, options) {
750 765 } else {
751 766 hide_dropdown();
752 767 }
753   - } else if (settings.permanentDropdown)
  768 + } else if (settings.permanentDropdown || settings.showAllResults)
754 769 run_search('');
755 770 }
756 771  
... ...