From 28da2f9dcb560687d4904e7629ad38049ed3188a Mon Sep 17 00:00:00 2001 From: cash Date: Thu, 6 Oct 2011 22:27:33 -0400 Subject: using html extension to jquery.ui autocomplete --- views/default/input/autocomplete.php | 20 ++++++++++++-------- views/default/user/default.php | 2 +- 2 files changed, 13 insertions(+), 9 deletions(-) (limited to 'views') diff --git a/views/default/input/autocomplete.php b/views/default/input/autocomplete.php index 421541e24..e58eb1ae8 100644 --- a/views/default/input/autocomplete.php +++ b/views/default/input/autocomplete.php @@ -8,7 +8,7 @@ * @todo This currently only works for ONE AUTOCOMPLETE TEXT FIELD on a page. * * @uses $vars['value'] Current value for the text input - * @uses $vars['match_on'] Array | str What to match on. all|array(groups|users|friends|subtype) + * @uses $vars['match_on'] Array | str What to match on. all|array(groups|users|friends) * @uses $vars['match_owner'] Bool. Match only entities that are owned by logged in user. * @uses $vars['class'] Additional CSS class */ @@ -26,15 +26,19 @@ $defaults = array( $vars = array_merge($defaults, $vars); -$ac_url_params = http_build_query(array( - 'match_on' => $vars['match_on'], - 'match_owner' => $vars['match_owner'], -)); - -unset($vars['match_on']); -unset($vars['match_owner']); +$params = array(); +if (isset($vars['match_on'])) { + $params['match_on'] = $vars['match_on']; + unset($vars['match_on']); +} +if (isset($vars['match_owner'])) { + $params['match_owner'] = $vars['match_owner']; + unset($vars['match_owner']); +} +$ac_url_params = http_build_query($params); elgg_load_js('elgg.autocomplete'); +elgg_load_js('jquery.ui.autocomplete.html'); ?> diff --git a/views/default/user/default.php b/views/default/user/default.php index c0c18f85f..96386c870 100644 --- a/views/default/user/default.php +++ b/views/default/user/default.php @@ -9,7 +9,7 @@ $entity = $vars['entity']; $size = elgg_extract('size', $vars, 'tiny'); -$icon = elgg_view_entity_icon($entity, $size); +$icon = elgg_view_entity_icon($entity, $size, $vars); // Simple XFN $rel = ''; -- cgit v1.2.3 From 7effddf7a260e9d731fd33914d6ea3121ddb1d84 Mon Sep 17 00:00:00 2001 From: cash Date: Wed, 12 Oct 2011 21:40:18 -0400 Subject: Simple theme for autocomplete --- engine/lib/input.php | 21 ++++++++++++++--- mod/groups/views/default/group/default.php | 2 +- views/default/css/elements/forms.php | 37 +++++++++++++++++++++++++++++- views/default/object/default.php | 2 +- views/default/user/default.php | 2 +- 5 files changed, 57 insertions(+), 7 deletions(-) (limited to 'views') diff --git a/engine/lib/input.php b/engine/lib/input.php index e7c3a3d99..ceda2be3b 100644 --- a/engine/lib/input.php +++ b/engine/lib/input.php @@ -294,12 +294,17 @@ function input_livesearch_page_handler($page) { $value = $entity->username; } + $output = elgg_view_list_item(get_entity($entity->guid), array( + 'hover' => false, + 'class' => 'elgg-autocomplete-item', + )); + $result = array( 'type' => 'user', 'name' => $entity->name, 'desc' => $entity->username, 'guid' => $entity->guid, - 'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)), + 'label' => $output, 'value' => $value, ); $results[$entity->name . rand(1, 100)] = $result; @@ -321,12 +326,17 @@ function input_livesearch_page_handler($page) { "; if ($entities = get_data($query)) { foreach ($entities as $entity) { + $output = elgg_view_list_item(get_entity($entity->guid), array( + 'hover' => false, + 'class' => 'elgg-autocomplete-item', + )); + $result = array( 'type' => 'group', 'name' => $entity->name, 'desc' => strip_tags($entity->description), 'guid' => $entity->guid, - 'label' => elgg_view_list_item(get_entity($entity->guid)), + 'label' => $output, 'value' => $entity->guid, ); @@ -352,12 +362,17 @@ function input_livesearch_page_handler($page) { if ($entities = get_data($query)) { foreach ($entities as $entity) { + $output = elgg_view_list_item(get_entity($entity->guid), array( + 'hover' => false, + 'class' => 'elgg-autocomplete-item', + )); + $result = array( 'type' => 'user', 'name' => $entity->name, 'desc' => $entity->username, 'guid' => $entity->guid, - 'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)), + 'label' => $output, 'value' => $entity->username, ); $results[$entity->name . rand(1, 100)] = $result; diff --git a/mod/groups/views/default/group/default.php b/mod/groups/views/default/group/default.php index fc91f90d0..6eae467c6 100644 --- a/mod/groups/views/default/group/default.php +++ b/mod/groups/views/default/group/default.php @@ -34,5 +34,5 @@ if ($vars['full_view']) { $params = $params + $vars; $list_body = elgg_view('group/elements/summary', $params); - echo elgg_view_image_block($icon, $list_body); + echo elgg_view_image_block($icon, $list_body, $vars); } diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php index 83ec2f602..fa90f2bfd 100644 --- a/views/default/css/elements/forms.php +++ b/views/default/css/elements/forms.php @@ -235,9 +235,43 @@ input[type="radio"] { } /* *************************************** - USER PICKER + AUTOCOMPLETE *************************************** */ + +.ui-autocomplete { + position: absolute; + cursor: default; +} +.elgg-autocomplete-item .elgg-body { + max-width: 600px; +} +.ui-autocomplete { + background-color: white; + border: 1px solid #ccc; + overflow: hidden; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.ui-autocomplete .ui-menu-item { + padding: 0px 4px; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.ui-autocomplete .ui-menu-item:hover { + background-color: #eee; +} +.ui-autocomplete a:hover { + text-decoration: none; + color: #4690D6; +} +/* *************************************** + USER PICKER +*************************************** */ .user-picker .user-picker-entry { clear:both; height:25px; @@ -248,6 +282,7 @@ input[type="radio"] { .user-picker-entry .elgg-button-delete { margin-right:10px; } + /* *************************************** DATE PICKER **************************************** */ diff --git a/views/default/object/default.php b/views/default/object/default.php index a50f19387..62c8197f9 100644 --- a/views/default/object/default.php +++ b/views/default/object/default.php @@ -45,4 +45,4 @@ $params = array( $params = $params + $vars; $body = elgg_view('object/elements/summary', $params); -echo elgg_view_image_block($icon, $body); +echo elgg_view_image_block($icon, $body, $vars); diff --git a/views/default/user/default.php b/views/default/user/default.php index 96386c870..6c84e84ad 100644 --- a/views/default/user/default.php +++ b/views/default/user/default.php @@ -53,5 +53,5 @@ if (elgg_get_context() == 'gallery') { $list_body = elgg_view('user/elements/summary', $params); - echo elgg_view_image_block($icon, $list_body); + echo elgg_view_image_block($icon, $list_body, $vars); } -- cgit v1.2.3 From 7e23a3bd6382190084f136ed5aeb6b910ae00eee Mon Sep 17 00:00:00 2001 From: cash Date: Thu, 13 Oct 2011 20:45:40 -0400 Subject: got the friends option working for user picker --- js/lib/userpicker.js | 53 ++++++++++---------------------------- views/default/input/userpicker.php | 3 ++- 2 files changed, 16 insertions(+), 40 deletions(-) (limited to 'views') diff --git a/js/lib/userpicker.js b/js/lib/userpicker.js index 826bf21a0..780fa47c6 100644 --- a/js/lib/userpicker.js +++ b/js/lib/userpicker.js @@ -1,14 +1,14 @@ elgg.provide('elgg.userpicker'); elgg.userpicker.init = function() { + // binding autocomplete. // doing this as an each so we can pass this to functions. $('.elgg-input-user-picker').each(function() { - - var _this = this; - + $(this).autocomplete({ source: function(request, response) { + var params = elgg.userpicker.getSearchParams(this); elgg.get('livesearch', { @@ -20,53 +20,28 @@ elgg.userpicker.init = function() { }); }, minLength: 2, + html: "html", select: elgg.userpicker.addUser }) - - //@todo This seems convoluted - .data("autocomplete")._renderItem = elgg.userpicker.formatItem; }); }; -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 $("
  • ") - .data("item.autocomplete", item) - .append(r) - .appendTo(ul); -}; - +/** + * elgg.userpicker.userList is defined in the input/userpicker view + */ 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 + '
    X
    ' - + ''; + var users = $(this).siblings('.elgg-user-picker-entries'); + var li = ''; $('
  • ').html(li).appendTo(users); - - $(this).val(''); } + + $(this).val(''); + event.preventDefault(); }; elgg.userpicker.removeUser = function(link, guid) { @@ -74,7 +49,7 @@ elgg.userpicker.removeUser = function(link, guid) { }; elgg.userpicker.getSearchParams = function(e) { - if ($(e).closest('.elgg-user-picker').find('[name=match_on]').attr('checked')) { + if (e.element.siblings('[name=match_on]').attr('checked')) { return {'match_on[]': 'friends', 'term' : e.term}; } else { return {'match_on[]': 'users', 'term' : e.term}; diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php index b852d24fc..94129d1e0 100644 --- a/views/default/input/userpicker.php +++ b/views/default/input/userpicker.php @@ -62,7 +62,8 @@ foreach ($vars['value'] as $user_id) { ?>
    - + +
    \ No newline at end of file -- cgit v1.2.3