library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Menu: Style updates

Browse Source 
Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 08:59:13 -04:00
parent a3a847f23a
commit 85ff520560
6 changed files with 139 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/menu/common.js
View File

@ -24,6 +24,6 @@ common.testWidget( "menu", {
focus: null,
select: null
}
});
} );
} );

16
tests/unit/menu/core.js
View File

@ -23,9 +23,9 @@ test( "markup structure", function( assert ) {
equal( items.eq( 1 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" );
assert.hasClasses( items[ 2 ], "ui-menu-item" );
equal( items.eq( 2 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" );
});
} );
test( "accessibility", function () {
test( "accessibility", function() {
expect( 4 );
var element = $( "#menu1" ).menu();
@ -39,7 +39,7 @@ test( "accessibility", function () {
ok( /^ui-id-\d+$/.test( element.attr( "aria-activedescendant" ) ), "aria-activedescendant from generated id" );
// Item roles are tested in the role option tests
});
} );
asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() {
expect( 1 );
@ -49,15 +49,15 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio
$( "#testID1" ).on( "click", function() {
$( "#test9044" ).trigger( "focus" );
});
} );
testHelper.click( element, "3" );
setTimeout( function() {
equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" );
$( "#test9044" ).remove();
start();
});
});
} );
} );
asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function( assert ) {
expect( 1 );
@ -70,7 +70,7 @@ asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected
setTimeout( function() {
assert.hasClasses( wrapper, "ui-state-active" );
start();
});
});
} );
} );
} );

162
tests/unit/menu/events.js
View File

