diff options
| -rw-r--r-- | js/lib/userpicker.js | 90 | ||||
| -rw-r--r-- | views/default/input/userpicker.php | 148 |
2 files changed, 104 insertions, 134 deletions
diff --git a/js/lib/userpicker.js b/js/lib/userpicker.js new file mode 100644 index 000000000..d978b9c82 --- /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 c6ecb1688..18c71a7f3 100644 --- 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 |