Skip to content

Menubar #829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sgharms wants to merge 33 commits into from
Closed

Menubar #829

Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
0f33062
Adds unit test: correct sub-menu-less menu item event behavior
Nov 19, 2012
82d0056
Convert from bind() to _on()
Nov 19, 2012
15bd67f
menubar: remove remaining bind() calls; code standards compliance.
Nov 20, 2012
d4ca89b
menubar: rm stray, empty conditional
Dec 1, 2012
f30c853
menubar: rm namespacing on events in _on
Dec 3, 2012
ec67b65
menubar: decompose _create
Dec 4, 2012
c57319c
Revert "menubar: decompose _create"
Dec 8, 2012
36b5135
menubar: spacing / style fix
Dec 8, 2012
1a9f136
menubar: add visual test
Dec 8, 2012
ab98a00
menubar: restore keyboard navigation
Dec 8, 2012
2fe73a1
menubar: keyboard focus / mouse interaction
Dec 8, 2012
baf9882
menubar: more spaces
Dec 8, 2012
0700982
menubar: visual test: add to index page
Dec 9, 2012
2500c96
menubar: kbd / mouse interaction
Dec 9, 2012
bb87639
menubar: spacing and formatting
Dec 10, 2012
b74695a
menubar: rm erroneously committed .orig file
Dec 10, 2012
706d882
menubar: spacing
Dec 10, 2012
8237fb2
menubar: massive refactor for readability
Dec 30, 2012
1af1f8c
meubar: formatting per JQuery style guide
Jan 17, 2013
908fea5
menubar: mark active menuItem with .ui-state-focus
Jan 18, 2013
bb8e2e0
menubar: re-open submenu when returning to it after hover on menu-les…
Jan 18, 2013
0efe66e
menubar: relocate focus event onto *item* v. menuItem
Jan 18, 2013
fdc200d
menubar: fix pixel-shifting visual error
Jan 18, 2013
aafdc17
menubar: apply drop-down glyph only on menus w/ subMenu
Jan 20, 2013
1e8089b
LEFT cursor in an expanded menu approximates ESCAPE
Mar 14, 2013
09d51e8
Remove unused variable: seenFirstItem
Mar 16, 2013
a4a95cc
Do not remove tabIndex varaible
Mar 16, 2013
b2a3814
rm stray debugger
Mar 16, 2013
bab98f2
Change selector for next .ui-menubar-link -> .ui-button
Mar 16, 2013
79b06b2
Repair LEFT cursor
Mar 22, 2013
480de7f
Refactor _move by menuItems knowing their neighbors
Mar 22, 2013
56f6469
Method rename
Mar 22, 2013
100f552
Correct submenus triggering bad focusout behavior
Mar 22, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
meubar: formatting per JQuery style guide 
* foo( "this" ) -> foo("this")
* Ensure padding space around argument calls ( foo, bar )
  • Loading branch information
Steven G. Harms committed Jan 17, 2013
commit 1af1f8c56410cf9099911deba7a093ef7931ea61
133 changes: 66 additions & 67 deletions ui/jquery.ui.menubar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ $.widget( "ui.menubar", {

_initializeMenubarsBoundElement: function() {
this.element
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.addClass("ui-menubar ui-widget-header ui-helper-clearfix")
.attr( "role", "menubar" );
},

Expand All @@ -68,15 +68,15 @@ $.widget( "ui.menubar", {
clearTimeout( menubar.closeTimer );
},
focusout: function( event ) {
menubar.closeTimer = setTimeout( function() {
menubar.closeTimer = setTimeout (function() {
menubar._close( event );
}, 150);
}, 150 );
},
"mouseleave .ui-menubar-item": function( event ) {
if ( menubar.options.autoExpand ) {
menubar.closeTimer = setTimeout( function() {
menubar._close( event );
}, 150);
}, 150 );
}
},
"mouseenter .ui-menubar-item": function( event ) {
Expand All @@ -91,12 +91,12 @@ $.widget( "ui.menubar", {
seenFirstItem = false;

this.menuItems
.addClass( "ui-menubar-item" )
.addClass("ui-menubar-item")
.attr( "role", "presentation" );

$.each( this.menuItems, function( index, menuItem ){
menubar._initializeMenuItem( $( menuItem ), menubar, seenFirstItem );
});
} );
},

_initializeMenuItem: function( $menuItem, menubar ) {
Expand All @@ -122,29 +122,29 @@ $.widget( "ui.menubar", {
var subMenus = $menuItem.children( menubar.options.menuElement );

subMenus
.menu({
position: {
within: this.options.position.within
},
select: function( event, ui ) {
ui.item.parents( "ul.ui-menu:last" ).hide();
menubar._close();
// TODO what is this targetting? there's probably a better way to access it
$( event.target ).prev().focus();
menubar._trigger( "select", event, ui );
},
menus: this.options.menuElement
})
.hide()
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});
.menu({
position: {
within: this.options.position.within
},
select: function( event, ui ) {
ui.item.parents("ul.ui-menu:last").hide();
menubar._close();
// TODO what is this targetting? there's probably a better way to access it
$( event.target ).prev().focus();
menubar._trigger( "select", event, ui );
},
menus: this.options.menuElement
})
.hide()
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});

Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 6, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no blank line here

