rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Redo whitespace / indentation for menubar.js

Browse source
This commit is contained in:
Lance Edgar 2016-10-16 21:37:38 -05:00
parent 26c6c083c4
commit 6cb4b86fd0
1 changed files with 294 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

588
tailbone/static/js/lib/jquery.ui.menubar.js vendored
View file

@ -8,320 +8,320 @@
* http://docs.jquery.com/UI/Menubar * http://docs.jquery.com/UI/Menubar
* *
* Depends: * Depends:
* jquery.ui.core.js * jquery.ui.core.js
* jquery.ui.widget.js * jquery.ui.widget.js
* jquery.ui.position.js * jquery.ui.position.js
* jquery.ui.menu.js * jquery.ui.menu.js
*/ */
(function( $ ) { (function( $ ) {
// TODO when mixing clicking menus and keyboard navigation, focus handling is broken // TODO when mixing clicking menus and keyboard navigation, focus handling is broken
// there has to be just one item that has tabindex // there has to be just one item that has tabindex
$.widget( "ui.menubar", { $.widget( "ui.menubar", {
version: "@VERSION", version: "@VERSION",
options: { options: {
autoExpand: false, autoExpand: false,
buttons: false, buttons: false,
items: "li", items: "li",
menuElement: "ul", menuElement: "ul",
menuIcon: false, menuIcon: false,
position: { position: {
my: "left top", my: "left top",
at: "left bottom" at: "left bottom"
} }
}, },
_create: function() { _create: function() {
var that = this; var that = this;
this.menuItems = this.element.children( this.options.items ); this.menuItems = this.element.children( this.options.items );
this.items = this.menuItems.children( "button, a" ); this.items = this.menuItems.children( "button, a" );
this.menuItems this.menuItems
.addClass( "ui-menubar-item" ) .addClass( "ui-menubar-item" )
.attr( "role", "presentation" ); .attr( "role", "presentation" );
// let only the first item receive focus // let only the first item receive focus
this.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( this.items ); this._focusable( this.items );
this._hoverable( this.items ); this._hoverable( this.items );
this.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
}, },
select: function( event, ui ) { select: function( event, ui ) {
ui.item.parents( "ul.ui-menu:last" ).hide(); ui.item.parents( "ul.ui-menu:last" ).hide();
that._close(); that._close();
// TODO what is this targetting? there's probably a better way to access it // TODO what is this targetting? there's probably a better way to access it
$(event.target).prev().focus(); $(event.target).prev().focus();
that._trigger( "select", event, ui ); that._trigger( "select", event, ui );
}, },
menus: that.options.menuElement menus: that.options.menuElement
}) })
.hide() .hide()
.attr({ .attr({
"aria-hidden": "true", "aria-hidden": "true",
"aria-expanded": "false" "aria-expanded": "false"
}) })
// TODO use _on // TODO use _on
.bind( "keydown.menubar", function( event ) { .bind( "keydown.menubar", function( event ) {
var menu = $( this ); var menu = $( this );
if ( menu.is( ":hidden" ) ) { if ( menu.is( ":hidden" ) ) {
return; return;
} }
switch ( event.keyCode ) { switch ( event.keyCode ) {
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
that.previous( event ); that.previous( event );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
that.next( event ); that.next( event );
event.preventDefault(); event.preventDefault();
break; break;
} }
}); });
this.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 );
// might be a non-menu button // might be a non-menu button
if ( menu.length ) { if ( menu.length ) {
// TODO use _on // TODO use _on
input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) { input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) {
// ignore triggered focus event // ignore triggered focus event
if ( event.type === "focus" && !event.originalEvent ) { if ( event.type === "focus" && !event.originalEvent ) {
return; return;
} }
event.preventDefault(); event.preventDefault();
// TODO can we simplify or extractthis check? especially the last two expressions // TODO can we simplify or extractthis check? especially the last two expressions
// there's a similar active[0] == menu[0] check in _open // there's a similar active[0] == menu[0] check in _open
if ( event.type === "click" && menu.is( ":visible" ) && that.active && that.active[0] === menu[0] ) { if ( event.type === "click" && menu.is( ":visible" ) && that.active && that.active[0] === menu[0] ) {
that._close(); that._close();
return; return;
} }
if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" || that.options.autoExpand ) { if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" || that.options.autoExpand ) {
if( that.options.autoExpand ) { if( that.options.autoExpand ) {
clearTimeout( that.closeTimer ); clearTimeout( that.closeTimer );
} }
that._open( event, menu ); that._open( event, menu );
} }
}) })
// TODO use _on // TODO use _on
.bind( "keydown", function( event ) { .bind( "keydown", function( event ) {
switch ( event.keyCode ) { switch ( event.keyCode ) {
case $.ui.keyCode.SPACE: case $.ui.keyCode.SPACE:
case $.ui.keyCode.UP: case $.ui.keyCode.UP:
case $.ui.keyCode.DOWN: case $.ui.keyCode.DOWN:
that._open( event, $( this ).next() ); that._open( event, $( this ).next() );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.LEFT: case $.ui.keyCode.LEFT:
that.previous( event ); that.previous( event );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
that.next( event ); that.next( event );
event.preventDefault(); event.preventDefault();
break; break;
} }
}) })
.attr( "aria-haspopup", "true" ); .attr( "aria-haspopup", "true" );
// TODO review if these options (menuIcon and buttons) are a good choice, maybe they can be merged // TODO review if these options (menuIcon and buttons) are a good choice, maybe they can be merged
if ( that.options.menuIcon ) { 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.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" ); input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );
} }
} else { } else {
// TODO use _on // TODO use _on
input.bind( "click.menubar mouseenter.menubar", function( event ) { input.bind( "click.menubar mouseenter.menubar", function( event ) {
if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" ) { if ( ( that.open && event.type === "mouseenter" ) || event.type === "click" ) {
that._close(); that._close();
} }
}); });
} }
input input
.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" ) .attr( "role", "menuitem" )
.wrapInner( "<span class='ui-button-text'></span>" ); .wrapInner( "<span class='ui-button-text'></span>" );
if ( that.options.buttons ) { if ( that.options.buttons ) {
input.removeClass( "ui-menubar-link" ).addClass( "ui-state-default" ); input.removeClass( "ui-menubar-link" ).addClass( "ui-state-default" );
} }
}); });
that._on( { that._on( {
keydown: function( event ) { keydown: function( event ) {
if ( event.keyCode === $.ui.keyCode.ESCAPE && that.active && that.active.menu( "collapse", event ) !== true ) { if ( event.keyCode === $.ui.keyCode.ESCAPE && that.active && that.active.menu( "collapse", event ) !== true ) {
var active = that.active; var active = that.active;
that.active.blur(); that.active.blur();
that._close( event ); that._close( event );
active.prev().focus(); active.prev().focus();
} }
}, },
focusin: function( event ) { focusin: function( event ) {
clearTimeout( that.closeTimer ); clearTimeout( that.closeTimer );
}, },
focusout: function( event ) { focusout: function( event ) {
that.closeTimer = setTimeout( function() { that.closeTimer = setTimeout( function() {
that._close( event ); that._close( event );
}, 150); }, 150);
}, },
"mouseleave .ui-menubar-item": function( event ) { "mouseleave .ui-menubar-item": function( event ) {
if ( that.options.autoExpand ) { if ( that.options.autoExpand ) {
that.closeTimer = setTimeout( function() { that.closeTimer = setTimeout( function() {
that._close( event ); that._close( event );
}, 150); }, 150);
} }
}, },
"mouseenter .ui-menubar-item": function( event ) { "mouseenter .ui-menubar-item": function( event ) {
clearTimeout( that.closeTimer ); clearTimeout( that.closeTimer );
} }
}); });
// Keep track of open submenus // Keep track of open submenus
this.openSubmenus = 0; this.openSubmenus = 0;
}, },
_destroy : function() { _destroy : function() {
this.menuItems this.menuItems
.removeClass( "ui-menubar-item" ) .removeClass( "ui-menubar-item" )
.removeAttr( "role" ); .removeAttr( "role" );
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" );
this.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" )
.removeAttr( "aria-haspopup" ) .removeAttr( "aria-haspopup" )
// TODO unwrap? // TODO unwrap?
.children( "span.ui-button-text" ).each(function( i, e ) { .children( "span.ui-button-text" ).each(function( i, e ) {
var item = $( this ); var item = $( this );
item.parent().html( item.html() ); item.parent().html( item.html() );
}) })
.end() .end()
.children( ".ui-icon" ).remove(); .children( ".ui-icon" ).remove();
this.element.find( ":ui-menu" ) this.element.find( ":ui-menu" )
.menu( "destroy" ) .menu( "destroy" )
.show() .show()
.removeAttr( "aria-hidden" ) .removeAttr( "aria-hidden" )
.removeAttr( "aria-expanded" ) .removeAttr( "aria-expanded" )
.removeAttr( "tabindex" ) .removeAttr( "tabindex" )
.unbind( ".menubar" ); .unbind( ".menubar" );
}, },
_close: function() { _close: function() {
if ( !this.active || !this.active.length ) { if ( !this.active || !this.active.length ) {
return; return;
} }
this.active this.active
.menu( "collapseAll" ) .menu( "collapseAll" )
.hide() .hide()
.attr({ .attr({
"aria-hidden": "true", "aria-hidden": "true",
"aria-expanded": "false" "aria-expanded": "false"
}); });
this.active this.active
.prev() .prev()
.removeClass( "ui-state-active" ) .removeClass( "ui-state-active" )
.removeAttr( "tabIndex" ); .removeAttr( "tabIndex" );
this.active = null; this.active = null;
this.open = false; this.open = false;
this.openSubmenus = 0; this.openSubmenus = 0;
}, },
_open: function( event, menu ) { _open: function( event, menu ) {
// on a single-button menubar, ignore reopening the same menu // on a single-button menubar, ignore reopening the same menu
if ( this.active && this.active[0] === menu[0] ) { if ( this.active && this.active[0] === menu[0] ) {
return; return;
} }
// TODO refactor, almost the same as _close above, but don't remove tabIndex // TODO refactor, almost the same as _close above, but don't remove tabIndex
if ( this.active ) { if ( this.active ) {
this.active this.active
.menu( "collapseAll" ) .menu( "collapseAll" )
.hide() .hide()
.attr({ .attr({
"aria-hidden": "true", "aria-hidden": "true",
"aria-expanded": "false" "aria-expanded": "false"
}); });
this.active this.active
.prev() .prev()
.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) // set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 ); var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 );
this.active = menu this.active = menu
.show() .show()
.position( $.extend({ .position( $.extend({
of: button of: button
}, this.options.position ) ) }, this.options.position ) )
.removeAttr( "aria-hidden" ) .removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" ) .attr( "aria-expanded", "true" )
.menu("focus", event, menu.children( ".ui-menu-item" ).first() ) .menu("focus", event, menu.children( ".ui-menu-item" ).first() )
// TODO need a comment here why both events are triggered // TODO need a comment here why both events are triggered
.focus() .focus()
.focusin(); .focusin();
this.open = true; this.open = true;
}, },
next: function( event ) { next: function( event ) {
if ( this.open && this.active.data( "menu" ).active.has( ".ui-menu" ).length ) { if ( this.open && this.active.data( "menu" ).active.has( ".ui-menu" ).length ) {
// Track number of open submenus and prevent moving to next menubar item // Track number of open submenus and prevent moving to next menubar item
this.openSubmenus++; this.openSubmenus++;
return; return;
} }
this.openSubmenus = 0; this.openSubmenus = 0;
this._move( "next", "first", event ); this._move( "next", "first", event );
}, },
previous: function( event ) { previous: function( event ) {
if ( this.open && this.openSubmenus ) { if ( this.open && this.openSubmenus ) {
// Track number of open submenus and prevent moving to previous menubar item // Track number of open submenus and prevent moving to previous menubar item
this.openSubmenus--; this.openSubmenus--;
return; return;
} }
this.openSubmenus = 0; this.openSubmenus = 0;
this._move( "prev", "last", event ); this._move( "prev", "last", event );
}, },
_move: function( direction, filter, event ) { _move: function( direction, filter, event ) {
var next, var next,
wrapItem; wrapItem;
if ( this.open ) { if ( this.open ) {
next = this.active.closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).first().children( ".ui-menu" ).eq( 0 ); 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 ); wrapItem = this.menuItems[ filter ]().children( ".ui-menu" ).eq( 0 );
} else { } else {
if ( event ) { if ( event ) {
next = $( event.target ).closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).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 ); wrapItem = this.menuItems[ filter ]().children( ".ui-menubar-link" ).eq( 0 );
} else { } else {
next = wrapItem = this.menuItems.children( "a" ).eq( 0 ); next = wrapItem = this.menuItems.children( "a" ).eq( 0 );
} }
} }
if ( next.length ) { if ( next.length ) {
if ( this.open ) { if ( this.open ) {
this._open( event, next ); this._open( event, next );
} else { } else {
next.removeAttr( "tabIndex")[0].focus(); next.removeAttr( "tabIndex")[0].focus();
} }
} else { } else {
if ( this.open ) { if ( this.open ) {
this._open( event, wrapItem ); this._open( event, wrapItem );
} else { } else {
wrapItem.removeAttr( "tabIndex")[0].focus(); wrapItem.removeAttr( "tabIndex")[0].focus();
} }
} }
} }
}); });
}( jQuery )); }( jQuery ));