Merge pull request #74 from cash/autocomplete

Fixes #2102, #2712, #3450 Finishes autocomplete and userpicker for 1.8.1

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};
 	}
 }