From 92c61b3507690b5a4834303ffbef79aaa1c77f33 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 19 Oct 2011 13:59:07 -0500 Subject: Menubar: Allow structures other than just UL/LI --- ui/jquery.ui.menubar.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) (limited to 'ui') diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 673493366..3c564d461 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 ); } } -- cgit v1.2.3 From e206e549352684a4c30ad53e38c5544599328f2d Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 26 Oct 2011 22:54:12 -0500 Subject: 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(-) (limited to 'ui') diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 3c564d461..5f9a2a1a0 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(); + } } } }); -- cgit v1.2.3 From 65f5d9073db382970893e72525548627eb69491b Mon Sep 17 00:00:00 2001 From: kborchers Date: Thu, 1 Dec 2011 12:57:31 -0600 Subject: 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(-) (limited to 'ui') diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 5f9a2a1a0..6bc03ba4d 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({ -- cgit v1.2.3