From 3b791db69a23da39b64e5fc6bccb5064642a6624 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 13 Oct 2014 22:17:19 -0400 Subject: [PATCH] Fix for sub menu zindex, fix for hiding sub menus when menu is hidden if no active item inside, fix for rapid alt tabbing keeps menu open, fix for hiding during show --- src/definitions/modules/dropdown.js | 178 +++++++++++------- src/definitions/modules/dropdown.less | 1 + .../default/modules/dropdown.variables | 1 + 3 files changed, 111 insertions(+), 69 deletions(-) diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index ae997a4b1..9e8d9ceb2 100755 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -193,6 +193,63 @@ $.fn.dropdown = function(parameters) { $item = $menu.find(selector.item); }, + toggle: function() { + module.verbose('Toggling menu visibility'); + console.log(module.is.active()); + if( !module.is.active() ) { + module.show(); + } + else { + module.hide(); + } + }, + + show: function() { + module.debug('Checking if dropdown can show'); + if( !module.is.active() ) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + module.set.visible(); + }); + $.proxy(settings.onShow, element)(); + } + }, + + hide: function() { + if( module.is.active() ) { + module.debug('Hiding dropdown'); + module.animate.hide(function() { + module.remove.filteredItem(); + module.remove.visible(); + }); + $.proxy(settings.onHide, element)(); + } + }, + + hideOthers: function() { + module.verbose('Finding other dropdowns to hide'); + $allModules + .not($module) + .has(selector.menu + ':visible:not(.' + className.animating + ')') + .dropdown('hide') + ; + }, + + hideSubMenus: function() { + var + $subMenus = $menu.find(selector.menu), + $activeSubMenu = $subMenus.has(selector.item + '.' + className.active) + ; + console.log($subMenus.not($activeSubMenu)); + $subMenus + .not($activeSubMenu) + .removeClass(className.visible) + .removeAttr('style') + ; + }, + bind: { keyboardEvents: function() { module.debug('Binding keyboard events'); @@ -207,7 +264,7 @@ $.fn.dropdown = function(parameters) { if( module.is.searchSelection() ) { $module .on('focus' + eventNamespace, selector.search, module.event.searchFocus) - .on('blur' + eventNamespace, selector.search, module.event.blur) + .on('blur' + eventNamespace, selector.search, module.event.searchBlur) ; } else { @@ -319,10 +376,8 @@ $.fn.dropdown = function(parameters) { }) ; $filteredItems = $item.not($results); - $item - .removeClass(className.filtered) - .removeClass(className.selected) - ; + module.remove.filteredItem(); + module.remove.selectedItem(); $filteredItems .addClass(className.filtered) ; @@ -334,7 +389,7 @@ $.fn.dropdown = function(parameters) { }, event: { - // prevents focus from occuring on mousedown + // prevents focus callback from occuring on mousedown mousedown: function() { activated = true; }, @@ -346,15 +401,18 @@ $.fn.dropdown = function(parameters) { module.show(); } }, - searchFocus: function() { - activated = true; - module.show(); - }, blur: function(event) { if(!activated) { module.hide(); } }, + searchFocus: function() { + activated = true; + module.show(); + }, + searchBlur: function(event) { + module.hide(); + }, input: function(event) { var query = $search.val() @@ -854,10 +912,8 @@ $.fn.dropdown = function(parameters) { ? $selectedItem.html() : $selectedItem.text() ; - $item - .removeClass(className.active) - .removeClass(className.selected) - ; + module.remove.activeItem(); + module.remove.selectedItem(); $selectedItem .addClass(className.active) .addClass(className.selected) @@ -873,6 +929,15 @@ $.fn.dropdown = function(parameters) { }, visible: function() { $module.removeClass(className.visible); + }, + activeItem: function() { + $item.removeClass(className.active); + }, + filteredItem: function() { + $item.removeClass(className.filtered); + }, + selectedItem: function() { + $item.removeClass(className.selected); } }, @@ -895,6 +960,9 @@ $.fn.dropdown = function(parameters) { : $menu.is(':animated') || $menu.transition && $menu.transition('is animating') ; }, + active: function() { + return $module.hasClass(className.active); + }, visible: function($subMenu) { return ($subMenu) ? $subMenu.is(':visible') @@ -921,20 +989,29 @@ $.fn.dropdown = function(parameters) { animate: { show: function(callback, $subMenu) { var - $currentMenu = $subMenu || $menu + $currentMenu = $subMenu || $menu, + start = ($subMenu) + ? function() {} + : function() { + module.hideOthers(); + module.set.active(); + module.set.scrollPosition(); + } ; callback = callback || function(){}; + module.verbose('Doing menu show animation', $currentMenu); if( module.is.hidden($currentMenu) ) { - module.verbose('Doing menu show animation', $currentMenu); if(settings.transition == 'none') { $.proxy(callback, element)(); } else if($.fn.transition !== undefined && $module.transition('is supported')) { + console.log('showing menu'); $currentMenu .transition({ animation : settings.transition + ' in', duration : settings.duration, queue : true, + start : start, complete : function() { $.proxy(callback, element)(); } @@ -942,6 +1019,7 @@ $.fn.dropdown = function(parameters) { ; } else if(settings.transition == 'slide down') { + start(); $currentMenu .hide() .clearQueue() @@ -960,6 +1038,7 @@ $.fn.dropdown = function(parameters) { ; } else if(settings.transition == 'fade') { + start(); $currentMenu .hide() .clearQueue() @@ -976,7 +1055,16 @@ $.fn.dropdown = function(parameters) { }, hide: function(callback, $subMenu) { var - $currentMenu = $subMenu || $menu + $currentMenu = $subMenu || $menu, + start = ($subMenu) + ? function() {} + : function() { + if( module.can.click() ) { + module.unbind.intent(); + } + module.hideSubMenus(); + module.remove.active(); + } ; callback = callback || function(){}; if( module.is.visible($currentMenu) ) { @@ -991,6 +1079,7 @@ $.fn.dropdown = function(parameters) { animation : settings.transition + ' out', duration : settings.duration, queue : true, + start : start, complete : function() { $.proxy(callback, element)(); } @@ -998,6 +1087,7 @@ $.fn.dropdown = function(parameters) { ; } else if(settings.transition == 'slide down') { + start(); $currentMenu .show() .clearQueue() @@ -1016,6 +1106,7 @@ $.fn.dropdown = function(parameters) { ; } else if(settings.transition == 'fade') { + start(); $currentMenu .show() .clearQueue() @@ -1032,39 +1123,6 @@ $.fn.dropdown = function(parameters) { } }, - show: function() { - module.debug('Checking if dropdown can show'); - if( module.is.hidden() ) { - module.hideOthers(); - module.set.active(); - module.set.scrollPosition(); - module.animate.show(function() { - if( module.can.click() ) { - module.bind.intent(); - } - module.set.visible(); - }); - $.proxy(settings.onShow, element)(); - } - }, - - hide: function() { - if( !module.is.animated() && module.is.visible() ) { - module.debug('Hiding dropdown'); - if( module.can.click() ) { - module.unbind.intent(); - } - module.remove.active(); - module.animate.hide(function() { - $item - .removeClass(className.filtered) - ; - module.remove.visible(); - }); - $.proxy(settings.onHide, element)(); - } - }, - delay: { show: function() { module.verbose('Delaying show event to ensure user intent'); @@ -1078,25 +1136,6 @@ $.fn.dropdown = function(parameters) { } }, - hideOthers: function() { - module.verbose('Finding other dropdowns to hide'); - $allModules - .not($module) - .has(selector.menu + ':visible') - .dropdown('hide') - ; - }, - - toggle: function() { - module.verbose('Toggling menu visibility'); - if( module.is.hidden() ) { - module.show(); - } - else { - module.hide(); - } - }, - setting: function(name, value) { module.debug('Changing setting', name, value); if( $.isPlainObject(name) ) { @@ -1330,6 +1369,7 @@ $.fn.dropdown.settings = { className : { active : 'active', + animating : 'animating', disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index d245480e0..05d7dced3 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -185,6 +185,7 @@ right: @subMenuRight !important; margin: @subMenuMargin !important; border-radius: @subMenuBorderRadius !important; + z-index: @subMenuZIndex !important; } /* Hide Arrow */ diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index e47bfff5a..7b7053245 100755 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -92,6 +92,7 @@ @subMenuDistanceAway: -0.5em; @subMenuMargin: 0em 0em 0em @subMenuDistanceAway; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; +@subMenuZIndex: 21; /*------------------- b Types