From: ewinslow <ewinslow@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Tue, 15 Feb 2011 00:38:06 +0000 (+0000)
Subject: Refs #2102: Replace input/userpicker with jQuery UI autocomplete
X-Git-Url: https://gitweb.fluxo.info/?a=commitdiff_plain;h=a13409117dad65a263cd98963aec5156b6b8e068;p=lorea%2Felgg.git

Refs #2102: Replace input/userpicker with jQuery UI autocomplete

git-svn-id: http://code.elgg.org/elgg/trunk@8242 36083f99-b078-4883-b0ff-0f9b5a30f544
---

diff --git a/js/lib/userpicker.js b/js/lib/userpicker.js
new file mode 100644
index 000000000..d978b9c82
--- /dev/null
+++ b/js/lib/userpicker.js
@@ -0,0 +1,90 @@
+elgg.userpicker.init = function() {
+	// binding autocomplete.
+	// doing this as an each so we can past this to functions.
+	$('.elgg-input-user-picker').each(function() {
+		
+		var params = elgg.userpicker.getSearchParams(this);
+		
+		$(this).autocomplete({
+			source: function(request, response) {
+				elgg.get('pg/livesearch', {
+					data: params,
+					dataType: 'json',
+					success: function(data) {
+						response(data);
+					}
+				});
+			}
+			minLength: 2,
+			select: elgg.userpicker.addUser
+		})
+		
+		//@todo This seems convoluted
+		.data("autocomplete")._renderItem = elgg.userpicker.formatItem;
+	});
+	
+
+	// changing friends vs all users.
+	$('.elgg-user-picker [name=match_on]').live('click', function() {
+		// update the extra params for the autocomplete.
+		var e = $(this).closest('.elgg-user-picker').find('.elgg-input-user-picker');
+		var params = elgg.userpicker.getSearchParams(e);
+		e.setOptions({extraParams: params});
+		e.flushCache();
+	});
+};
+
+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.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 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);
+
+		// 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);
+
+		$(this).val('');
+	}
+}
+
+function elgg.userpicker.removeUser(link, guid) {
+	$(link).closest('.elgg-user-picker-entries > li').remove();
+}
+
+elgg.userpicker.getSearchParams = function(e) {
+	if ($(e).closest('.elgg-user-picker').find('[name=match_on]').attr('checked')) {
+		return {'match_on[]': 'friends'};
+	} else {
+		return {'match_on[]': 'users'};
+	}
+}
+
+elgg.register_event_handler('init', 'system', elgg.userpicker.init);
\ No newline at end of file
diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php
index c6ecb1688..18c71a7f3 100644
--- a/views/default/input/userpicker.php
+++ b/views/default/input/userpicker.php
@@ -18,7 +18,7 @@
  *
  */
 
