diff options
Diffstat (limited to 'views/default/input/userpicker.php')
| -rw-r--r-- | views/default/input/userpicker.php | 175 |
1 files changed, 50 insertions, 125 deletions
diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php index 0bbf1eed9..8b64d7df5 100644 --- a/views/default/input/userpicker.php +++ b/views/default/input/userpicker.php @@ -4,147 +4,72 @@ * * @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 + * @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'); -if (!isset($vars['value']) || $vars['value'] === FALSE) { - $vars['value'] = elgg_get_sticky_value($vars['internalname']); -} - -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, - 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; +function user_picker_add_user($user_id) { + $user = get_entity($user_id); + if (!$user || !($user instanceof ElggUser)) { + return false; } - return r; - //return r.replace(new RegExp("(" + term + ")", "gi"), "<span class=\"user_picker_highlight\">$1</b>"); + + $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; } -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 + ' <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(''); +// loop over all values and prepare them so that "in" will work in javascript +$values = array(); +if (!is_array($vars['value'])) { + $vars['value'] = array($vars['value']); } - -function userPickerRemoveUser(link, guid) { - $(link).parent('.user_picker_entry').remove(); +foreach ($vars['value'] as $value) { + $values[$value] = TRUE; } -function userPickerGetSearchParams(e) { - if ($(e).parent().find('.all_users').attr('checked')) { - return {'match_on[]': 'friends'}; - } else { - return {'match_on[]': 'users'}; - } -} +// convert the values to a json-encoded list +$json_values = json_encode($values); -$(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) { + $user_list .= user_picker_add_user($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"></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> |