richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/1177/head
jlukic 10 years ago
parent
be5786d396
commit
3b791db69a
3 changed files with 111 additions and 69 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 178
      src/definitions/modules/dropdown.js
  2. 1
      src/definitions/modules/dropdown.less
  3. 1
      src/themes/packages/default/modules/dropdown.variables

178
src/definitions/modules/dropdown.js
View File

@ -193,6 +193,63 @@ $.fn.dropdown = function(parameters) {
$item = $menu.find(selector.item); $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: { bind: {
keyboardEvents: function() { keyboardEvents: function() {
module.debug('Binding keyboard events'); module.debug('Binding keyboard events');
@ -207,7 +264,7 @@ $.fn.dropdown = function(parameters) {
if( module.is.searchSelection() ) { if( module.is.searchSelection() ) {
$module $module
.on('focus' + eventNamespace, selector.search, module.event.searchFocus) .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 { else {
@ -319,10 +376,8 @@ $.fn.dropdown = function(parameters) {
}) })
; ;
$filteredItems = $item.not($results); $filteredItems = $item.not($results);
$item
.removeClass(className.filtered)
.removeClass(className.selected)
;
module.remove.filteredItem();
module.remove.selectedItem();
$filteredItems $filteredItems
.addClass(className.filtered) .addClass(className.filtered)
; ;
@ -334,7 +389,7 @@ $.fn.dropdown = function(parameters) {
}, },
event: { event: {
// prevents focus from occuring on mousedown
// prevents focus callback from occuring on mousedown
mousedown: function() { mousedown: function() {
activated = true; activated = true;
}, },
@ -346,15 +401,18 @@ $.fn.dropdown = function(parameters) {
module.show(); module.show();
} }
}, },
searchFocus: function() {
activated = true;
module.show();
},
blur: function(event) { blur: function(event) {
if(!activated) { if(!activated) {
module.hide(); module.hide();
} }
}, },
searchFocus: function() {
activated = true;
module.show();
},
searchBlur: function(event) {
module.hide();
},
input: function(event) { input: function(event) {
var var
query = $search.val() query = $search.val()
@ -854,10 +912,8 @@ $.fn.dropdown = function(parameters) {
? $selectedItem.html() ? $selectedItem.html()
: $selectedItem.text() : $selectedItem.text()
; ;
$item
.removeClass(className.active)
.removeClass(className.selected)
;
module.remove.activeItem();
module.remove.selectedItem();
$selectedItem $selectedItem
.addClass(className.active) .addClass(className.active)
.addClass(className.selected) .addClass(className.selected)
@ -873,6 +929,15 @@ $.fn.dropdown = function(parameters) {
}, },
visible: function() { visible: function() {
$module.removeClass(className.visible); $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') : $menu.is(':animated') || $menu.transition && $menu.transition('is animating')
; ;
}, },
active: function() {
return $module.hasClass(className.active);
},
visible: function($subMenu) { visible: function($subMenu) {
return ($subMenu) return ($subMenu)
? $subMenu.is(':visible') ? $subMenu.is(':visible')
@ -921,20 +989,29 @@ $.fn.dropdown = function(parameters) {
animate: { animate: {
show: function(callback, $subMenu) { show: function(callback, $subMenu) {
var var
$currentMenu = $subMenu || $menu
$currentMenu = $subMenu || $menu,
start = ($subMenu)
? function() {}
: function() {
module.hideOthers();
module.set.active();
module.set.scrollPosition();
}
; ;
callback = callback || function(){}; callback = callback || function(){};
module.verbose('Doing menu show animation', $currentMenu);
if( module.is.hidden($currentMenu) ) { if( module.is.hidden($currentMenu) ) {
module.verbose('Doing menu show animation', $currentMenu);
if(settings.transition == 'none') { if(settings.transition == 'none') {
$.proxy(callback, element)(); $.proxy(callback, element)();
} }
else if($.fn.transition !== undefined && $module.transition('is supported')) { else if($.fn.transition !== undefined && $module.transition('is supported')) {
console.log('showing menu');
$currentMenu $currentMenu
.transition({ .transition({
animation : settings.transition + ' in', animation : settings.transition + ' in',
duration : settings.duration, duration : settings.duration,
queue : true, queue : true,
start : start,
complete : function() { complete : function() {
$.proxy(callback, element)(); $.proxy(callback, element)();
} }
@ -942,6 +1019,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
else if(settings.transition == 'slide down') { else if(settings.transition == 'slide down') {
start();
$currentMenu $currentMenu
.hide() .hide()
.clearQueue() .clearQueue()
@ -960,6 +1038,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
else if(settings.transition == 'fade') { else if(settings.transition == 'fade') {
start();
$currentMenu $currentMenu
.hide() .hide()
.clearQueue() .clearQueue()
@ -976,7 +1055,16 @@ $.fn.dropdown = function(parameters) {
}, },
hide: function(callback, $subMenu) { hide: function(callback, $subMenu) {
var 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(){}; callback = callback || function(){};
if( module.is.visible($currentMenu) ) { if( module.is.visible($currentMenu) ) {
@ -991,6 +1079,7 @@ $.fn.dropdown = function(parameters) {
animation : settings.transition + ' out', animation : settings.transition + ' out',
duration : settings.duration, duration : settings.duration,
queue : true, queue : true,
start : start,
complete : function() { complete : function() {
$.proxy(callback, element)(); $.proxy(callback, element)();
} }
@ -998,6 +1087,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
else if(settings.transition == 'slide down') { else if(settings.transition == 'slide down') {
start();
$currentMenu $currentMenu
.show() .show()
.clearQueue() .clearQueue()
@ -1016,6 +1106,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
else if(settings.transition == 'fade') { else if(settings.transition == 'fade') {
start();
$currentMenu $currentMenu
.show() .show()
.clearQueue() .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: { delay: {
show: function() { show: function() {
module.verbose('Delaying show event to ensure user intent'); 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) { setting: function(name, value) {
module.debug('Changing setting', name, value); module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) { if( $.isPlainObject(name) ) {
@ -1330,6 +1369,7 @@ $.fn.dropdown.settings = {
className : { className : {
active : 'active', active : 'active',
animating : 'animating',
disabled : 'disabled', disabled : 'disabled',
dropdown : 'ui dropdown', dropdown : 'ui dropdown',
filtered : 'filtered', filtered : 'filtered',

1
src/definitions/modules/dropdown.less
View File

@ -185,6 +185,7 @@
right: @subMenuRight !important; right: @subMenuRight !important;
margin: @subMenuMargin !important; margin: @subMenuMargin !important;
border-radius: @subMenuBorderRadius !important; border-radius: @subMenuBorderRadius !important;
z-index: @subMenuZIndex !important;
} }
/* Hide Arrow */ /* Hide Arrow */

1
src/themes/packages/default/modules/dropdown.variables
View File

@ -92,6 +92,7 @@
@subMenuDistanceAway: -0.5em; @subMenuDistanceAway: -0.5em;
@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; @subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
@subMenuZIndex: 21;
/*------------------- /*-------------------
b Types b Types

Write Preview
Loading…
Cancel
Save