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 Packages Projects Releases Wiki Activity

Menubar: Refactored _next, _prev, _right and _left into a single method called _move and then created next and previous public methods that call _move. Very similar to how Menu handles keyboard interaction.

Browse Source
This commit is contained in:
kborchers 2011-10-26 22:54:12 -05:00
parent 92c61b3507
commit e206e54935
1 changed files with 48 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ui/jquery.ui.menubar.js vendored
View File

@ -32,19 +32,21 @@ $.widget( "ui.menubar", {
}, },
_create: function() { _create: function() {
var that = this; var that = this;
var items = this.items = this.element.children( this.options.items ) this.menuItems = this.element.children( this.options.items );
this.items = this.menuItems.children( "button, a" );
this.menuItems
.addClass( "ui-menubar-item" ) .addClass( "ui-menubar-item" )
.attr( "role", "presentation" ) .attr( "role", "presentation" );
.children( "button, a" );
// let only the first item receive focus // let only the first item receive focus
items.slice(1).attr( "tabIndex", -1 ); this.items.slice(1).attr( "tabIndex", -1 );
this.element this.element
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) .addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.attr( "role", "menubar" ); .attr( "role", "menubar" );
this._focusable( items ); this._focusable( this.items );
this._hoverable( items ); this._hoverable( this.items );
items.siblings( this.options.menuElement ) this.items.siblings( this.options.menuElement )
.menu({ .menu({
position: { position: {
within: this.options.position.within within: this.options.position.within
@ -69,16 +71,16 @@ $.widget( "ui.menubar", {
return; return;
switch ( event.keyCode ) { switch ( event.keyCode ) {
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
that._left( event ); that.previous( event );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
that._right( event ); that.next( event );
event.preventDefault(); event.preventDefault();
break; break;
}; };
}); });
items.each(function() { this.items.each(function() {
var input = $(this), var input = $(this),
// TODO menu var is only used on two places, doesn't quite justify the .each // TODO menu var is only used on two places, doesn't quite justify the .each
menu = input.next( that.options.menuElement ); menu = input.next( that.options.menuElement );
@ -112,11 +114,11 @@ $.widget( "ui.menubar", {
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
that._prev( event, $( this ) ); that.previous( event );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
that._next( event, $( this ) ); that.next( event );
event.preventDefault(); event.preventDefault();
break; break;
} }
@ -169,17 +171,16 @@ $.widget( "ui.menubar", {
}, },
_destroy : function() { _destroy : function() {
var items = this.element.children( this.options.items ) this.menuItems
.removeClass( "ui-menubar-item" ) .removeClass( "ui-menubar-item" )
.removeAttr( "role" ) .removeAttr( "role" );
.children( "button, a" );
this.element this.element
.removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) .removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.removeAttr( "role" ) .removeAttr( "role" )
.unbind( ".menubar" ); .unbind( ".menubar" );
items this.items
.unbind( ".menubar" ) .unbind( ".menubar" )
.removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" ) .removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
.removeAttr( "role" ) .removeAttr( "role" )
@ -253,48 +254,41 @@ $.widget( "ui.menubar", {
this.open = true; this.open = true;
}, },
// TODO refactor this and the next three methods next: function( event ) {
_prev: function( event, button ) { this._move( "next", "first", event );
button.attr( "tabIndex", -1 );
var prev = button.parent().prevAll( this.options.items ).children( ".ui-button" ).eq( 0 );
if ( prev.length ) {
prev.removeAttr( "tabIndex" )[0].focus();
} else {
var lastItem = this.element.children( this.options.items ).last().children( ".ui-button:last" );
lastItem.removeAttr( "tabIndex" )[0].focus();
}
}, },
_next: function( event, button ) { previous: function( event ) {
button.attr( "tabIndex", -1 ); this._move( "prev", "last", event );
var next = button.parent().nextAll( this.options.items ).children( ".ui-button" ).eq( 0 ); },
if ( next.length ) {
next.removeAttr( "tabIndex")[0].focus(); _move: function( direction, filter, event ) {
} else { var next,
var firstItem = this.element.children( this.options.items ).first().children( ".ui-button:first" ); wrapItem;
firstItem.removeAttr( "tabIndex" )[0].focus(); if ( this.open ) {
} next = this.active.closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
}, wrapItem = this.menuItems[ filter ]().children( ".ui-menu" ).eq( 0 );
} else {
// TODO rename to parent if ( event ) {
_left: function( event ) { next = $( event.target ).closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).children( ".ui-menubar-link" ).eq( 0 );
var prev = this.active.parent().prevAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 ); wrapItem = this.menuItems[ filter ]().children( ".ui-menubar-link" ).eq( 0 );
if ( prev.length ) { } else {
this._open( event, prev ); next = wrapItem = this.menuItems.children( "a" ).eq( 0 );
} else { }
var lastItem = this.element.children( this.options.items ).last().children( ".ui-menu:first" ); }
this._open( event, lastItem );
}
},
// TODO rename to child (or something like that)
_right: function( event ) {
var next = this.active.parent().nextAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
if ( next.length ) { if ( next.length ) {
if ( this.open ) {
this._open( event, next ); this._open( event, next );
} else { } else {
var firstItem = this.element.children( this.options.items ).first().children( ".ui-menu:first" ); next.removeAttr( "tabIndex")[0].focus();
this._open( event, firstItem ); }
} else {
if ( this.open ) {
this._open( event, wrapItem );
} else {
wrapItem.removeAttr( "tabIndex")[0].focus();
}
} }
} }
}); });