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 --- engine/lib/elgglib.php | 1 + engine/lib/input.php | 24 +++++++++++++++--------- 2 files changed, 16 insertions(+), 9 deletions(-) (limited to 'engine') diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php index 64bdf9276..5c9479f74 100644 --- a/engine/lib/elgglib.php +++ b/engine/lib/elgglib.php @@ -2028,6 +2028,7 @@ function elgg_init() { elgg_register_page_handler('ajax', 'elgg_ajax_page_handler'); elgg_register_js('elgg.autocomplete', 'js/lib/autocomplete.js'); + elgg_register_js('jquery.ui.autocomplete.html', 'vendors/jquery/jquery.ui.autocomplete.html.js'); elgg_register_js('elgg.userpicker', 'js/lib/userpicker.js'); elgg_register_js('elgg.friendspicker', 'js/lib/friends_picker.js'); elgg_register_js('jquery.easing', 'vendors/jquery/jquery.easing.1.3.packed.js'); diff --git a/engine/lib/input.php b/engine/lib/input.php index 127113205..e7c3a3d99 100644 --- a/engine/lib/input.php +++ b/engine/lib/input.php @@ -288,13 +288,19 @@ function input_livesearch_page_handler($page) { if ($entities = get_data($query)) { foreach ($entities as $entity) { + if (in_array('groups', $match_on)) { + $value = $entity->guid; + } else { + $value = $entity->username; + } + $result = array( 'type' => 'user', 'name' => $entity->name, 'desc' => $entity->username, - 'icon' => '', - 'guid' => $entity->guid + 'guid' => $entity->guid, + 'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)), + 'value' => $value, ); $results[$entity->name . rand(1, 100)] = $result; } @@ -319,9 +325,9 @@ function input_livesearch_page_handler($page) { 'type' => 'group', 'name' => $entity->name, 'desc' => strip_tags($entity->description), - 'icon' => '', - 'guid' => $entity->guid + 'guid' => $entity->guid, + 'label' => elgg_view_list_item(get_entity($entity->guid)), + 'value' => $entity->guid, ); $results[$entity->name . rand(1, 100)] = $result; @@ -350,9 +356,9 @@ function input_livesearch_page_handler($page) { 'type' => 'user', 'name' => $entity->name, 'desc' => $entity->username, - 'icon' => '', - 'guid' => $entity->guid + 'guid' => $entity->guid, + 'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)), + 'value' => $entity->username, ); $results[$entity->name . rand(1, 100)] = $result; } -- 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 'engine') 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 c6a14d6c6a04eeee2c126ea20ec0e9ee23489ef3 Mon Sep 17 00:00:00 2001 From: cash Date: Thu, 13 Oct 2011 21:31:27 -0400 Subject: displaying users that have been selected and added remove capability --- engine/lib/input.php | 39 ++++++++++++++++++++++++++++++++--- js/lib/userpicker.js | 40 +++++++++++++++++++++++++++--------- views/default/css/elements/forms.php | 15 ++++++-------- views/default/input/userpicker.php | 19 ++++++++--------- 4 files changed, 81 insertions(+), 32 deletions(-) (limited to 'engine') diff --git a/engine/lib/input.php b/engine/lib/input.php index ceda2be3b..f2cefc3e5 100644 --- a/engine/lib/input.php +++ b/engine/lib/input.php @@ -288,17 +288,26 @@ function input_livesearch_page_handler($page) { if ($entities = get_data($query)) { foreach ($entities as $entity) { + $entity = get_entity($entity->guid); + if (!$entity) { + continue; + } + if (in_array('groups', $match_on)) { $value = $entity->guid; } else { $value = $entity->username; } - $output = elgg_view_list_item(get_entity($entity->guid), array( + $output = elgg_view_list_item($entity, array( 'hover' => false, 'class' => 'elgg-autocomplete-item', )); + $icon = elgg_view_entity_icon($entity, 'tiny', array( + 'hover' => false, + )); + $result = array( 'type' => 'user', 'name' => $entity->name, @@ -306,6 +315,8 @@ function input_livesearch_page_handler($page) { 'guid' => $entity->guid, 'label' => $output, 'value' => $value, + 'icon' => $icon, + 'url' => $entity->getURL(), ); $results[$entity->name . rand(1, 100)] = $result; } @@ -326,11 +337,20 @@ 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( + $entity = get_entity($entity->guid); + if (!$entity) { + continue; + } + + $output = elgg_view_list_item($entity, array( 'hover' => false, 'class' => 'elgg-autocomplete-item', )); + $icon = elgg_view_entity_icon($entity, 'tiny', array( + 'hover' => false, + )); + $result = array( 'type' => 'group', 'name' => $entity->name, @@ -338,6 +358,8 @@ function input_livesearch_page_handler($page) { 'guid' => $entity->guid, 'label' => $output, 'value' => $entity->guid, + 'icon' => $icon, + 'url' => $entity->getURL(), ); $results[$entity->name . rand(1, 100)] = $result; @@ -362,11 +384,20 @@ 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( + $entity = get_entity($entity->guid); + if (!$entity) { + continue; + } + + $output = elgg_view_list_item($entity, array( 'hover' => false, 'class' => 'elgg-autocomplete-item', )); + $icon = elgg_view_entity_icon($entity, 'tiny', array( + 'hover' => false, + )); + $result = array( 'type' => 'user', 'name' => $entity->name, @@ -374,6 +405,8 @@ function input_livesearch_page_handler($page) { 'guid' => $entity->guid, 'label' => $output, 'value' => $entity->username, + 'icon' => $icon, + 'url' => $entity->getURL(), ); $results[$entity->name . rand(1, 100)] = $result; } diff --git a/js/lib/userpicker.js b/js/lib/userpicker.js index 780fa47c6..ece5a6951 100644 --- a/js/lib/userpicker.js +++ b/js/lib/userpicker.js @@ -24,7 +24,9 @@ elgg.userpicker.init = function() { select: elgg.userpicker.addUser }) }); -}; + + $('.elgg-userpicker-remove').live('click', elgg.userpicker.removeUser); +} /** * elgg.userpicker.userList is defined in the input/userpicker view @@ -35,24 +37,42 @@ elgg.userpicker.addUser = function(event, ui) { // do not allow users to be added multiple times if (!(info.guid in elgg.userpicker.userList)) { elgg.userpicker.userList[info.guid] = true; - var users = $(this).siblings('.elgg-user-picker-entries'); + var users = $(this).siblings('.elgg-user-picker-list'); var li = ''; + li += elgg.userpicker.renderUser(info); $('
  • ').html(li).appendTo(users); } $(this).val(''); event.preventDefault(); -}; +} + +elgg.userpicker.removeUser = function(event) { + $(this).closest('.elgg-user-picker-list > li').remove(); + event.preventDefault(); +} -elgg.userpicker.removeUser = function(link, guid) { - $(link).closest('.elgg-user-picker-entries > li').remove(); -}; +/** + * The html in this method has to remain sync'ed with input/userpicker + */ +elgg.userpicker.renderUser = function(info) { + + var deleteLink = "X"; + + var html = "
    "; + html += "
    " + info.icon + "
    "; + html += "
    " + deleteLink + "
    "; + html += "
    " + info.name + "
    "; + html += " li { + border-bottom: 1px dotted #ccc; } /* *************************************** diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php index 94129d1e0..87cc6e24a 100644 --- a/views/default/input/userpicker.php +++ b/views/default/input/userpicker.php @@ -24,18 +24,17 @@ elgg_load_js('elgg.userpicker'); function user_picker_add_user($user_id) { $user = get_entity($user_id); if (!$user || !($user instanceof ElggUser)) { - return FALSE; + return false; } - $icon = $user->getIconURL('tiny'); - - $code = '
  • '; - $code .= "
    "; - $code .= "
    X
    "; - $code .= "
    "; - $code .= "$user->name - $user->username"; - $code .= ""; + $icon = elgg_view_entity_icon($user, 'tiny', array('hover' => false)); + + $code = '
  • '; + $code .= "
    $icon
    "; + $code .= "
    X
    "; + $code .= "
    " . $user->name . "
    "; $code .= "
    "; + $code .= ""; $code .= '
    • '; return $code; @@ -64,7 +63,7 @@ foreach ($vars['value'] as $user_id) { -
    +