Skip to content

Commit

Permalink
Menu: Add support for structures other than UL/LI plus visual and uni…
Browse files Browse the repository at this point in the history 
…t tests
  • Loading branch information
@kborchers
kborchers committed Sep 14, 2011
1 parent cedac75 commit 9e617bb
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 15 deletions.
38 changes: 38 additions & 0 deletions tests/unit/menu/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,44 @@ <h2 id="qunit-userAgent"></h2>
<li class="foo"><a class="foo" href="#">Amesville</a></li>
</ul>

<div id="menu5">
<blockquote><a href="#">Aberdeen</a></blockquote>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Adamsville</a></blockquote>
<blockquote><a href="#">Addyston</a></blockquote>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote>
<a href="#">Salzburg</a>
<div>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote><a href="#">Perch</a></blockquote>
</div>
</blockquote>
</div>

<div id="log"></div>

</div>
Expand Down
1 change: 1 addition & 0 deletions tests/unit/menu/menu_defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ commonWidgetTests( "menu", {
my: "left top",
at: "right top"
},
items: "ul",

// callbacks
create: null
Expand Down
57 changes: 57 additions & 0 deletions tests/unit/menu/menu_events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,23 @@ test("handle click on menu", function() {
equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
});

test("handle click on custom item menu", function() {
expect(1);
var ac = $('#menu5').menu({
select: function(event, ui) {
menu_log();
},
items: "div"
});
menu_log("click",true);
menu_click($('#menu5'),"1");
menu_log("afterclick");
menu_click( ac,"2");
menu_click($('#menu5'),"3");
menu_click( ac,"1");
equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid.");
});

test( "handle blur: click", function() {
expect( 4 );
var $menu = $( "#menu1" ).menu({
Expand All @@ -41,6 +58,27 @@ test( "handle blur: click", function() {
$("#remove").remove();
});

test( "handle blur on custom item menu: click", function() {
expect( 4 );
var $menu = $( "#menu5" ).menu({
focus: function( event, ui ) {
equal( event.originalEvent.type, "click", "focus triggered 'click'" );
equal( event.type, "menufocus", "focus event.type is 'menufocus'" );

},
blur: function( event, ui ) {
equal( event.originalEvent.type, "click", "blur triggered 'click'" );
equal( event.type, "menublur", "blur event.type is 'menublur'" );
},
items: "div"
});

menu_click($('#menu5'),"1");
$( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" );

$("#remove").remove();
});

asyncTest( "handle submenu auto collapse: mouseleave", function() {
expect( 4 );
var $menu = $( "#menu2" ).menu();
Expand All @@ -60,6 +98,25 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
}, 200);
});

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

$menu.children( ":nth-child(7)" ).trigger( "mouseover" );
setTimeout(function() {
equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" );
$menu.children( ":nth-child(7)" ).find( "div:first" ).children( ":first" ).trigger( "mouseover" );
setTimeout(function() {
equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" );
$menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" );
equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" );
$menu.trigger( "mouseleave" );
equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" );
start();
}, 400);
}, 200);
});

test("handle keyboard navigation on menu without scroll and without submenus", function() {
expect(12);
var element = $('#menu1').menu({
Expand Down
4 changes: 2 additions & 2 deletions tests/unit/menu/menu_test_helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ function menu_log( message, clear ) {

function menu_click( menu, item ) {
$( "#log" ).data( "lastItem", item );
menu.find( "li:eq(" + item + ") a" ).trigger( "click" );
}
menu.children( ":eq(" + item + ")" ).find( "a:first" ).trigger( "click" );
}
102 changes: 100 additions & 2 deletions tests/visual/menu/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,22 @@
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
});
}

$("#menu5").menu({
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
},
items: "div"
});

$("#menu6").menu({
select: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
},
items: ".menuElement"
});
}

var menus = $("#menu1, #menu2, #menu3, .menu4");
create();

