Skip to content
Permalink
Browse files

Menu: Better handling of divider elements and menu items without anch…

…ors.
  • Loading branch information...
kborchers committed May 25, 2012
1 parent f63bb4f commit fe7ca1f1c3922a301169256ed0614c5529e40454
@@ -88,8 +88,11 @@ <h2 id="qunit-userAgent"></h2>
<a href="#">Delphi</a>
<ul>
<li class="foo"><a class="foo" href="#">Ada</a></li>
<li> - </li>
<li class="foo"><a class="foo" href="#">Saarland</a></li>
<li></li>
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
<li>&ndash;</li>
</ul>
</li>
<li class="foo"><a class="foo" href="#">Perch</a></li>
@@ -315,16 +315,27 @@ asyncTest("handle keyboard navigation on menu without scroll and with submenus",
equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)");

log("keydown",true);
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
setTimeout( menukeyboard5, 50 );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( $("#log").html(), "0,4,2,0,1,0,6,5,keydown,", "Keydown skip dividers and items without anchors");

log("keydown",true);
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
setTimeout( menukeyboard6, 50 );
}, 50 );
}, 50 );
}

function menukeyboard5() {
equal( $("#log").html(), "0,keydown,", "Keydown ENTER (open submenu)");

log("keydown",true);
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( $("#log").html(), "Ada,keydown,", "Keydown ENTER (select item)");
function menukeyboard6() {
equal( $("#log").html(), "Ada,keydown,", "Keydown ENTER (open submenu)");

start();
}
@@ -29,13 +29,17 @@ test( "enable/disable", function() {
});

test( "refresh", function() {
expect( 3 );
expect( 5 );
var menu = $( "#menu1" ).menu();
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
menu.append("<li><a href='#'>test item</a></li>").menu("refresh");
equal(menu.find(".ui-menu-item").length,6,"Incorrect number of menu items");
menu.find(".ui-menu-item:last").remove().end().menu("refresh");
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
menu.append("<li>---</li>").menu("refresh");
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
menu.children(":last").remove().end().menu("refresh");
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
});

test("destroy", function() {
@@ -15,7 +15,7 @@
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
}
$( "#menu1, #menu2, #menu3, .menu4" ).menu({
$( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
select: logger
});
@@ -58,7 +58,6 @@ <h2>Inline with disabled items and submenus</h2>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li></li>
<li>
<a href="#">Delphi</a>
<ul>
@@ -257,6 +256,54 @@ <h2>Menu with custom markup, multi-line items</h2>
</div>
</div>

<h2>Inline with dividers and elements without anchors</h2>
<ul id="menu7">
<li>Group 1</li>
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li></li>
<li>Group 2</li>
<li>
<a href="#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li>---</li>
<li>Group 3</li>
<li>
<a href="#">Salzburg</a>
<ul>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li> - </li>
<li><a href="#">Saarland</a></li>
<li>&mdash;</li>
<li><a href="#">Salzburg</a></li>
<li>&ndash;</li>
</ul>
</li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

<div style="position: absolute; top: 1em; right: 1em;">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
@@ -299,8 +299,13 @@ $.widget( "ui.menu", {
}
});

// initialize unlinked menu-items as dividers
menus.children( ":not(.ui-menu-item)" ).addClass( "ui-widget-content ui-menu-divider" );
// initialize unlinked menu-items containing spaces and/or dashes only as dividers
menus.children( ":not(.ui-menu-item)" ).each( function() {
var item = $( this );
if ( !/[^\-—\s]/.test( item.text() ) ) {
item.addClass( "ui-widget-content ui-menu-divider" );
}
});

// add aria-disabled attribute to any disabled menu item
menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );

0 comments on commit fe7ca1f

Please sign in to comment.
You can’t perform that action at this time.