diff options
Diffstat (limited to 'views/default/input/userpicker.php')
| -rw-r--r-- | views/default/input/userpicker.php | 178 |
1 files changed, 30 insertions, 148 deletions
diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php index 85fbd70f1..8b64d7df5 100644 --- a/views/default/input/userpicker.php +++ b/views/default/input/userpicker.php @@ -5,45 +5,43 @@ * @package Elgg * @subpackage Core * - * @uses $vars['value'] The current value, if any - * @uses $vars['internalname'] The name of the input field + * @uses $vars['value'] Array of user guids for already selected users or null * + * The name of the hidden fields is members[] * - * pops up defaulted to lazy load friends lists in paginated alphabetical order. - * upon + * @warning Only a single input/userpicker is supported per web page. * - * 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. + * Defaults to lazy load user lists in alphabetical order. User needs + * to type two characters before seeing the user popup list. * + * As users are selected they move down to a "users" box. + * When this happens, a hidden input is created with the + * name of members[] and a value of the GUID. */ -global $user_picker_js_sent; +elgg_load_js('elgg.userpicker'); +elgg_load_js('jquery.ui.autocomplete.html'); function user_picker_add_user($user_id) { $user = get_entity($user_id); if (!$user || !($user instanceof ElggUser)) { - return FALSE; + return false; } - $icon = $user->getIcon('tiny'); - - $code = '<li class="user-picker-entry">'; - $code .= "<img class=\"livesearch_icon\" src=\"$icon\" />"; - $code .= "$user->name - $user->username"; - $code .= '<div class="delete-button">'; - $code .= "<a onclick=\"userPickerRemoveUser(this, $user_id)\"><strong>X</strong></a>"; - $code .= '</div>'; + $icon = elgg_view_entity_icon($user, 'tiny', array('use_hover' => false)); + + // this html must be synced with the userpicker.js library + $code = '<li><div class="elgg-image-block">'; + $code .= "<div class='elgg-image'>$icon</div>"; + $code .= "<div class='elgg-image-alt'><a href='#' class='elgg-userpicker-remove'>X</a></div>"; + $code .= "<div class='elgg-body'>" . $user->name . "</div>"; + $code .= "</div>"; $code .= "<input type=\"hidden\" name=\"members[]\" value=\"$user_id\">"; $code .= '</li>'; return $code; } -if (!isset($vars['value']) || $vars['value'] === FALSE) { - $vars['value'] = elgg_get_sticky_value($vars['internalname']); -} - // loop over all values and prepare them so that "in" will work in javascript $values = array(); if (!is_array($vars['value'])) { @@ -56,123 +54,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 --> -<script language="javascript" 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) { @@ -180,14 +61,15 @@ 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-list"><?php echo $user_list; ?></ul> </div> +<script type="text/javascript"> + // @todo grab the values in the init function rather than using inline JS + elgg.userpicker.userList = <?php echo $json_values ?>; +</script> |