-global $user_picker_js_sent;
+elgg_register_js('js/lib/userpicker.js', 'userpicker', 'footer');
 
 function user_picker_add_user($user_id) {
 	$user = get_entity($user_id);
@@ -28,13 +28,13 @@ function user_picker_add_user($user_id) {
 	
 	$icon = $user->getIconURL('tiny');
 	
-	$code = '<li class="user-picker-entry">';
-	$code .= "<img class=\"livesearch_icon\" src=\"$icon\" />";
+	$code = '<li class="elgg-image-block">';
+	$code .= "<div class='elgg-image'><img class=\"livesearch_icon\" src=\"$icon\" /></div>";
+	$code .= "<div class='elgg-image-alt'><a onclick='elgg.userpicker.removeUser(this, $user_id)'><strong>X</strong></a></div>";
+	$code .= "<div class='elgg-body'>";
 	$code .= "$user->name - $user->username";
-	$code .= '<div class="delete-button">';
-	$code .= "<a onclick=\"userPickerRemoveUser(this, $user_id)\"><strong>X</strong></a>";
-	$code .= '</div>';
 	$code .= "<input type=\"hidden\" name=\"members[]\" value=\"$user_id\">";
+	$code .= "</div>";
 	$code .= '</li>';
 	
 	return $code;
@@ -52,124 +52,6 @@ foreach ($vars['value'] as $value) {
 // convert the values to a json-encoded list
 $json_values = json_encode($values);
 
-if (!$user_picker_js_sent) {
-?>
-<!-- User picker JS -->
-<?php //@todo JS 1.8: no ?>
-<script type="text/javascript" src="<?php echo elgg_get_site_url(); ?>vendors/jquery/jquery.autocomplete.min.js"></script>
-<script type="text/javascript">
-// set up a few required variables
-userPickerURL = '<?php echo elgg_get_site_url() ?>pg/livesearch';
-userList = <?php echo $json_values ?>;
-
-function userPickerBindEvents() {
-	// binding autocomplete.
-	// doing this as an each so we can past this to functions.
-	$('.user-picker .search').each(function (i, e) {
-		userPickerBindAutocomplete(e);
-	});
-
-	// changing friends vs all users.
-	$('.user-picker .all_users').click(function() {
-		// update the extra params for the autocomplete.
-		var e = $(this).parents('.user-picker').find('.search');
-		var params = userPickerGetSearchParams(e);
-		e.setOptions({extraParams: params});
-		e.flushCache();
-	});
-
-	// hitting enter on the text field
-//	$('.user-picker .search').bind($.browser.opera ? "keypress" : "keydown", function(event) {
-//		if(event.keyCode == 13) {
-////			console.log($(this).val());
-//			userPickerAddUser(this);
-//		}
-//	});
-}
-
-function userPickerBindAutocomplete(e) {
-	var params = userPickerGetSearchParams(e);
-
-	$(e).autocomplete(userPickerURL, {
-		extraParams: params,
-		max: 25,
-		minChars: 2,
-		matchContains: false,
-		autoFill: false,
-		formatItem: userPickerFormatItem,
-		formatResult: function (row, i, max) {
-			eval("var info = " + row + ";");
-			// returning the just name
-			return info.name;
-		}
-	});
-
-	// add users when a result is picked.
-	$(e).result(userPickerAddUser);
-}
-
-function userPickerFormatItem(row, i, max, term) {
-	eval("var info = " + row + ";");
-	var r = '';
-	var name = info.name.replace(new RegExp("(" + term + ")", "gi"), "<span class=\"user-picker_highlight\">$1</b>");
-	var desc = info.desc.replace(new RegExp("(" + term + ")", "gi"), "<span class=\"user-picker_highlight\">$1</b>");
-
-	switch (info.type) {
-		case 'user':
-		case 'group':
-			r = info.icon + name + ' - ' + desc;
-			break;
-
-		default:
-			r = name + ' - ' + desc;
-			break;
-	}
-	return r;
-	//return r.replace(new RegExp("(" + term + ")", "gi"), "<span class=\"user-picker_highlight\">$1</b>");
-}
-
-function userPickerAddUser(event, data, formatted) {
-	eval("var info = " + data + ";");
-	
-	// do not allow users to be added multiple times
-	if (!(info.guid in userList)) {
-		userList[info.guid] = true;
-	
-		var picker = $(this).parent('.user-picker');
-		var users = picker.find('.users');
-		var internalName = picker.find('input.internalname').val();
-		// not sure why formatted isn't.
-		var formatted = userPickerFormatItem(data);
-
-		// add guid as hidden input and to list.
-		var li = formatted + ' <div class="delete-button"><a onclick="userPickerRemoveUser(this, ' + info.guid + ')"><strong>X</strong></a></div>'
-		+ '<input type="hidden" name="' + internalName + '[]" value="' + info.guid + '" />';
-		$('<li class="user-picker-entry">').html(li).appendTo(users);
-
-		$(this).val('');
-	}
-}
-
-function userPickerRemoveUser(link, guid) {
-	$(link).parents('.user-picker-entry').remove();
-}
-
-function userPickerGetSearchParams(e) {
-	if ($(e).parent().find('.all_users').attr('checked')) {
-		return {'match_on[]': 'friends'};
-	} else {
-		return {'match_on[]': 'users'};
-	}
-}
-
-$(document).ready(function() {
-	userPickerBindEvents();
-});
-</script>
-<?php
-	$user_picker_js_sent = true;
-}
-
 // create an HTML list of users
 $user_list = '';
 foreach ($vars['value'] as $user_id) {
@@ -177,14 +59,12 @@ foreach ($vars['value'] as $user_id) {
 }
 
 ?>
-<div class="user-picker">
-	<input class="internalname" type="hidden" name="internalname" value="<?php echo $vars['internalname']; ?>" />
-	<input class="search" type="text" name="user_search" size="30"/>
-	<span class="controls">
-		<label><input class="all_users" type="checkbox" name="match_on" value="true" /><?php echo elgg_echo('userpicker:only_friends'); ?></label>
-	</span>
-	<div class="results">
-		<!-- This space will be filled with users, checkboxes and magic. -->
-	</div>
-	<ul class="users"><?php echo $user_list; ?></ul>
+<div class="elgg-user-picker">
+	<input type="text" class="elgg-input-user-picker" size="30"/>
+	<label><input type="checkbox" name="match_on" value="true" /><?php echo elgg_echo('userpicker:only_friends'); ?></label>
+	<ul class="elgg-user-picker-entries"><?php echo $user_list; ?></ul>
 </div>
+<script type="text/javascript">
+	elgg.provide('elgg.userpicker');
+	elgg.userpicker.userList = <?php echo $json_values ?>;
+</script>
\ No newline at end of file