aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorCash Costello <cash.costello@gmail.com>2011-10-17 19:37:30 -0700
committerCash Costello <cash.costello@gmail.com>2011-10-17 19:37:30 -0700
commit63ebe7b121105beb7e4c8b9b82e3c649f6a9a489 (patch)
tree79f51f8b6e94203297cbbc899f3daa400475de34 /js/lib
parent9a3ec606cfe2cbbe08949a56198bf9d4bb2e1e64 (diff)
parent34c968355231216624c2beae59ea9ad17f7ef2c0 (diff)
downloadelgg-63ebe7b121105beb7e4c8b9b82e3c649f6a9a489.tar.gz
elgg-63ebe7b121105beb7e4c8b9b82e3c649f6a9a489.tar.bz2
Merge pull request #74 from cash/autocomplete
Fixes #2102, #2712, #3450 Finishes autocomplete and userpicker for 1.8.1
Diffstat (limited to 'js/lib')
-rw-r--r--js/lib/autocomplete.js31
-rw-r--r--js/lib/userpicker.js123
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};
}
}