Expand All @@ -42,6 +56,9 @@
body { font-size:62.5%; }
.ui-menu { width: 200px; margin-bottom: 2em; }
.menu4 { height: 200px; overflow: auto; }
.address-item { border-bottom: 1px solid #999; }
.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
</style>
</head>
<body>
Expand Down Expand Up @@ -173,6 +190,87 @@
<li><a href="#">Amesville</a></li>
</ul>

<div id="menu5">
<blockquote><a href="#">Aberdeen</a></blockquote>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Adamsville</a></blockquote>
<blockquote><a href="#">Addyston</a></blockquote>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote>
<a href="#">Salzburg</a>
<div>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote>
<a href="#">Delphi</a>
<div>
<blockquote><a href="#">Ada</a></blockquote>
<blockquote><a href="#">Saarland</a></blockquote>
<blockquote><a href="#">Salzburg</a></blockquote>
</div>
</blockquote>
<blockquote><a href="#">Perch</a></blockquote>
</div>
</blockquote>
</div>

<div class="menuElement" id="menu6">
<div class="address-item">
<a href="#">
<span class="address-header">John Doe</span>
<span class="address-content">78 West Main St Apt 3A</span>
<span class="address-content">Bloomsburg, PA 12345</span>
</a>
</div>
<div class="address-item">
<a href="#">
<span class="address-header">Jane Doe</span>
<span class="address-content">78 West Main St Apt 3A</span>
<span class="address-content">Bloomsburg, PA 12345</span>
</a>
</div>
<div class="address-item">
<a href="#">
<span class="address-header">James Doe</span>
<span class="address-content">78 West Main St Apt 3A</span>
<span class="address-content">Bloomsburg, PA 12345</span>
</a>
</div>
<div class="address-item">
<a href="#">
<span class="address-header">Jenny Doe</span>
<span class="address-content">78 West Main St Apt 3A</span>
<span class="address-content">Bloomsburg, PA 12345</span>
</a>
</div>
<div class="address-item">
<a href="#">
<span class="address-header">John Doe</span>
<span class="address-content">78 West Main St Apt 3A</span>
<span class="address-content">Bloomsburg, PA 12345</span>
</a>
<div class="menuElement">
<div><a href="#">Ada</a></div>
<div><a href="#">Saarland</a></div>
<div><a href="#">Salzburg</a></div>
</div>
</div>
</div>

<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
Expand All @@ -182,4 +280,4 @@
<button id="toggle-destroy">Destroy / Create</button>

</body>
</html>
</html>
23 changes: 12 additions & 11 deletions ui/jquery.ui.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ $.widget( "ui.menu", {
defaultElement: "<ul>",
delay: 150,
options: {
items: "ul",
position: {
my: "left top",
at: "right top"
Expand Down Expand Up @@ -194,7 +195,7 @@ $.widget( "ui.menu", {
//destroy (sub)menus
this.element
.removeAttr( "aria-activedescendant" )
.find( "ul" )
.find( ".ui-menu" )
.andSelf()
.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.removeAttr( "role" )
Expand All @@ -221,7 +222,7 @@ $.widget( "ui.menu", {

refresh: function() {
// initialize nested menus
var submenus = this.element.find( "ul:not(.ui-menu)" )
var submenus = this.element.find( this.options.items + ":not( .ui-menu )" )
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.attr( "role", "menu" )
.hide()
Expand All @@ -230,7 +231,7 @@ $.widget( "ui.menu", {

// don't refresh list items that are already adapted
var menuId = this.menuId;
submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" )
submenus.add( this.element ).children( ":not( .ui-menu-item ):has( a )" )
.addClass( "ui-menu-item" )
.attr( "role", "presentation" )
.children( "a" )
Expand Down Expand Up @@ -273,16 +274,16 @@ $.widget( "ui.menu", {
.children( "a" )
.addClass( "ui-state-focus" )
.end();
this.element.attr( "aria-activedescendant", this.active.children("a").attr("id") );
this.element.attr( "aria-activedescendant", this.active.children( "a" ).attr( "id" ) );

// highlight active parent menu item, if any
this.active.parent().closest(".ui-menu-item").children("a:first").addClass("ui-state-active");
this.active.parent().closest( ".ui-menu-item" ).children( "a:first" ).addClass( "ui-state-active" );

this.timer = this._delay( function() {
this._close();
}, this.delay );

var nested = $( ">ul", item );
var nested = $( "> .ui-menu", item );
if ( nested.length && ( /^mouse/.test( event.type ) ) ) {
this._startOpening(nested);
}
Expand Down Expand Up @@ -353,19 +354,19 @@ $.widget( "ui.menu", {

this._close( currentMenu );

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

_close: function( startMenu ) {
if( !startMenu ) {
if ( !startMenu ) {
startMenu = this.active ? this.active.parent() : this.element;
}

startMenu
.find( "ul" )
.find( ".ui-menu" )
.hide()
.attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" )
Expand All @@ -375,7 +376,7 @@ $.widget( "ui.menu", {
},

collapse: function( event ) {
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
var newItem = this.active && this.active.parent().closest( ".ui-menu-item", this.element );
if ( newItem && newItem.length ) {
this._close();
this.focus( event, newItem );
Expand All @@ -384,7 +385,7 @@ $.widget( "ui.menu", {
},

expand: function( event ) {
var newItem = this.active && this.active.children("ul").children("li").first();
var newItem = this.active && this.active.children( ".ui-menu " ).children( ".ui-menu-item" ).first();

if ( newItem && newItem.length ) {
this._open( newItem.parent() );
Expand Down

0 comments on commit 9e617bb

Please sign in to comment.