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 (file)
index 0000000..d978b9c
--- /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 c6ecb1688ffaf406fe2f9d83b11150a9805fddaa..18c71a7f3fd4f5dcadbb88e2e101d9477e00567b 100644 (file)
--- 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