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

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

1 files changed, 14 insertions, 134 deletions

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