js/fk.autocomplete.js

   1 /**
   2  * Friendika people autocomplete
   3  *
   4  * require jQuery, jquery.textareas
   5  */
   6
   7
   8
   9 function ACPopup(elm,backend_url){
  10         this.idsel=-1;
  11         this.element = elm;
  12         this.searchText="";
  13         this.ready=true;
  14         this.kp_timer = false;
  15         this.url = backend_url;
  16
  17         if(typeof elm.editorId == "undefined") {
  18                 style = $(elm).offset();
  19                 w = $(elm).width();
  20                 h = $(elm).height();
  21         }
  22         else {
  23                 style = $(elm.container).offset();
  24                 w = elm.container.offsetWidth;
  25                 h = elm.container.offsetHeight;
  26         }
  27
  28         style.top=style.top+h;
  29         style.width = w;
  30         style.position = 'absolute';
  31         /*      style['max-height'] = '150px';
  32                 style.border = '1px solid red';
  33                 style.background = '#cccccc';
  34
  35                 style.overflow = 'auto';
  36                 style['z-index'] = '100000';
  37         */
  38         style.display = 'none';
  39
  40         this.cont = $("<div class='acpopup'></div>");
  41         this.cont.css(style);
  42
  43         $("body").append(this.cont);
  44 }
  45 ACPopup.prototype.close = function(){
  46         $(this.cont).remove();
  47         this.ready=false;
  48 }
  49 ACPopup.prototype.search = function(text){
  50         var that = this;
  51         this.searchText=text;
  52         if (this.kp_timer) clearTimeout(this.kp_timer);
  53         this.kp_timer = setTimeout( function(){that._search();}, 500);
  54 }
  55 ACPopup.prototype._search = function(){
  56         console.log("_search");
  57         var that = this;
  58         var postdata = {
  59                 start:0,
  60                 count:100,
  61                 search:this.searchText,
  62                 type:'c',
  63         }
  64
  65         $.ajax({
  66                 type:'POST',
  67                 url: this.url,
  68                 data: postdata,
  69                 dataType: 'json',
  70                 success:function(data){
  71                         that.cont.html("");
  72                         if (data.tot>0){
  73                                 that.cont.show();
  74                                 $(data.items).each(function(){
  75                                         html = "<img src='{0}' height='16px' width='16px'>{1} ({2})".format(this.photo, this.name, this.nick)
  76                                                 that.add(html, this.nick + '+' + this.id + ' - ' + this.link);
  77                                 });
  78                         } else {
  79                                 that.cont.hide();
  80                         }
  81                 }
  82         });
  83
  84 }
  85         ACPopup.prototype.add = function(label, value){
  86         var that=this;
  87         var elm = $("<div class='acpopupitem' title='"+value+"'>"+label+"</div>");
  88         elm.click(function(e){
  89                 t = $(this).attr('title').replace(new RegExp(' \- .*'),'');
  90                 if(typeof(that.element.container) === "undefined") {
  91                         el=$(that.element);
  92                         sel = el.getSelection();
  93                         sel.start = sel.start- that.searchText.length;
  94                         el.setSelection(sel.start,sel.end).replaceSelectedText(t+' ').collapseSelection(false);
  95                         that.close();
  96                 }
  97                 else {
  98                         txt = tinyMCE.activeEditor.getContent();
  99                         newtxt = txt.replace(that.searchText,t+' ');
 100                         tinyMCE.activeEditor.setContent(newtxt);
 101                         tinyMCE.activeEditor.focus();
 102                         that.close();
 103                 }
 104         });
 105         $(this.cont).append(elm);
 106 }
 107 ACPopup.prototype.onkey = function(event){
 108         if (event.keyCode == '13' && this.idsel>-1) {
 109                 this.cont.children()[this.idsel].click();
 110                 event.preventDefault();
 111         }
 112         if (event.keyCode == '38') { //cursor up
 113                 cmax = this.cont.children().size()-1;
 114                 this.idsel--;
 115                 if (this.idsel<0) this.idsel=cmax;
 116                 event.preventDefault();
 117         }
 118         if (event.keyCode == '40') { //cursor down
 119                 cmax = this.cont.children().size()-1;
 120                 this.idsel++;
 121                 if (this.idsel>cmax) this.idsel=0;
 122                 event.preventDefault();
 123         }
 124
 125         if (event.keyCode == '38' || event.keyCode == '40' ) {
 126                 this.cont.children().removeClass('selected');
 127                 $(this.cont.children()[this.idsel]).addClass('selected');
 128         }
 129
 130         if (event.keyCode == '27') { //ESC
 131                 this.close();
 132         }
 133 }
 134
 135 function ContactAutocomplete(element,backend_url){
 136         this.pattern=/@([^ \n]+)$/;
 137         this.popup=null;
 138         var that = this;
 139
 140         $(element).unbind('keydown');
 141         $(element).unbind('keyup');
 142
 143         $(element).keydown(function(event){
 144                 if (that.popup!==null) that.popup.onkey(event);
 145         });
 146
 147         $(element).keyup(function(event){
 148                 cpos = $(this).getSelection();
 149                 if (cpos.start==cpos.end){
 150                         match = $(this).val().substring(0,cpos.start).match(that.pattern);
 151                         if (match!==null){
 152                                 if (that.popup===null){
 153                                         that.popup = new ACPopup(this, backend_url);
 154                                 }
 155                                 if (that.popup.ready && match[1]!==that.popup.searchText) that.popup.search(match[1]);
 156                                 if (!that.popup.ready) that.popup=null;
 157
 158                         } else {
 159                                 if (that.popup!==null) {that.popup.close(); that.popup=null;}
 160                         }
 161
 162
 163                 }
 164         });
 165
 166 }
 167
 168
 169 /**
 170  * jQuery plugin 'contact_autocomplete'
 171  */
 172 (function( $ ){
 173   $.fn.contact_autocomplete = function(backend_url) {
 174     this.each(function(){
 175                 new ContactAutocomplete(this, backend_url);
 176         });
 177   };
 178 })( jQuery );
 179
 180
 181
 182