From c78fb89f62cd88107ac05c7631804c4f27e70319 Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Sat, 20 Dec 2014 15:21:31 +0100 Subject: Better autocomplete based on jquery-textcomplete --- view/js/autocomplete.js | 203 +++++++----------------------------------------- view/php/theme_init.php | 2 +- 2 files changed, 29 insertions(+), 176 deletions(-) (limited to 'view') diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js index c01ba6990..87f854d3f 100644 --- a/view/js/autocomplete.js +++ b/view/js/autocomplete.js @@ -1,200 +1,53 @@ /** - * Friendica people autocomplete + * Red people autocomplete * - * require jQuery, jquery.textareas + * require jQuery, jquery.textcomplete */ - - - -function ACPopup(elm,backend_url){ - this.idsel=-1; - this.element = elm; - this.searchText=""; - this.ready=true; - this.kp_timer = false; - this.url = backend_url; - - var w = 530; - var h = 130; - - - if(typeof elm.editorId == "undefined") { - style = $(elm).offset(); - w = $(elm).width(); - h = $(elm).height(); - } - else { - var container = elm.getContainer(); - if(typeof container != "undefined") { - style = $(container).offset(); - w = $(container).width(); - h = $(container).height(); - } - } - - if(! w) - w = 530; - - if(! h) - h = 130; - - style.top=style.top+h; - style.width = w; - style.position = 'absolute'; - /* style['max-height'] = '150px'; - style.border = '1px solid red'; - style.background = '#cccccc'; - - style.overflow = 'auto'; - style['z-index'] = '100000'; - */ - style.display = 'none'; - - this.cont = $("
"); - this.cont.css(style); - - $("body").append(this.cont); -} -ACPopup.prototype.close = function(){ - $(this.cont).remove(); - this.ready=false; -} -ACPopup.prototype.search = function(text){ - var that = this; - this.searchText=text; - if (this.kp_timer) clearTimeout(this.kp_timer); - this.kp_timer = setTimeout( function(){that._search();}, 500); -} -ACPopup.prototype._search = function(){ - console.log("_search"); - var that = this; +function mysearch(term, callback, backend_url) { + console.log("Searching for: "+term); var postdata = { start:0, count:100, - search:this.searchText, + //search:term.substring(1), + search:term, type:'c', } $.ajax({ type:'POST', - url: this.url, + url: backend_url, data: postdata, dataType: 'json', success:function(data){ - that.cont.html(""); - if (data.tot>0){ - that.cont.show(); - $(data.items).each(function(){ - html = "{1} ({2})".format(this.photo, this.name, ((this.label) ? this.nick + ' ' + this.label : this.nick) ) - that.add(this.taggable, html, this.nick.replace(' ','') + '+' + this.id + ' - ' + this.link); - }); - } else { - that.cont.hide(); - } - } - }); - -} -ACPopup.prototype.add = function(taggable, label, value){ - var that=this; - var elm = $("
"+label+"
"); - elm.click(function(e){ - t = $(this).attr('title').replace(new RegExp(' \- .*'),''); - if(typeof(that.element.container) === "undefined") { - el=$(that.element); - sel = el.getSelection(); - sel.start = sel.start- that.searchText.length; - el.setSelection(sel.start,sel.end).replaceSelectedText(t+' ').collapseSelection(false); - that.close(); - } - else { - txt = tinyMCE.activeEditor.getContent(); - // alert(that.searchText + ':' + t); - newtxt = txt.replace('@' + that.searchText, '@' + t + ' '); - tinyMCE.activeEditor.setContent(newtxt); - tinyMCE.activeEditor.focus(); - that.close(); - } - }); - $(this.cont).append(elm); -} -ACPopup.prototype.onkey = function(event){ - if (event.keyCode == '13') { - if(this.idsel>-1) { - this.cont.children()[this.idsel].click(); - event.preventDefault(); - } - else - this.close(); - } - if (event.keyCode == '38') { //cursor up - cmax = this.cont.children().size()-1; - this.idsel--; - if (this.idsel<0) this.idsel=cmax; - event.preventDefault(); - } - if (event.keyCode == '40' || event.keyCode == '9') { //cursor down - cmax = this.cont.children().size()-1; - this.idsel++; - if (this.idsel>cmax) this.idsel=0; - event.preventDefault(); - } - - if (event.keyCode == '38' || event.keyCode == '40' || event.keyCode == '9') { - this.cont.children().removeClass('selected'); - $(this.cont.children()[this.idsel]).addClass('selected'); - } - - if (event.keyCode == '27') { //ESC - this.close(); - } + callback(data.items); + }, + }).fail(function () {callback([]); }); // Callback must be invoked even if something went wrong. } -function ContactAutocomplete(element,backend_url){ - this.pattern=/@(\!*)([^ \n]+)$/; - this.popup=null; - var that = this; - - $(element).unbind('keydown'); - $(element).unbind('keyup'); - - $(element).keydown(function(event){ - if (that.popup!==null) that.popup.onkey(event); - }); - - $(element).keyup(function(event){ - cpos = $(this).getSelection(); - if (cpos.start==cpos.end){ - match = $(this).val().substring(0,cpos.start).match(that.pattern); - if (match!==null){ - if (that.popup===null){ - that.popup = new ACPopup(this, backend_url); - } - if (that.popup.ready && match[2]!==that.popup.searchText) that.popup.search(match[2]); - if (!that.popup.ready) that.popup=null; - - } else { - if (that.popup!==null) {that.popup.close(); that.popup=null;} - } - - - } - }); - +function format(item) { + return "{1} ({2})".format(item.photo, item.name, ((item.label) ? item.nick + ' ' + item.label : item.nick) ) } +function replace(item) { + // $2 ensures that prefix (@,@!) is preserved + return '$1$2'+item.nick.replace(' ','') + '+' + item.id; +} /** * jQuery plugin 'contact_autocomplete' */ (function( $ ){ - $.fn.contact_autocomplete = function(backend_url) { - this.each(function(){ - new ContactAutocomplete(this, backend_url); - }); + $.fn.contact_autocomplete = function(backend_url) { + + console.log('autocomplete using '+backend_url); + // Autocomplete contacts + contacts = { + match: /(^|\s)(@!?)(\w{2,})$/, + index: 3, + search: function(term, callback) { console.log("serching for:"+term); mysearch(term, callback, backend_url); }, + replace: replace, + template: format, + } + this.textcomplete([contacts],{}); }; })( jQuery ); - - - - diff --git a/view/php/theme_init.php b/view/php/theme_init.php index f1eaded6a..ff8b54c55 100644 --- a/view/php/theme_init.php +++ b/view/php/theme_init.php @@ -12,7 +12,6 @@ head_add_css('view/css/conversation.css'); head_add_css('view/css/widgets.css'); head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css'); - head_add_js('jquery.js'); head_add_js('jquery-migrate-1.1.1.js'); head_add_js('library/justifiedGallery/dist/js/jquery.justifiedGallery.js'); @@ -22,6 +21,7 @@ head_add_js('spin.js'); head_add_js('jquery.spin.js'); head_add_js('jquery.textinputs.js'); head_add_js('autocomplete.js'); +head_add_js('library/jquery-textcomplete/jquery.textcomplete.js'); head_add_js('library/fancybox/jquery.fancybox-1.3.4.js'); head_add_js('library/jquery.timeago.js'); head_add_js('library/jquery.divgrow/jquery.divgrow-1.3.1.js'); -- cgit v1.2.3