@ -12,15 +12,15 @@ module( "menu: events", {
setup: function() {
testHelper.clearLog();
}
});
} );
test( "handle click on menu", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
select: function() {
log();
}
});
} );
log( "click", true );
click( element, "1" );
log( "afterclick" );
@ -28,16 +28,16 @@ test( "handle click on menu", function() {
click( element, "3" );
click( element, "1" );
equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." );
});
} );
test( "handle click on custom item menu", function() {
expect( 1 );
var element = $( "#menu5" ).menu({
var element = $( "#menu5" ).menu( {
select: function() {
log();
},
menus: ".menu"
});
} );
log( "click", true );
click( element, "1" );
log( "afterclick" );
@ -45,75 +45,77 @@ test( "handle click on custom item menu", function() {
click( element, "3" );
click( element, "1" );
equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." );
});
} );
asyncTest( "handle blur", function() {
expect( 1 );
var blurHandled = false,
element = $( "#menu1" ).menu({
element = $( "#menu1" ).menu( {
blur: function( event ) {
// Ignore duplicate blur event fired by IE
if ( !blurHandled ) {
blurHandled = true;
equal( event.type, "menublur", "blur event.type is 'menublur'" );
}
}
});
} );
click( element, "1" );
setTimeout(function() {
setTimeout( function() {
element.trigger( "blur" );
setTimeout(function() {
setTimeout( function() {
start();
}, 350 );
});
});
} );
} );
asyncTest( "handle blur via click outside", function() {
expect( 1 );
var blurHandled = false,
element = $( "#menu1" ).menu({
element = $( "#menu1" ).menu( {
blur: function( event ) {
// Ignore duplicate blur event fired by IE
if ( !blurHandled ) {
blurHandled = true;
equal( event.type, "menublur", "blur event.type is 'menublur'" );
}
}
});
} );
click( element, "1" );
setTimeout(function() {
$( "<a>", { id: "remove"} ).appendTo( "body" ).trigger( "click" );
setTimeout(function() {
setTimeout( function() {
$( "<a>", { id: "remove" } ).appendTo( "body" ).trigger( "click" );
setTimeout( function() {
start();
}, 350 );
});
});
} );
} );
asyncTest( "handle focus of menu with active item", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "focus", true );
element[ 0 ].focus();
setTimeout(function() {
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element[ 0 ].blur();
setTimeout(function() {
setTimeout( function() {
element[ 0 ].focus();
setTimeout(function() {
setTimeout( function() {
equal( logOutput(), "focus,0,1,2,2", "current active item remains active" );
start();
});
});
});
});
} );
} );
} );
} );
test( "handle mouseenter on nested menu item", function( assert ) {
assert.expect( 8 );
@ -186,12 +188,12 @@ asyncTest( "handle submenu auto collapse: mouseleave, default markup", function(
element.find( "li:nth-child(7)" ).trigger( "mouseenter" );
setTimeout( menumouseleave1, 25 );
});
} );
asyncTest( "handle submenu auto collapse: mouseleave, custom markup", function() {
expect( 4 );
$.ui.menu.prototype.delay = 1;
var element = $( "#menu5" ).menu({ menus: ".menu" }),
var element = $( "#menu5" ).menu( { menus: ".menu" } ),
event = $.Event( "mouseenter" );
function menumouseleave1() {
@ -217,22 +219,22 @@ asyncTest( "handle submenu auto collapse: mouseleave, custom markup", function()
element.find( ":nth-child(7)" ).trigger( "mouseenter" );
setTimeout( menumouseleave1, 25 );
});
} );
asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() {
expect( 12 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "keydown", true );
element[ 0 ].focus();
setTimeout(function() {
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" );
@ -282,19 +284,19 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen
equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" );
start();
});
});
} );
} );
asyncTest( "handle keyboard navigation on menu without scroll and with submenus", function() {
expect( 16 );
var element = $( "#menu2" ).menu({
var element = $( "#menu2" ).menu( {
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -302,7 +304,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,1,2", "Keydown DOWN" );
setTimeout( menukeyboard1 );
});
} );
element.trigger( "focus" );
function menukeyboard1() {
@ -322,7 +324,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
setTimeout(function() {
setTimeout( function() {
equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" );
setTimeout( menukeyboard2 );
} );
@ -403,22 +405,22 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
equal( logOutput(), "keydown,Ada", "Keydown ENTER (open submenu)" );
start();
}
});
} );
asyncTest( "handle keyboard navigation on menu with scroll and without submenus", function() {
expect( 14 );
var element = $( "#menu3" ).menu({
var element = $( "#menu3" ).menu( {
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() );
}
});
} );
log( "keydown", true );
element[ 0 ].focus();
setTimeout(function() {
setTimeout( function() {
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" );
@ -477,19 +479,19 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus"
equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" );
start();
});
});
} );
} );
asyncTest( "handle keyboard navigation on menu with scroll and with submenus", function() {
expect( 14 );
var element = $( "#menu4" ).menu({
var element = $( "#menu4" ).menu( {
select: function( event, ui ) {
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index());
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -497,7 +499,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equal( logOutput(), "keydown,1,2", "Keydown DOWN" );
setTimeout( menukeyboard1 );
});
} );
element.trigger( "focus" );
function menukeyboard1() {
@ -573,18 +575,18 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
start();
}
});
} );
asyncTest( "handle keyboard navigation and mouse click on menu with disabled items", function() {
expect( 6 );
var element = $( "#menu6" ).menu({
var element = $( "#menu6" ).menu( {
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index());
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -592,7 +594,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" );
setTimeout( menukeyboard1, 50 );
});
} );
element.trigger( "focus" );
function menukeyboard1() {
@ -624,19 +626,19 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
}, 50 );
}, 50 );
}
});
} );
asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() {
expect( 2 );
var element = $( "#menu7" ).menu({
var element = $( "#menu7" ).menu( {
items: "> :not('.ui-menu-group')",
select: function( event, ui ) {
log( $( ui.item[0] ).text() );
log( $( ui.item[ 0 ] ).text() );
},
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -644,7 +646,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" );
setTimeout( menukeyboard1, 50 );
});
} );
element.trigger( "focus" );
function menukeyboard1() {
@ -655,15 +657,15 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and
equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" );
start();
}
});
} );
asyncTest( "handle keyboard navigation with spelling of menu items", function() {
expect( 3 );
var element = $( "#menu2" ).menu({
var element = $( "#menu2" ).menu( {
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -676,17 +678,17 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function()
element.simulate( "keydown", { keyCode: 83 } );
equal( logOutput(), "keydown,0,1,3,4,5", "Keydown focus Saarland ignoring leading space" );
start();
});
} );
element[ 0 ].focus();
});
} );
asyncTest( "Keep focus on selected item (see #10644)", function() {
expect( 1 );
var element = $( "#menu2" ).menu({
var element = $( "#menu2" ).menu( {
focus: function( event ) {
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
}
});
} );
log( "keydown", true );
element.one( "menufocus", function() {
@ -698,40 +700,40 @@ asyncTest( "Keep focus on selected item (see #10644)", function() {
equal( logOutput(), "keydown,0,1,3,3,3",
"Focus stays on 'Addyston', even after other options are eliminated" );
start();
});
} );
element[ 0 ].focus();
});
} );
test( "#9469: Stopping propagation in a select event should not suppress subsequent select events.", function() {
expect( 1 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
select: function( event ) {
log();
event.stopPropagation();
}
});
} );
click( element, "1" );
click( element, "2" );
equal( logOutput(), "1,2", "Both select events were not triggered." );
});
} );
asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function( assert ) {
expect( 3 );
var element = $( "#menu8" ).menu({
var element = $( "#menu8" ).menu( {
focus: function( event, ui ) {
equal( ui.item.length, 1, "There should only be one match when filtering" );
assert.hasClasses( ui.item, "ui-menu-item" );
equal( ui.item.text(), "-Saarland", "element has correct text" );
}
});
} );
setTimeout(function() {
setTimeout( function() {
element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } );
start();
});
});
} );
} );
} );

