dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #29884
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 15170: Add search functionality to app dropdown menu
------------------------------------------------------------
revno: 15170
committer: Mark Polak <markpo@xxxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2014-05-06 11:20:18 +0200
message:
Add search functionality to app dropdown menu
modified:
dhis-2/dhis-services/dhis-service-i18n/src/main/resources/i18n_global.properties
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-services/dhis-service-i18n/src/main/resources/i18n_global.properties'
--- dhis-2/dhis-services/dhis-service-i18n/src/main/resources/i18n_global.properties 2014-04-29 08:09:43 +0000
+++ dhis-2/dhis-services/dhis-service-i18n/src/main/resources/i18n_global.properties 2014-05-06 09:20:18 +0000
@@ -829,6 +829,7 @@
app_draggable_description=Items are draggable to change their order, so it's easy to customize your favorite apps.
app_order_custom=My own order
app_order_name_alpha=Alphabetical
+app_search_placeholder=Search in apps
#-- calendars ------------------------------------------------------------------#
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css 2014-04-04 21:13:39 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/css/menu.css 2014-05-06 09:20:18 +0000
@@ -11,6 +11,30 @@
float: right;
}
+#apps-search {
+ width: 330px;
+ padding-right: 25px;
+}
+
+.apps-search-wrap {
+ position: relative;
+ width: 360px;
+}
+
+#apps-search-clear {
+ color: #404040;
+ cursor: pointer;
+ display: none;
+ font-size: 15px;
+ height: 15px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 5px;
+ top: 24%;
+ width: 20px;
+}
+
.menuDropDownBox
{
list-style-type: none;
@@ -351,18 +375,18 @@
.menu-drop-down-wrap
{
overflow: hidden;
- height: 330px;
+ height: 340px;
}
.menu-drop-down-scroll
{
- height: 330px;
+ height: 340px;
width: 384px;
overflow-y: auto;
overflow-x: hidden;
}
-#appsDropDown ul {
+#appsDropDown ul.menuDropDownBox {
height: 330px;
}
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js 2014-04-14 21:11:21 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.menu.js 2014-05-06 09:20:18 +0000
@@ -498,7 +498,96 @@
$(function () {
var menuTimeout = 500,
closeTimer = null,
- dropDownId = null;
+ dropDownId = null,
+ dropDownHooks = (function () {
+ var hook_library = {};
+
+ return {
+ get: function (id) {
+ if (hook_library[id] && hook_library[id].length > 0) {
+ return hook_library[id];
+ } else {
+ return [];
+ }
+ },
+ addHook: function (id, hook) {
+ hook_library[id] = hook_library[id] || [];
+ hook_library[id].push(hook);
+ }
+ };
+ })();
+
+ function performSearch() {
+ var menuItems = [],
+ searchFor = $('#apps-search').val().toLowerCase(),
+ searchMatches = [];
+
+ //Re-render all the apps
+ renderDropDownFavorites();
+
+ if (searchFor === '') {
+ $('#apps-search-clear').hide();
+ $('#apps-search').focus();
+ return;
+ }
+ $('#apps-search-clear').show();
+
+ //Get all the apps
+ menuItems = menu.getApps();
+
+ //Find the matches
+ menuItems.forEach(function (menuItem) {
+ var menuItemName = menuItem.name.toLowerCase(),
+ searchScore = menuItemName.indexOf(searchFor);
+
+ if (searchScore !== -1) {
+ menuItem.searchScore = searchScore;
+ searchMatches.push(menuItem);
+ }
+ });
+
+ //Order the search matches on occurance
+ searchMatches.sort(function (a, b) {
+ if (a.searchScore < b.searchScore)
+ return -1;
+ if (a.searchScore > b.searchScore)
+ return 1;
+ return 0;
+ });
+
+ //Remove all the apps
+ $(dropDownId).find('ul').find('li').remove();
+
+ //Add the apps that match the search back to the menu
+ $.tmpl( "appMenuItemTemplate", searchMatches).appendTo(dropDownId + ' ul');
+ }
+
+ function goToFirstMenuItem() {
+ var menuItemUrl = $(dropDownId).find('ul li').first().find('a').attr('href');
+ if (menuItemUrl) {
+ window.location = menuItemUrl;
+ }
+ }
+
+ dropDownHooks.addHook('appsDropDown', function () {
+ var dropDownId = this;
+ $(dropDownId).find('#apps-search').focus();
+
+ $('#apps-search').keyup(function (event) {
+ if ( event.which == 13 ) {
+ event.preventDefault();
+ goToFirstMenuItem();
+ } else {
+ performSearch();
+ }
+
+ });
+
+ $('#apps-search-clear').click(function () {
+ $('#apps-search').val("");
+ performSearch();
+ });
+ });
$.ajax('../dhis-web-commons/menu/getModules.action').success(function (data) {
if (typeof data.modules === 'object') {
@@ -540,7 +629,7 @@
self.parent().css('width', '360px');
self.parent().parent().css('width', '360px');
} else {
- if (self.innerHeight() === 330 ) {
+ if (self.innerHeight() === 340 ) {
moreAppsElement.hide();
self.parent().css('width', '384px');
self.parent().parent().css('width', '384px');
@@ -549,6 +638,13 @@
});
+ function executeDropDownHooks(dropDownId) {
+ var hooks = dropDownHooks.get(dropDownId);
+ hooks.forEach(function (hook) {
+ hook.call('#' + dropDownId);
+ });
+ }
+
function showDropDown( id )
{
var newDropDownId = "#" + id,
@@ -560,7 +656,6 @@
$(newDropDownId).css('top', '55px');
$(newDropDownId).css('left', Math.ceil(position.left - Math.ceil(parseInt($(newDropDownId).innerWidth(), 10) - 108)) + 'px');
-
if ( dropDownId != newDropDownId ) {
hideDropDown();
@@ -568,6 +663,8 @@
$( dropDownId ).show();
}
+
+ executeDropDownHooks(id);
}
function hideDropDown() {
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm 2014-05-05 19:00:41 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/main.vm 2014-05-06 09:20:18 +0000
@@ -121,11 +121,15 @@
</li>
</ul>
- <div id="appsDropDown" class="menuDropDownArea app-menu-dropdown appsMenuLink_menu" >
+ <div id="appsDropDown" class="menuDropDownArea app-menu-dropdown appsMenuLink_menu ui-front" >
<div class="caret-up-border"></div>
<div class="caret-up-background"></div>
<div class="menu-drop-down-wrap">
<div class="menu-drop-down-scroll">
+ <div class="apps-search-wrap">
+ <input id="apps-search" class="apps-search" type="text" placeholder="$i18n.getString( "app_search_placeholder" )">
+ <span id="apps-search-clear" class="fa fa-times-circle"></span>
+ </div>
<ul class="menuDropDownBox"><li class="menu-placeholder"><img src="../images/ajax-loader-bar.gif"></li></ul>
</div>
</div>
