lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.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

1.0
jlukic 10 years ago
parent
be5786d396
commit
3b791db69a
3 changed files with 111 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split 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);
},
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',

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

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

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

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

Write Preview
Loading…
Cancel
Save