diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/lib/autocomplete.js | 31 | ||||
| -rw-r--r-- | js/lib/userpicker.js | 123 |
2 files changed, 81 insertions, 73 deletions
diff --git a/js/lib/autocomplete.js b/js/lib/autocomplete.js index 917326d4f..46d72d146 100644 --- a/js/lib/autocomplete.js +++ b/js/lib/autocomplete.js @@ -5,35 +5,10 @@ elgg.provide('elgg.autocomplete'); elgg.autocomplete.init = function() { $('.elgg-input-autocomplete').autocomplete({ - source: elgg.autocomplete.url, //gets set by input/autocomplete - minLength: 1, - select: function(event, ui) { - var item = ui.item; - $(this).val(item.name); - - var hidden = $(this).next(); - hidden.val(item.guid); - } + source: elgg.autocomplete.url, //gets set by input/autocomplete view + minLength: 2, + html: "html" }) - - //@todo This seems convoluted - .data("autocomplete")._renderItem = function(ul, item) { - switch (item.type) { - case 'user': - case 'group': - r = item.icon + item.name + ' - ' + item.desc; - break; - - default: - r = item.name + ' - ' + item.desc; - break; - } - - return $("<li/>") - .data("item.autocomplete", item) - .append(r) - .appendTo(ul); - }; }; elgg.register_hook_handler('init', 'system', elgg.autocomplete.init);
\ No newline at end of file diff --git a/js/lib/userpicker.js b/js/lib/userpicker.js index 826bf21a0..ae2add53f 100644 --- a/js/lib/userpicker.js +++ b/js/lib/userpicker.js @@ -1,14 +1,22 @@ 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() { - - var _this = this; - + $(this).autocomplete({ source: function(request, response) { + var params = elgg.userpicker.getSearchParams(this); elgg.get('livesearch', { @@ -20,64 +28,89 @@ elgg.userpicker.init = function() { }); }, minLength: 2, + html: "html", select: elgg.userpicker.addUser }) - - //@todo This seems convoluted - .data("autocomplete")._renderItem = elgg.userpicker.formatItem; }); -}; -elgg.userpicker.formatItem = function(ul, item) { - switch (item.type) { - case 'user': - case 'group': - r = item.icon + item.name + ' - ' + item.desc; - break; - - default: - r = item.name + ' - ' + item.desc; - break; - } - - return $("<li/>") - .data("item.autocomplete", item) - .append(r) - .appendTo(ul); -}; + $('.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 = '<input type="hidden" name="members[]" value="' + info.guid + '" />'; + li += elgg.userpicker.viewUser(info); + $('<li>').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 picker = $(this).closest('.elgg-user-picker'); - var users = picker.find('.elgg-user-picker-entries'); - var internalName = users.find('[type=hidden]').attr('name'); - - // not sure why formatted isn't. - var formatted = elgg.userpicker.formatItem(data); + var guid = item.find('[name="members[]"]').val(); + delete elgg.userpicker.userList[guid]; - // add guid as hidden input and to list. - var li = formatted + ' <div class="delete-button"><a onclick="elgg.userpicker.removeUser(this, ' + info.guid + ')"><strong>X</strong></a></div>' - + '<input type="hidden" name="' + internalName + '" value="' + info.guid + '" />'; - $('<li>').html(li).appendTo(users); + item.remove(); + event.preventDefault(); +} - $(this).val(''); - } -}; +/** + * 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 = "<a href='#' class='elgg-userpicker-remove'>X</a>"; -elgg.userpicker.removeUser = function(link, guid) { - $(link).closest('.elgg-user-picker-entries > li').remove(); -}; + var html = "<div class='elgg-image-block'>"; + html += "<div class='elgg-image'>" + info.icon + "</div>"; + html += "<div class='elgg-image-alt'>" + deleteLink + "</div>"; + html += "<div class='elgg-body'>" + info.name + "</div>"; + html += "</div"; + + return html; +} -elgg.userpicker.getSearchParams = function(e) { - if ($(e).closest('.elgg-user-picker').find('[name=match_on]').attr('checked')) { - return {'match_on[]': 'friends', 'term' : e.term}; +/** + * Get the parameters to use for autocomplete + * + * This grabs the value of the friends checkbox. + * + * @param {Object} obj Object for the autocomplete callback + * @return Object + */ +elgg.userpicker.getSearchParams = function(obj) { + if (obj.element.siblings('[name=match_on]').attr('checked')) { + return {'match_on[]': 'friends', 'term' : obj.term}; } else { - return {'match_on[]': 'users', 'term' : e.term}; + return {'match_on[]': 'users', 'term' : obj.term}; } } |