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
menubar: restore keyboard navigation 
Per @jzaefferer, keyboard behavior was broken,
this should be fixed now.
  • Loading branch information
Steven G. Harms committed Dec 8, 2012
commit ab98a005328e49f8d1f56a27e42936e0cde75b36
52 changes: 32 additions & 20 deletions ui/jquery.ui.menubar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ $.widget( "ui.menubar", {
},
_create: function() {
var that = this, subMenus;
Copy link
Copy Markdown
Author

@sgharms sgharms Dec 2, 2012

Choose a reason for hiding this comment

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

@scottgonzalez @jzaefferer When I look at this _create() method, it seems there's a lot of initializing sub-tasks going on.

  • We're initializing menuItems
  • We're instantiating a $.ui.menus underneath all of these menuItems
  • We're setting behavior on the menuItems and on the sub-menu items
  • We're defining callbacks that are applied on the sub-menu items....
  • etc.

Combine with the jQuery 'dot-chaining' syntax, the method seems to strain easy readability (in my book). This makes the contribution bar higher (IMNSHO) and makes testing / debugging harder. Maybe this isn't so for jQuery gurus such as yourselves, but I think the code would be more approachable if the long methods used intention-revealing sub-methods. I don't see this done elsewhere in the jQuery UI plugin set, but I wanted to get your thoughts on why this is or if this is just my relative unfamiliarity with plugin design.

Questions:

  1. Is it against jQuery standard to split these _create()-homed activities into intention-revealing sub-methods?
  2. Doing so might mean that you have a single var declaration in the sub-method and thus chaining becomes less attractive (given the "only one var" statement) style rule

Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 3, 2012

Choose a reason for hiding this comment

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

It's fine to split up _create() if the split makes sense. I don't see how the one-var rule has any impact on chaining method calls.

Copy link
Copy Markdown
Author

@sgharms sgharms Dec 3, 2012

Choose a reason for hiding this comment

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

I'll do that in another request, then.

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.

Uninitialized vars at the top, on their own line:

var subMenus,
    that = this;

this.menuItems = this.element.children( this.options.items );
this.items = this.menuItems.children( "button, a" );
this.menuItems = this.element.children( this.options.items ); // Top-level <li>s
Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

Comments always go above the line.

Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

Actually, these comments are all technically incorrect. The markup is configurable, use menu terminology, not tag names.

this.items = this.menuItems.children( "button, a" ); // Links in those top-level <li>s
Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

comment


this.menuItems
.addClass( "ui-menubar-item" )
Expand All @@ -46,7 +46,7 @@ $.widget( "ui.menubar", {
.attr( "role", "menubar" );
this._focusable( this.items );
this._hoverable( this.items );
subMenus = this.items.siblings( this.options.menuElement )
subMenus = this.items.siblings( this.options.menuElement ) // sub-contained <ul>
Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

comment

.menu({
position: {
within: this.options.position.within
Expand Down Expand Up @@ -115,7 +115,7 @@ $.widget( "ui.menubar", {
case $.ui.keyCode.SPACE:
case $.ui.keyCode.UP:
case $.ui.keyCode.DOWN:
this._open( event, $( this ).next() );
that._open( event, $(event.target).next() );
event.preventDefault();
break;
case $.ui.keyCode.LEFT:
Expand All @@ -130,35 +130,47 @@ $.widget( "ui.menubar", {
};

// might be a non-menu button
if ( menu.length ) {
that._on( input, {
click: mouseBehaviorCallback,
focus: mouseBehaviorCallback,
mouseenter: mouseBehaviorCallback,
keydown: keyboardBehaviorCallback
});
that._on( input, {
click: mouseBehaviorCallback,
focus: mouseBehaviorCallback,
mouseenter: mouseBehaviorCallback,
keydown: keyboardBehaviorCallback
});

input.attr( "aria-haspopup", "true" );
input.attr( "aria-haspopup", "true" );

// TODO review if these options (menuIcon and buttons) are a good choice, maybe they can be merged
if ( that.options.menuIcon ) {
input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" );
input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
}
} else {
// TODO review if these options (menuIcon and buttons) are a good choice, maybe they can be merged
if ( that.options.menuIcon ) {
input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" );
input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
}

if ( !menu.length ) {
that._off( input, "click mouseenter keydown");
Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

space before closing paren.

that._hoverable( input );
that._on( input, {
click: function( event ) {
this._close();
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.

spacing

},

mouseenter: function( event ) {
if ( this.open ) {
this._close();
}
},
keydown: function( event ) {
switch ( event.keyCode ) {
Copy link
Copy Markdown
Member

@scottgonzalez scottgonzalez Dec 10, 2012

Choose a reason for hiding this comment

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

We can probably just use if here.

case $.ui.keyCode.LEFT:
this.previous( event );
event.preventDefault();
break;
case $.ui.keyCode.RIGHT:
this.next( event );
event.preventDefault();
break;
}
}
});
}

input
.addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" )
.attr( "role", "menuitem" )
Expand Down