Added rough version of a new user picker.

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

diff --git a/views/default/css.php b/views/default/css.php
index 2554073ec28c230fda4e5a85a7a58bb8607f37f9..706c5fe50e1a9f979a0123bbc687f8a1e1e54cce 100644 (file)
--- 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 (file)
index 0000000..8f26b89
--- /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>
+