Log:
diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css
index c616cf2c55c..33a9498fb92 100644
--- a/themes/base/jquery.ui.menu.css
+++ b/themes/base/jquery.ui.menu.css
@@ -14,7 +14,7 @@
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
-.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
+.ui-menu .ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; }
/* icon support */
.ui-menu-icons { position: relative; }
diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js
index 673493366d3..3c564d4613f 100644
--- a/ui/jquery.ui.menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -22,6 +22,8 @@ $.widget( "ui.menubar", {
options: {
autoExpand: false,
buttons: false,
+ items: "li",
+ menuElement: "ul",
menuIcon: false,
position: {
my: "left top",
@@ -30,7 +32,7 @@ $.widget( "ui.menubar", {
},
_create: function() {
var that = this;
- var items = this.items = this.element.children( "li" )
+ var items = this.items = this.element.children( this.options.items )
.addClass( "ui-menubar-item" )
.attr( "role", "presentation" )
.children( "button, a" );
@@ -42,7 +44,7 @@ $.widget( "ui.menubar", {
.attr( "role", "menubar" );
this._focusable( items );
this._hoverable( items );
- items.next( "ul" )
+ items.siblings( this.options.menuElement )
.menu({
position: {
within: this.options.position.within
@@ -53,7 +55,8 @@ $.widget( "ui.menubar", {
// TODO what is this targetting? there's probably a better way to access it
$(event.target).prev().focus();
that._trigger( "select", event, ui );
- }
+ },
+ items: that.options.menuElement
})
.hide()
.attr({
@@ -78,7 +81,7 @@ $.widget( "ui.menubar", {
items.each(function() {
var input = $(this),
// TODO menu var is only used on two places, doesn't quite justify the .each
- menu = input.next( "ul" );
+ menu = input.next( that.options.menuElement );
input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
// ignore triggered focus event
@@ -166,7 +169,7 @@ $.widget( "ui.menubar", {
},
_destroy : function() {
- var items = this.element.children( "li" )
+ var items = this.element.children( this.options.items )
.removeClass( "ui-menubar-item" )
.removeAttr( "role" )
.children( "button, a" );
@@ -243,7 +246,7 @@ $.widget( "ui.menubar", {
}, this.options.position ) )
.removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" )
- .menu("focus", event, menu.children( "li" ).first() )
+ .menu("focus", event, menu.children( ".ui-menu-item" ).first() )
// TODO need a comment here why both events are triggered
.focus()
.focusin();
@@ -253,44 +256,44 @@ $.widget( "ui.menubar", {
// TODO refactor this and the next three methods
_prev: function( event, button ) {
button.attr( "tabIndex", -1 );
- var prev = button.parent().prevAll( "li" ).children( ".ui-button" ).eq( 0 );
+ 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( "li:last" ).children( ".ui-button:last" );
+ var lastItem = this.element.children( this.options.items ).last().children( ".ui-button:last" );
lastItem.removeAttr( "tabIndex" )[0].focus();
}
},
_next: function( event, button ) {
button.attr( "tabIndex", -1 );
- var next = button.parent().nextAll( "li" ).children( ".ui-button" ).eq( 0 );
+ var next = button.parent().nextAll( this.options.items ).children( ".ui-button" ).eq( 0 );
if ( next.length ) {
next.removeAttr( "tabIndex")[0].focus();
} else {
- var firstItem = this.element.children( "li:first" ).children( ".ui-button:first" );
+ var firstItem = this.element.children( this.options.items ).first().children( ".ui-button:first" );
firstItem.removeAttr( "tabIndex" )[0].focus();
}
},
// TODO rename to parent
_left: function( event ) {
- var prev = this.active.parent().prevAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
+ var prev = this.active.parent().prevAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
if ( prev.length ) {
this._open( event, prev );
} else {
- var lastItem = this.element.children( "li:last" ).children( ".ui-menu:first" );
+ 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( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 );
+ var next = this.active.parent().nextAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
if ( next.length ) {
this._open( event, next );
} else {
- var firstItem = this.element.children( "li:first" ).children( ".ui-menu:first" );
+ var firstItem = this.element.children( this.options.items ).first().children( ".ui-menu:first" );
this._open( event, firstItem );
}
}
From e206e549352684a4c30ad53e38c5544599328f2d Mon Sep 17 00:00:00 2001
From: kborchers
Date: Wed, 26 Oct 2011 22:54:12 -0500
Subject: [PATCH 2/4] 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.
---
ui/jquery.ui.menubar.js | 92 +++++++++++++++++++----------------------
1 file changed, 43 insertions(+), 49 deletions(-)
diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js
index 3c564d4613f..5f9a2a1a0d2 100644
--- a/ui/jquery.ui.menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -32,19 +32,21 @@ $.widget( "ui.menubar", {
},
_create: function() {
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" )
- .attr( "role", "presentation" )
- .children( "button, a" );
+ .attr( "role", "presentation" );
// let only the first item receive focus
- items.slice(1).attr( "tabIndex", -1 );
+ this.items.slice(1).attr( "tabIndex", -1 );
this.element
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.attr( "role", "menubar" );
- this._focusable( items );
- this._hoverable( items );
- items.siblings( this.options.menuElement )
+ this._focusable( this.items );
+ this._hoverable( this.items );
+ this.items.siblings( this.options.menuElement )
.menu({
position: {
within: this.options.position.within
@@ -69,16 +71,16 @@ $.widget( "ui.menubar", {
return;
switch ( event.keyCode ) {
case $.ui.keyCode.LEFT:
- that._left( event );
+ that.previous( event );
event.preventDefault();
break;
case $.ui.keyCode.RIGHT:
- that._right( event );
+ that.next( event );
event.preventDefault();
break;
};
});
- items.each(function() {
+ this.items.each(function() {
var input = $(this),
// TODO menu var is only used on two places, doesn't quite justify the .each
menu = input.next( that.options.menuElement );
@@ -112,11 +114,11 @@ $.widget( "ui.menubar", {
event.preventDefault();
break;
case $.ui.keyCode.LEFT:
- that._prev( event, $( this ) );
+ that.previous( event );
event.preventDefault();
break;
case $.ui.keyCode.RIGHT:
- that._next( event, $( this ) );
+ that.next( event );
event.preventDefault();
break;
}
@@ -169,17 +171,16 @@ $.widget( "ui.menubar", {
},
_destroy : function() {
- var items = this.element.children( this.options.items )
+ this.menuItems
.removeClass( "ui-menubar-item" )
- .removeAttr( "role" )
- .children( "button, a" );
+ .removeAttr( "role" );
this.element
.removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.removeAttr( "role" )
.unbind( ".menubar" );
- items
+ this.items
.unbind( ".menubar" )
.removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
.removeAttr( "role" )
@@ -253,48 +254,41 @@ $.widget( "ui.menubar", {
this.open = true;
},
- // TODO refactor this and the next three methods
- _prev: function( event, button ) {
- 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 ) {
+ this._move( "next", "first", event );
},
- _next: function( event, button ) {
- button.attr( "tabIndex", -1 );
- var next = button.parent().nextAll( this.options.items ).children( ".ui-button" ).eq( 0 );
- if ( next.length ) {
- next.removeAttr( "tabIndex")[0].focus();
- } else {
- var firstItem = this.element.children( this.options.items ).first().children( ".ui-button:first" );
- firstItem.removeAttr( "tabIndex" )[0].focus();
- }
+ previous: function( event ) {
+ this._move( "prev", "last", event );
},
- // TODO rename to parent
- _left: function( event ) {
- var prev = this.active.parent().prevAll( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
- if ( prev.length ) {
- this._open( event, prev );
+ _move: function( direction, filter, event ) {
+ var next,
+ wrapItem;
+ 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 {
- var lastItem = this.element.children( this.options.items ).last().children( ".ui-menu:first" );
- this._open( event, lastItem );
+ if ( event ) {
+ next = $( event.target ).closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).children( ".ui-menubar-link" ).eq( 0 );
+ wrapItem = this.menuItems[ filter ]().children( ".ui-menubar-link" ).eq( 0 );
+ } else {
+ next = wrapItem = this.menuItems.children( "a" ).eq( 0 );
+ }
}
- },
- // 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 ) {
- this._open( event, next );
+ if ( this.open ) {
+ this._open( event, next );
+ } else {
+ next.removeAttr( "tabIndex")[0].focus();
+ }
} else {
- var firstItem = this.element.children( this.options.items ).first().children( ".ui-menu:first" );
- this._open( event, firstItem );
+ if ( this.open ) {
+ this._open( event, wrapItem );
+ } else {
+ wrapItem.removeAttr( "tabIndex")[0].focus();
+ }
}
}
});
From 65f5d9073db382970893e72525548627eb69491b Mon Sep 17 00:00:00 2001
From: kborchers
Date: Thu, 1 Dec 2011 12:57:31 -0600
Subject: [PATCH 3/4] Menubar: Update the items option in Menu to the renamed
menus option
---
ui/jquery.ui.menubar.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js
index 5f9a2a1a0d2..6bc03ba4da8 100644
--- a/ui/jquery.ui.menubar.js
+++ b/ui/jquery.ui.menubar.js
@@ -58,7 +58,7 @@ $.widget( "ui.menubar", {
$(event.target).prev().focus();
that._trigger( "select", event, ui );
},
- items: that.options.menuElement
+ menus: that.options.menuElement
})
.hide()
.attr({
From aa267fb606b20bb7caf09485cd8ae72d1027c647 Mon Sep 17 00:00:00 2001
From: kborchers
Date: Thu, 1 Dec 2011 14:51:23 -0600
Subject: [PATCH 4/4] Menubar: Fix font-weight and spacing of disabled menu
items
---
demos/menubar/default.html | 4 ++--
themes/base/jquery.ui.menubar.css | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/demos/menubar/default.html b/demos/menubar/default.html
index 789dea22f03..ef39a7121dc 100644
--- a/demos/menubar/default.html
+++ b/demos/menubar/default.html
@@ -173,14 +173,14 @@