<?php /** * User Picker. Sends an array of user guids. * * @package Elgg * @subpackage Core * * @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; function user_picker_add_user($user_id) { $user = get_entity($user_id); if (!$user || !($user instanceof ElggUser)) { return FALSE; } $icon = $user->getIconURL('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>'; $code .= "<input type=\"hidden\" name=\"members[]\" value=\"$user_id\">"; $code .= '</li>'; return $code; } // 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']); } foreach ($vars['value'] as $value) { $values[$value] = TRUE; } // convert the values to a json-encoded list $json_values = json_encode($values); if (!$user_picker_js_sent) { ?> <!-- User picker JS --> <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) { $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"><?php echo $user_list; ?></ul> </div>