this._on( subMenus, {
keydown: function( event ) {
var menu = $( this );
if ( menu.is( ":hidden" ) ) {
if ( menu.is(":hidden") ) {
return;
}
switch ( event.keyCode ) {
Expand Down Expand Up @@ -187,19 +187,19 @@ $.widget( "ui.menubar", {
}

if ( menubar.options.menuIcon ) {
$anItem.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" );
$anItem.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
$anItem.addClass("ui-state-default").append("<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>");
$anItem.removeClass("ui-button-text-only").addClass("ui-button-text-icon-secondary");
}
},

_applyDOMPropertiesOnItem: function( $item, menubar) {
$item
.addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" )
.addClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
.attr( "role", "menuitem" )
.wrapInner( "<span class='ui-button-text'></span>" );
.wrapInner("<span class='ui-button-text'></span>");

if ( menubar.options.buttons ) {
$item.removeClass( "ui-menubar-link" ).addClass( "ui-state-default" );
$item.removeClass("ui-menubar-link").addClass("ui-state-default");
}
},

Expand All @@ -213,7 +213,7 @@ $.widget( "ui.menubar", {
event.preventDefault();
// TODO can we simplify or extract this check? especially the last two expressions
// there's a similar active[0] == menu[0] check in _open
if ( event.type === "click" && menu.is( ":visible" ) && this.active && this.active[0] === menu[0] ) {
if ( event.type === "click" && menu.is(":visible") && this.active && this.active[0] === menu[0] ) {
this._close();
return;
}
Expand Down Expand Up @@ -296,34 +296,34 @@ $.widget( "ui.menubar", {

_destroy : function() {
this.menuItems
.removeClass( "ui-menubar-item" )
.removeAttr( "role" );
.removeClass("ui-menubar-item")
.removeAttr("role");

this.element
.removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
.removeAttr( "role" )
.unbind( ".menubar" );
.removeClass("ui-menubar ui-widget-header ui-helper-clearfix")
.removeAttr("role")
.unbind(".menubar");

this.items
.unbind( ".menubar" )
.removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" )
.removeAttr( "role" )
.removeAttr( "aria-haspopup" )
.unbind(".menubar")
.removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default")
.removeAttr("role")
.removeAttr("aria-haspopup")
// TODO unwrap?
.children( "span.ui-button-text" ).each(function( i, e ) {
.children("span.ui-button-text").each(function( i, e ) {
var item = $( this );
item.parent().html( item.html() );
})
.end()
.children( ".ui-icon" ).remove();
.children(".ui-icon").remove();

this.element.find( ":ui-menu" )
.menu( "destroy" )
this.element.find(":ui-menu")
.menu("destroy")
.show()
.removeAttr( "aria-hidden" )
.removeAttr( "aria-expanded" )
.removeAttr( "tabindex" )
.unbind( ".menubar" );
.removeAttr("aria-hidden")
.removeAttr("aria-expanded")
.removeAttr("tabindex")
.unbind(".menubar");
},

_close: function() {
Expand All @@ -341,8 +341,8 @@ $.widget( "ui.menubar", {
});
this.active
.prev()
.removeClass( "ui-state-active" )
.removeAttr( "tabIndex" );
.removeClass("ui-state-active")
.removeAttr("tabIndex");
this.active.closest( this.options.items ).removeClass("ui-state-active");
} else {
this.active
Expand All @@ -365,30 +365,30 @@ $.widget( "ui.menubar", {
// TODO refactor, almost the same as _close above, but don't remove tabIndex
if ( this.active.closest( this.options.items ).data("hasSubMenu") ) {
this.active
.menu( "collapseAll" )
.menu("collapseAll")
.hide()
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});
this.active.closest(this.options.items)
.removeClass( "ui-state-active" );
.removeClass("ui-state-active");
} else {
this.active.removeClass( "ui-state-active" );
this.active.removeClass("ui-state-active");
}
}

// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
button = menuItem.addClass( "ui-state-active" ).attr( "tabIndex", -1 );
button = menuItem.addClass("ui-state-active").attr( "tabIndex", -1 );

this.active = menu
.show()
.position( $.extend({
of: button
}, this.options.position ) )
.removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" )
.menu("focus", event, menu.children( ".ui-menu-item" ).first() )
.removeAttr("aria-hidden")
.attr("aria-expanded", "true")
.menu("focus", event, menu.children(".ui-menu-item").first() )
// TODO need a comment here why both events are triggered
.focus()
.focusin();
Expand All @@ -400,7 +400,7 @@ $.widget( "ui.menubar", {
if ( this.open &&
this.active.closest( this.options.items ).data("hasSubMenu") &&
this.active.data("menu").active &&
this.active.data( "menu" ).active.has( ".ui-menu" ).length ) {
this.active.data("menu").active.has(".ui-menu").length ) {
// Track number of open submenus and prevent moving to next menubar item
this.openSubmenus++;
return;
Expand All @@ -426,15 +426,15 @@ $.widget( "ui.menubar", {

if ( this.open ) {
next = this.active.
closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items )
.first();
closest(".ui-menubar-item")[ direction + "All" ]( this.options.items )
.first();
wrapItem = this.menuItems[ filter ]();
} else {
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 );
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 );
next = wrapItem = this.menuItems.children("a").eq( 0 );
}
}

Expand All @@ -449,9 +449,8 @@ $.widget( "ui.menubar", {
this._submenuless_open( event, next );
}
} else {
next.removeAttr( "tabIndex")[0].focus();
next.removeAttr("tabIndex")[0].focus();
}

},

_submenuless_open: function( event, next ) {
Expand All @@ -462,15 +461,15 @@ $.widget( "ui.menubar", {
// TODO refactor, almost the same as _close above, but don't remove tabIndex
if ( this.active.closest( this.options.items ) ) {
this.active
.menu( "collapseAll" )
.menu("collapseAll")
.hide()
.attr({
"aria-hidden": "true",
"aria-expanded": "false"
});
}
this.active.closest(this.options.items)
.removeClass( "ui-state-active" );
.removeClass("ui-state-active");
}

// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
Expand Down