24
tests/unit/menu/methods.js
View File

@ -12,25 +12,25 @@ module( "menu: methods", {
setup: function() {
testHelper.clearLog();
}
});
} );
test( "destroy", function( assert ) {
expect( 2 );
assert.domEqual( "#menu2", function() {
$( "#menu2" ).menu().menu( "destroy" );
});
} );
assert.domEqual( "#menu5", function() {
$( "#menu5").menu().menu( "destroy" );
});
});
$( "#menu5" ).menu().menu( "destroy" );
} );
} );
test( "enable/disable", function( assert ) {
expect( 3 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
select: function() {
log();
}
});
} );
element.menu( "disable" );
assert.hasClasses( element, "ui-state-disabled" );
log( "click", true );
@ -42,7 +42,7 @@ test( "enable/disable", function( assert ) {
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,afterclick,click,1,afterclick", "Click order not valid." );
});
} );
test( "refresh", function() {
expect( 5 );
@ -56,7 +56,7 @@ test( "refresh", function() {
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
element.children( ":last" ).remove().end().menu( "refresh" );
equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" );
});
} );
test( "refresh submenu", function() {
expect( 2 );
@ -65,7 +65,7 @@ test( "refresh submenu", function() {
element.find( "ul" ).addBack().append( "<li><a href=\"#\">New Item</a></li>" );
element.menu( "refresh" );
equal( element.find( "ul:first .ui-menu-item" ).length, 4 );
});
} );
test( "refresh icons (see #9377)", function( assert ) {
expect( 3 );
@ -79,7 +79,7 @@ test( "refresh icons (see #9377)", function( assert ) {
element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" );
element.menu( "refresh" );
assert.lacksClasses( element, "ui-menu-icons" );
});
} );
test( "widget", function() {
expect( 2 );
@ -87,7 +87,7 @@ test( "widget", function() {
widgetElement = element.menu( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});
} );
// TODO: test focus method

66
tests/unit/menu/options.js
View File

@ -12,62 +12,62 @@ module( "menu: options", {
setup: function() {
testHelper.clearLog();
}
});
} );
test( "{ disabled: true }", function( assert ) {
expect( 2 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
disabled: true,
select: function() {
log();
}
});
} );
assert.hasClasses( element, "ui-state-disabled" );
log( "click", true );
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,afterclick", "Click order not valid." );
});
} );
test( "{ disabled: false }", function( assert ) {
expect( 2 );
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
disabled: false,
select: function() {
log();
}
});
} );
assert.lacksClasses( element, "ui-state-disabled" );
log( "click", true );
click( element, "1" );
log( "afterclick" );
equal( logOutput(), "click,1,afterclick", "Click order not valid." );
});
} );
test( "{ icons: default }", function( assert ) {
expect( 8 );
var element = $( "#menu2" ).menu();
element.find( ".ui-menu-icon" ).each( function() {
assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-caret-1-e" );
});
} );
element.menu( "option", "icons.submenu", "ui-icon-triangle-1-e" );
element.find( ".ui-menu-icon" ).each( function() {
assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-triangle-1-e" );
});
});
} );
} );
test( "{ icons: { submenu: 'custom' } }", function( assert ) {
expect( 4 );
var element = $( "#menu2" ).menu({
var element = $( "#menu2" ).menu( {
icons: {
submenu: "custom-class"
}
});
} );
element.find( ".ui-menu-icon" ).each( function() {
assert.hasClasses( this, "ui-menu-icon ui-icon custom-class" );
});
});
} );
} );
// TODO: test menus option
@ -79,47 +79,47 @@ test( "{ role: 'menu' } ", function( assert ) {
expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "menu" );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
items.each( function( item ) {
assert.hasClasses( $( this ), "ui-menu-item" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ),
"menuitem", "menu item ("+ item + ") role" );
"menuitem", "menu item (" + item + ") role" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
"tabindex for menu item ("+ item + ")" );
});
});
"tabindex for menu item (" + item + ")" );
} );
} );
test( "{ role: 'listbox' } ", function( assert ) {
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
role: "listbox"
}),
} ),
items = element.find( "li" );
expect( 2 + 3 * items.length );
equal( element.attr( "role" ), "listbox" );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
items.each( function( item ) {
assert.hasClasses( $( this ), "ui-menu-item" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option",
"menu item ("+ item + ") role" );
"menu item (" + item + ") role" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
"tabindex for menu item ("+ item + ")" );
});
});
"tabindex for menu item (" + item + ")" );
} );
} );
test( "{ role: null }", function( assert ) {
var element = $( "#menu1" ).menu({
var element = $( "#menu1" ).menu( {
role: null
}),
} ),
items = element.find( "li" );
expect( 2 + 3 * items.length );
equal( element.attr( "role" ), null );
ok( items.length > 0, "number of menu items" );
items.each(function( item ) {
items.each( function( item ) {
assert.hasClasses( $( this ), "ui-menu-item" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), null,
"menu item ("+ item + ") role" );
"menu item (" + item + ") role" );
equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
"tabindex for menu item ("+ item + ")" );
});
});
"tabindex for menu item (" + item + ")" );
} );
} );
} );

3
ui/widgets/menu.js
View File

@ -136,6 +136,7 @@ return $.widget( "ui.menu", {
mouseleave: "collapseAll",
"mouseleave .ui-menu": "collapseAll",
focus: function( event, keepActiveItem ) {
// If there's already an active item, keep it active
// If not, activate the first item
var item = this.active || this.element.find( this.options.items ).eq( 0 );
@ -475,6 +476,7 @@ return $.widget( "ui.menu", {
collapseAll: function( event, all ) {
clearTimeout( this.timer );
this.timer = this._delay( function() {
// If we were passed an event, look for the submenu that contains the event
var currentMenu = all ? this.element :
$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
@ -633,6 +635,7 @@ return $.widget( "ui.menu", {
},
select: function( event ) {
// TODO: It should never be possible to not have an active item at this
// point, but the tests don't trigger mouseenter before click.
this.active = this.active || $( event.target ).closest( ".ui-menu-item" );