Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Menu: Refactoring the collapseAll to deal with some issues selecting …
…- Updating unit tests. Thanks @kborchers
  • Loading branch information
gnarf committed Sep 22, 2011
1 parent cb372b7 commit 34a0479
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 24 deletions.
8 changes: 7 additions & 1 deletion tests/unit/menu/menu_events.js
Expand Up @@ -99,7 +99,7 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
}); });


asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() { asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() {
expect( 4 ); expect( 5 );
var $menu = $( "#menu5" ).menu( { items: "div" } ); var $menu = $( "#menu5" ).menu( { items: "div" } );


$menu.children( ":nth-child(7)" ).trigger( "mouseover" ); $menu.children( ":nth-child(7)" ).trigger( "mouseover" );
Expand All @@ -110,13 +110,19 @@ asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function
equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" ); equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" );
$menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" ); $menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" );
equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );

$menu.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN });
ok( $menu.find( ".ui-state-active" ).is( "#menu5 :nth-child(7) a" ),
"down keypress selected an item from the first submenu" );

$menu.trigger( "mouseleave" ); $menu.trigger( "mouseleave" );
equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
start(); start();
}, 400); }, 400);
}, 200); }, 200);
}); });



test("handle keyboard navigation on menu without scroll and without submenus", function() { test("handle keyboard navigation on menu without scroll and without submenus", function() {
expect(12); expect(12);
var element = $('#menu1').menu({ var element = $('#menu1').menu({
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/menu/menu_test_helpers.js
Expand Up @@ -5,7 +5,7 @@ function menu_log( message, clear ) {
if ( message === undefined ) { if ( message === undefined ) {
message = $( "#log" ).data( "lastItem" ); message = $( "#log" ).data( "lastItem" );
} }
$( "#log" ).prepend( message + "," ); $( "#log" ).prepend( $.trim( message ) + "," );
} }


function menu_click( menu, item ) { function menu_click( menu, item ) {
Expand Down
46 changes: 24 additions & 22 deletions ui/jquery.ui.menu.js
Expand Up @@ -62,13 +62,19 @@ $.widget( "ui.menu", {
target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
this.focus( event, target ); this.focus( event, target );
}, },
"mouseleave": "_mouseleave", "mouseleave": "collapseAll",
"mouseleave .ui-menu": "_mouseleave", "mouseleave .ui-menu": "collapseAll",
"mouseout .ui-menu-item": "blur", "mouseout .ui-menu-item": "blur",
"focus": function( event ) { "focus": function( event ) {
this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) ); this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
}, },
"blur": "collapseAll" blur: function( event ) {
this._delay( function() {
if ( ! $.contains( this.element[0], document.activeElement ) ) {
this.collapseAll( event );
}
}, 0);
}
}); });


this.refresh(); this.refresh();
Expand Down Expand Up @@ -341,25 +347,25 @@ $.widget( "ui.menu", {
.position( position ); .position( position );
}, },


collapseAll: function( event ) { collapseAll: function( event, all ) {
var currentMenu = false;
if ( event ) { // if we were passed an event, look for the submenu that contains the event
var target = $( event.target ); var currentMenu = all ? this.element :
if ( target.is( "ui.menu" ) ) { $( event && event.target ).closest( this.element.find( ".ui-menu" ) );
currentMenu = target;
} else if ( target.closest( ".ui-menu" ).length ) { // if we found no valid submenu ancestor, use the main menu to close all sub menus anyway
currentMenu = target.closest( ".ui-menu" ); if ( !currentMenu.length ) {
} currentMenu = this.element;
} }


this._close( currentMenu ); this._close( currentMenu );


if ( !currentMenu ) { this.blur( event );
this.blur( event ); this.activeMenu = currentMenu;
this.activeMenu = this.element;
}
}, },


// With no arguments, closes the currently active menu - if nothing is active
// it closes all menus. If passed an argument, it will search for menus BELOW
_close: function( startMenu ) { _close: function( startMenu ) {
if ( !startMenu ) { if ( !startMenu ) {
startMenu = this.active ? this.active.parent() : this.element; startMenu = this.active ? this.active.parent() : this.element;
Expand Down Expand Up @@ -487,17 +493,13 @@ $.widget( "ui.menu", {
return this.element.height() < this.element.prop( "scrollHeight" ); return this.element.height() < this.element.prop( "scrollHeight" );
}, },


_mouseleave: function( event ) {
this.collapseAll( event );
this.blur();
},

select: function( event ) { select: function( event ) {

// save active reference before collapseAll triggers blur // save active reference before collapseAll triggers blur
var ui = { var ui = {
item: this.active item: this.active
}; };
this.collapseAll( event ); this.collapseAll( event, true );
this._trigger( "select", event, ui ); this._trigger( "select", event, ui );
} }
}); });
Expand Down

0 comments on commit 34a0479

Please sign in to comment.