mirror of
https://github.com/friendica/friendica
synced 2024-12-23 00:40:15 +00:00
autocomplete contacts nickname while writting in a comment box.
This commit is contained in:
Fabio Comuni
parent
afce790e56
commit
bcb672e7ff
5 changed files with 187 additions and 5 deletions
154
js/fk.autocomplete.js
Normal file
154
js/fk.autocomplete.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
/**
|
||||
* Friendika people autocomplete
|
||||
*
|
||||
* require jQuery, jquery.textareas
|
||||
*/
|
||||
|
||||
|
||||
|
||||
function ACPopup(elm,backend_url){
|
||||
this.idsel=-1;
|
||||
this.element = elm;
|
||||
this.searchText="";
|
||||
this.ready=true;
|
||||
this.kp_timer = false;
|
||||
this.url = backend_url;
|
||||
|
||||
style = $(elm).offset();
|
||||
w = $(elm).width();
|
||||
h = $(elm).height();
|
||||
style.top=style.top+h;
|
||||
style.height = '150px';
|
||||
style.width = w;
|
||||
style.border = '1px solid red';
|
||||
style.background = '#cccccc';
|
||||
style.position = 'absolute';
|
||||
style.overflow = 'auto';
|
||||
style['z-index'] = '100000';
|
||||
|
||||
this.cont = $("<div class='acpopup'></div>");
|
||||
this.cont.css(style);
|
||||
|
||||
$(elm).after(this.cont);
|
||||
}
|
||||
ACPopup.prototype.close = function(){
|
||||
$(this.cont).remove();
|
||||
this.ready=false;
|
||||
}
|
||||
ACPopup.prototype.search = function(text){
|
||||
this.searchText=text;
|
||||
/*if (this.kp_timer) clearTimeout(this.kp_timer);
|
||||
this.kp_timer = setTimeout( this._search, 1000);*/
|
||||
this._search();
|
||||
}
|
||||
ACPopup.prototype._search = function(){
|
||||
|
||||
var that = this;
|
||||
var postdata = {
|
||||
start:0,
|
||||
count:100,
|
||||
search:this.searchText,
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type:'POST',
|
||||
url: this.url,
|
||||
data: postdata,
|
||||
dataType: 'json',
|
||||
success:function(data){
|
||||
that.cont.html("");
|
||||
$(data.items).each(function(){
|
||||
if (this.type=="c"){
|
||||
html = "<img src='{0}' height='16px' width='16px'>{1} ({2})".format(this.photo, this.name, this.nick)
|
||||
that.add(html, this.nick);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
ACPopup.prototype.add = function(label, value){
|
||||
var that=this;
|
||||
var elm = $("<div class='acpopupitem' title='"+value+"'>"+label+"</div>");
|
||||
elm.click(function(e){
|
||||
t = $(this).attr('title');
|
||||
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();
|
||||
});
|
||||
$(this.cont).append(elm);
|
||||
}
|
||||
ACPopup.prototype.onkey = function(event){
|
||||
if (event.keyCode == '13' && this.idsel>-1) {
|
||||
this.cont.children()[this.idsel].click();
|
||||
event.preventDefault();
|
||||
}
|
||||
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') { //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' ) {
|
||||
this.cont.children().css({background:'#cccccc'}).removeClass('selected');
|
||||
$(this.cont.children()[this.idsel]).css({background:'#ccccff'}).addClass('selected');
|
||||
}
|
||||
|
||||
if (event.keyCode == '27') { //ESC
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
function ContactAutocomplete(element,backend_url){
|
||||
this.pattern=/@([^ \n]+)$/;
|
||||
this.popup=null;
|
||||
var that = this;
|
||||
|
||||
$(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[1]!==that.popup.searchText) that.popup.search(match[1]);
|
||||
if (!that.popup.ready) that.popup=null;
|
||||
|
||||
} else {
|
||||
if (that.popup!==null) {that.popup.close(); that.popup=null;}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery plugin 'contact_autocomplete'
|
||||
*/
|
||||
(function( $ ){
|
||||
$.fn.contact_autocomplete = function(backend_url) {
|
||||
this.each(function(){
|
||||
new ContactAutocomplete(this, backend_url);
|
||||
});
|
||||
};
|
||||
})( jQuery );
|
||||
|
||||
|
||||
|
||||
|
||||
20
js/jquery.textinputs.js
Normal file
20
js/jquery.textinputs.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/*
|
||||
Rangy Text Inputs, a cross-browser textarea and text input library plug-in for jQuery.
|
||||
|
||||
Part of Rangy, a cross-browser JavaScript range and selection library
|
||||
http://code.google.com/p/rangy/
|
||||
|
||||
Depends on jQuery 1.0 or later.
|
||||
|
||||
Copyright 2010, Tim Down
|
||||
Licensed under the MIT license.
|
||||
Version: 0.1.205
|
||||
Build date: 5 November 2010
|
||||
*/
|
||||
(function(n){function o(e,g){var a=typeof e[g];return a==="function"||!!(a=="object"&&e[g])||a=="unknown"}function p(e,g,a){if(g<0)g+=e.value.length;if(typeof a=="undefined")a=g;if(a<0)a+=e.value.length;return{start:g,end:a}}function k(){return typeof document.body=="object"&&document.body?document.body:document.getElementsByTagName("body")[0]}var i,h,q,l,r,s,t,u,m;n(document).ready(function(){function e(a,b){return function(){var c=this.jquery?this[0]:this,d=c.nodeName.toLowerCase();if(c.nodeType==
|
||||
1&&(d=="textarea"||d=="input"&&c.type=="text")){c=[c].concat(Array.prototype.slice.call(arguments));c=a.apply(this,c);if(!b)return c}if(b)return this}}var g=document.createElement("textarea");k().appendChild(g);if(typeof g.selectionStart!="undefined"&&typeof g.selectionEnd!="undefined"){i=function(a){return{start:a.selectionStart,end:a.selectionEnd,length:a.selectionEnd-a.selectionStart,text:a.value.slice(a.selectionStart,a.selectionEnd)}};h=function(a,b,c){b=p(a,b,c);a.selectionStart=b.start;a.selectionEnd=
|
||||
b.end};m=function(a,b){if(b)a.selectionEnd=a.selectionStart;else a.selectionStart=a.selectionEnd}}else if(o(g,"createTextRange")&&typeof document.selection=="object"&&document.selection&&o(document.selection,"createRange")){i=function(a){var b=0,c=0,d,f,j;if((j=document.selection.createRange())&&j.parentElement()==a){f=a.value.length;d=a.value.replace(/\r\n/g,"\n");c=a.createTextRange();c.moveToBookmark(j.getBookmark());j=a.createTextRange();j.collapse(false);if(c.compareEndPoints("StartToEnd",j)>
|
||||
-1)b=c=f;else{b=-c.moveStart("character",-f);b+=d.slice(0,b).split("\n").length-1;if(c.compareEndPoints("EndToEnd",j)>-1)c=f;else{c=-c.moveEnd("character",-f);c+=d.slice(0,c).split("\n").length-1}}}return{start:b,end:c,length:c-b,text:a.value.slice(b,c)}};h=function(a,b,c){b=p(a,b,c);c=a.createTextRange();var d=b.start-(a.value.slice(0,b.start).split("\r\n").length-1);c.collapse(true);if(b.start==b.end)c.move("character",d);else{c.moveEnd("character",b.end-(a.value.slice(0,b.end).split("\r\n").length-
|
||||
1));c.moveStart("character",d)}c.select()};m=function(a,b){var c=document.selection.createRange();c.collapse(b);c.select()}}else{k().removeChild(g);window.console&&window.console.log&&window.console.log("TextInputs module for Rangy not supported in your browser. Reason: No means of finding text input caret position");return}k().removeChild(g);l=function(a,b,c,d){var f;if(b!=c){f=a.value;a.value=f.slice(0,b)+f.slice(c)}d&&h(a,b,b)};q=function(a){var b=i(a);l(a,b.start,b.end,true)};u=function(a){var b=
|
||||
i(a),c;if(b.start!=b.end){c=a.value;a.value=c.slice(0,b.start)+c.slice(b.end)}h(a,b.start,b.start);return b.text};r=function(a,b,c,d){var f=a.value;a.value=f.slice(0,c)+b+f.slice(c);if(d){b=c+b.length;h(a,b,b)}};s=function(a,b){var c=i(a),d=a.value;a.value=d.slice(0,c.start)+b+d.slice(c.end);c=c.start+b.length;h(a,c,c)};t=function(a,b,c){var d=i(a),f=a.value;a.value=f.slice(0,d.start)+b+d.text+c+f.slice(d.end);b=d.start+b.length;h(a,b,b+d.length)};n.fn.extend({getSelection:e(i,false),setSelection:e(h,
|
||||
true),collapseSelection:e(m,true),deleteSelectedText:e(q,true),deleteText:e(l,true),extractSelectedText:e(u,false),insertText:e(r,true),replaceSelectedText:e(s,true),surroundSelectedText:e(t,true)})})})(jQuery);
|
||||
|
|
@ -78,8 +78,6 @@
|
|||
menu.toggle();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* notifications template */
|
||||
var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
|
||||
|
|
@ -163,7 +161,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
function NavUpdate() {
|
||||
|
|
@ -245,6 +245,8 @@
|
|||
commentBusy = false;
|
||||
$('body').css('cursor', 'auto');
|
||||
}
|
||||
/* autocomplete @nicknames */
|
||||
$(".comment-edit-wrapper textarea").contact_autocomplete(baseurl+"/acl");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -445,6 +447,7 @@ function setupFieldRichtext(){
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* sprintf in javascript
|
||||
* "{0} and {1}".format('zero','uno');
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ function acl_init(&$a){
|
|||
|
||||
if ($search!=""){
|
||||
$sql_extra = "AND `name` LIKE '%%".dbesc($search)."%%'";
|
||||
$sql_extra2 = "AND (`name` LIKE '%%".dbesc($search)."%%' OR `nick` LIKE '%%".dbesc($search)."%%')";
|
||||
}
|
||||
|
||||
// count groups and contacts
|
||||
|
|
@ -59,9 +60,9 @@ function acl_init(&$a){
|
|||
}
|
||||
|
||||
|
||||
$r = q("SELECT `id`, `name`, `micro`, `network`, `url` FROM `contact`
|
||||
$r = q("SELECT `id`, `name`, `nick`, `micro`, `network`, `url` FROM `contact`
|
||||
WHERE `uid` = %d AND `self` = 0 AND `blocked` = 0 AND `pending` = 0 AND `notify` != ''
|
||||
$sql_extra
|
||||
$sql_extra2
|
||||
ORDER BY `name` ASC ",
|
||||
intval(local_user())
|
||||
);
|
||||
|
|
@ -73,6 +74,7 @@ function acl_init(&$a){
|
|||
"id" => intval($g['id']),
|
||||
"network" => $g['network'],
|
||||
"link" => $g['url'],
|
||||
"nick" => $g['nick'],
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,11 +17,14 @@
|
|||
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="$baseurl/js/jquery.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/js/jquery.textinputs.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/js/fk.autocomplete.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/library/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
|
||||
<script type="text/javascript" src="$baseurl/library/tiptip/jquery.tipTip.minified.js"></script>
|
||||
<script type="text/javascript" src="$baseurl/library/jgrowl/jquery.jgrowl_minimized.js"></script>
|
||||
<script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/js/acl.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/js/webtoolkit.base64.js" ></script>
|
||||
<script type="text/javascript" src="$baseurl/js/main.js" ></script>
|
||||
<script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue