aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorewinslow <ewinslow@36083f99-b078-4883-b0ff-0f9b5a30f544>2011-02-15 00:38:06 +0000
committerewinslow <ewinslow@36083f99-b078-4883-b0ff-0f9b5a30f544>2011-02-15 00:38:06 +0000
commita13409117dad65a263cd98963aec5156b6b8e068 (patch)
tree51ca5e8f2d76bcd9ffa3bd5d6f11f92913f1aeac /views
parentc78c35688baacbd2b933a8248cec574d2f63987b (diff)
downloadelgg-a13409117dad65a263cd98963aec5156b6b8e068.tar.gz
elgg-a13409117dad65a263cd98963aec5156b6b8e068.tar.bz2
Refs #2102: Replace input/userpicker with jQuery UI autocomplete
git-svn-id: http://code.elgg.org/elgg/trunk@8242 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'views')
-rw-r--r--views/default/input/userpicker.php148
1 files changed, 14 insertions, 134 deletions
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