plugins/Autocomplete/js/autocomplete.go.js

   1 /** Init for Autocomplete (requires jquery-ui)
   2  *
   3  * @package   Plugin
   4  * @author Mikael Nordfeldth <mmn@hethane.se>
   5  * @copyright 2013 Free Software Foundation, Inc.
   6  * @license   http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
   7  * @link      http://status.net/
   8  */
   9
  10 var origInit = SN.Init.NoticeFormSetup;
  11 SN.Init.NoticeFormSetup = function(form) {
  12     origInit(form);
  13
  14     // Only attach to traditional-style forms
  15     var textarea = form.find('.notice_data-text:first');
  16     if (textarea.length === 0) {
  17         return;
  18     }
  19
  20     function termSplit(val) {
  21         return val.split(/ \s*/);
  22     }
  23     function extractLast( term ) {
  24         return termSplit(term).pop();
  25     }
  26     var apiUrl = $('#autocomplete-api').attr('data-url');
  27     // migrated "multiple" and "multipleSeparator" from
  28     // http://www.learningjquery.com/2010/06/autocomplete-migration-guide
  29     textarea
  30         .bind('keydown', function( event ) {
  31             if ( event.keyCode === $.ui.keyCode.TAB &&
  32                 $( this ).data( "ui-autocomplete" ).menu.active ) {
  33                 event.preventDefault();
  34             }
  35         })
  36         .autocomplete({
  37             minLength: 1,   // 1 is default
  38             source: function (request, response) {
  39                 $.getJSON( apiUrl, {
  40                     term: extractLast(request.term)
  41                 }, response );
  42             },
  43             search: function () {
  44                 // custom minLength, we though we match the 1 below
  45                 var term = extractLast(this.value);
  46                 if (term.length <= 1) {
  47                     return false;
  48                 }
  49             },
  50             focus: function () {
  51                 // prevent value inserted on focus
  52                 return false;
  53             },
  54             select: function (event, ui) {
  55                 var terms = termSplit(this.value);
  56                 terms.pop();    // remove latest term
  57                 terms.push(ui.item.value);  // insert
  58                 terms.push(''); // empty element, for the join()
  59                 this.value = terms.join(' ');
  60                 return false;
  61             },
  62         })
  63         .data('ui-autocomplete')._renderItem = function (ul, item) {
  64             return $('<li></li>')
  65                 .data('ui-autocomplete-item', item)
  66                 .append('<a><img style="display:inline; vertical-align: middle"><span /></a>')
  67                 .find('img').attr('src', item.avatar).end()
  68                 .find('span').text(item.label).end()
  69                 .appendTo(ul);
  70         };
  71 };
  72
  73 /**
  74  * Called when a people tag edit box is shown in the interface
  75  *
  76  * - loads the jQuery UI autocomplete plugin
  77  * - sets event handlers for tag completion
  78  *
  79  */
  80 SN.Init.PeopletagAutocomplete = function(txtBox) {
  81     var split,
  82         extractLast;
  83
  84     split = function(val) {
  85         return val.split( /\s+/ );
  86     };
  87
  88      extractLast = function(term) {
  89         return split(term).pop();
  90     };
  91
  92     // don't navigate away from the field on tab when selecting an item
  93     txtBox
  94         .on('keydown', function(event) {
  95             if (event.keyCode === $.ui.keyCode.TAB &&
  96                     $(this).data('ui-autocomplete').menu.active) {
  97                 event.preventDefault();
  98             }
  99         })
 100         .autocomplete({
 101             minLength: 0,
 102             source: function(request, response) {
 103                 // delegate back to autocomplete, but extract the last term
 104                 response($.ui.autocomplete.filter(
 105                     SN.C.PtagACData, extractLast(request.term)));
 106             },
 107             focus: function () {
 108                 return false;
 109             },
 110             select: function(event, ui) {
 111                 var terms = split(this.value);
 112                 terms.pop();
 113                 terms.push(ui.item.value);
 114                 terms.push('');
 115                 this.value = terms.join(' ');
 116                 return false;
 117             }
 118         })
 119         .data('ui-autocomplete')
 120         ._renderItem = function (ul, item) {
 121             // FIXME: with jQuery UI you cannot have it highlight the match
 122             var _l = '<a class="ptag-ac-line-tag">' + item.tag +
 123                      ' <em class="privacy_mode">' + item.mode + '</em>' +
 124                      '<span class="freq">' + item.freq + '</span></a>';
 125
 126             return $('<li/>')
 127                     .addClass('mode-' + item.mode)
 128                     .addClass('ptag-ac-line')
 129                     .data('item.autocomplete', item)
 130                     .append(_l)
 131                     .appendTo(ul);
 132         };
 133 };
 134
 135 $(document).on('click', '.peopletags_edit_button', function () {
 136     SN.Init.PeopletagAutocomplete($(this).closest('dd').find('[name="tags"]'));
 137 });