Added rough version of a new user picker.

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

1 files changed, 150 insertions, 0 deletions

diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php
new file mode 100644
index 000000000..8f26b8916
--- /dev/null
+++ b/views/default/input/userpicker.php
@@ -0,0 +1,150 @@
+<?php 
+/**
+ * User Picker.  Sends an array of user guids.
+ * 
+ * @package Elgg
+ * @subpackage Core
+ * @author Curverider Ltd
+ * @link http://elgg.org/
+ * 
+ * @uses $vars['value'] The current value, if any
+ * @uses $vars['internalname'] The name of the input field
+ * 
+ * 
+ * pops up defaulted to lazy load friends lists in paginated alphabetical order.
+ * upon 
+ * 
+ * As users are checked they move down to a "users" box.
+ * When this happens, a hidden input is created also.
+ * 	{$internalnal}[] with the value th GUID.
+ * 
+ */
+
+global $user_picker_js_sent;
+
+if (!$user_picker_js_sent) {
+?>
+<!-- User picker JS -->
+<script language="javascript" type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery.autocomplete.min.js"></script>
+<script type="text/javascript">
+// set up a few required variables
+userPickerURL = '<?php echo $vars['url'] ?>pg/livesearch';
+
+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,
+		minChars: 1,
+		matchContains: true,
+		autoFill: false,
+		formatItem: userPickerFormatItem,
+		formatResult: function (row, i, max) {
+			eval("var info = " + row + ";");
+			//console.log('format result');
+			// upon select, adding the user to the user basket.
+			// this is slightly abusive for this function.
+			// set it to the hidden input name
+			
+			//userPickerAddUser(info.guid);
+
+			// returning the 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 = '';
+	
+	switch (info.type) {
+		case 'user':
+		case 'group':
+			r = info.icon + info.name + ' - ' + info.desc;
+			break;
+			
+		default:
+			r = info.name + ' - ' + info.desc;
+			break;
+	}
+	return r.replace(new RegExp("(" + term + ")", "gi"), "<b>$1</b>");
+}
+
+function userPickerAddUser(event, data, formatted) {
+	eval("var info = " + data + ";");
+	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 + ' (' + '<a onclick="userPickerRemoveUser(this, ' + info.guid + ')">X</a>)'
+	 + '<input type="hidden" name="' + internalName + '[]" value="' + info.guid + '" />';
+	$('<li class="user_picker_entry">').html(li).appendTo(users);
+
+	$(this).val('');
+}
+
+function userPickerRemoveUser(link, guid) {
+	$(link).parent('.user_picker_entry').html('');
+}
+
+function userPickerGetSearchParams(e) {
+	if ($(e).parent().find('.all_users').attr('checked')) {
+		return {'match_on[]': 'users'};
+	} else {
+		return {'match_on[]': 'friends'};
+	}
+}
+
+$(document).ready(function() {
+	userPickerBindEvents();
+});
+</script>
+<?php
+	$user_picker_js_sent = true;
+}
+
+?>
+<div class="user_picker">
+	<input class="internalname" type="hidden" name="internalname" value="<?php echo $vars['internalname']; ?>" />
+	<input class="search" type="text" name="user_search" />
+	<span class="controls">
+		<label><input class="all_users" type="checkbox" name="match_on" value="true" />All Users</label>		
+	</span>
+	<div class="results">
+		<!-- This space will be filled with users, checkboxes and magic. -->
+	</div>
+	<ul class="users"></ul>
+</div>
+