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