aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/lib/userpicker.js90
-rw-r--r--views/default/input/userpicker.php148
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