From fbbed3deaa0090173d398587cfea4af144d062a2 Mon Sep 17 00:00:00 2001 From: Cash Costello Date: Tue, 15 Nov 2011 20:03:52 -0500 Subject: atleast renaming the ui js libs --- js/lib/ui.userpicker.js | 117 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 js/lib/ui.userpicker.js (limited to 'js/lib/ui.userpicker.js') diff --git a/js/lib/ui.userpicker.js b/js/lib/ui.userpicker.js new file mode 100644 index 000000000..8287ba91c --- /dev/null +++ b/js/lib/ui.userpicker.js @@ -0,0 +1,117 @@ +elgg.provide('elgg.userpicker'); + +/** + * Userpicker initialization + * + * The userpicker is an autocomplete library for selecting multiple users or + * friends. It works in concert with the view input/userpicker. + * + * @return void + */ +elgg.userpicker.init = function() { + + // binding autocomplete. + // doing this as an each so we can pass this to functions. + $('.elgg-input-user-picker').each(function() { + + $(this).autocomplete({ + source: function(request, response) { + + var params = elgg.userpicker.getSearchParams(this); + + elgg.get('livesearch', { + data: params, + dataType: 'json', + success: function(data) { + response(data); + } + }); + }, + minLength: 2, + html: "html", + select: elgg.userpicker.addUser + }) + }); + + $('.elgg-userpicker-remove').live('click', elgg.userpicker.removeUser); +}; + +/** + * Adds a user to the select user list + * + * elgg.userpicker.userList is defined in the input/userpicker view + * + * @param {Object} event + * @param {Object} ui The object returned by the autocomplete endpoint + * @return void + */ +elgg.userpicker.addUser = function(event, ui) { + var info = ui.item; + + // do not allow users to be added multiple times + if (!(info.guid in elgg.userpicker.userList)) { + elgg.userpicker.userList[info.guid] = true; + var users = $(this).siblings('.elgg-user-picker-list'); + var li = ''; + li += elgg.userpicker.viewUser(info); + $('
  • ').html(li).appendTo(users); + } + + $(this).val(''); + event.preventDefault(); +}; + +/** + * Remove a user from the selected user list + * + * @param {Object} event + * @return void + */ +elgg.userpicker.removeUser = function(event) { + var item = $(this).closest('.elgg-user-picker-list > li'); + + var guid = item.find('[name="members[]"]').val(); + delete elgg.userpicker.userList[guid]; + + item.remove(); + event.preventDefault(); +}; + +/** + * Render the list item for insertion into the selected user list + * + * The html in this method has to remain synced with the input/userpicker view + * + * @param {Object} info The object returned by the autocomplete endpoint + * @return string + */ +elgg.userpicker.viewUser = function(info) { + + var deleteLink = "X"; + + var html = "
    "; + html += "
    " + info.icon + "
    "; + html += "
    " + deleteLink + "
    "; + html += "
    " + info.name + "
    "; + html += "