From 67957f0d3247f6134d0010e42facc5ab62af61ba Mon Sep 17 00:00:00 2001
From: brettp <brettp@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Mon, 7 Sep 2009 20:07:57 +0000
Subject: Added rough version of a new user picker.

git-svn-id: https://code.elgg.org/elgg/trunk@3475 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 views/default/css.php              |  60 +++++++++++++++
 views/default/input/userpicker.php | 150 +++++++++++++++++++++++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 views/default/input/userpicker.php

(limited to 'views/default')

diff --git a/views/default/css.php b/views/default/css.php
index 2554073ec..706c5fe50 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -2536,4 +2536,64 @@ a.delete_report_button:hover {
 }
 
 
+/* ***************************************
+	Auto Suggest Boxes
+*************************************** */
+
+.ac_results {
+	padding: 0px;
+	border: 1px solid black;
+	background-color: white;
+	overflow: hidden;
+	z-index: 99999;
+}
+
+.ac_results ul {
+	width: 100%;
+	list-style-position: outside;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.ac_results li {
+	margin: 0px;
+	padding: 2px 5px;
+	cursor: default;
+	display: block;
+	/* 
+	if width will be 100% horizontal scrollbar will apear 
+	when scroll mode will be used
+	*/
+	/*width: 100%;*/
+	font: menu;
+	font-size: 12px;
+	/* 
+	it is very important, if line-height not setted or setted 
+	in relative units scroll will be broken in firefox
+	*/
+	line-height: 16px;
+	overflow: hidden;
+}
+
+.ac_loading {
+	background: white url(<?php echo $vars['url']; ?>_graphics/indicator.gif') right center no-repeat;
+}
+
+.ac_odd {
+	background-color: #eee;
+}
+
+.ac_over {
+	background-color: #0A246A;
+	color: white;
+}
+
+.autocomplete {
+	width:300px;
+}
 
+.user_picker .user_picker_entry {
+	clear: both;
+	padding: 1em;
+}
\ No newline at end of file
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>
+
-- 
cgit v1.2.3