introduce a filter function at the contact page.

This is done with the help of textcomplete and jsmart.js.
There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
This commit is contained in:
rabuzarus 2016-04-28 21:35:33 +02:00
parent 381551569a
commit 17958da201
9 changed files with 3712 additions and 12 deletions

View file

@ -170,8 +170,6 @@ $(document).ready(function(){
};
});
//function commentOpenUI(obj, id) {
// $(document).unbind( "click.commentOpen", handler );
@ -451,4 +449,62 @@ function cmtBbOpen(id) {
}
function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide();
}
}
function contact_filter(item) {
// get the html content from the js template of the contact-wrapper
contact_tpl = unescape($(".javascript-template[rel=contact-template]").html());
var variables = {
id: item.id,
name: item.name,
username: item.username,
thumb: item.thumb,
img_hover: item.img_hover,
edit_hover: item.edit_hover,
account_type: item.account_type,
photo_menu: item.photo_menu,
alt_text: item.alt_text,
dir_icon: item.dir_icon,
sparkle: item.sparkle,
itemurl: item.itemurl,
url: item.url,
network: item.network,
tags: item.tags,
details: item.details,
};
// open a new jSmart instance with the template
var tpl = new jSmart (contact_tpl);
// replace the variable with the values
var html = tpl.fetch(variables);
return html;
}
function filter_replace(item) {
return item.name;
}
(function( $ ) {
$.fn.contact_filter = function(backend_url, typ, autosubmit, onselect) {
if(typeof typ === 'undefined') typ = '';
if(typeof autosubmit === 'undefined') autosubmit = false;
// Autocomplete contacts
contacts = {
match: /(^)([^\n]+)$/,
index: 2,
search: function(term, callback) { contact_search(term, callback, backend_url, typ); },
replace: filter_replace,
template: contact_filter,
};
this.attr('autocomplete','off');
var a = this.textcomplete([contacts], {className:'accontacts', zIndex:10000, appendTo: '#contact-list'});
a.on('textComplete:select', function(e, value, strategy) { $(".dropdown-menu.textcomplete-dropdown.media-list").show(); });
};
})( jQuery );