library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

menu: Second pass style guidance

Browse Source
This commit is contained in:
gnarf 2011-06-10 07:23:01 -05:00
parent e993a9b210
commit 85eeaf0b05
1 changed files with 98 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
ui/jquery.ui.menu.js vendored
View File

@ -15,7 +15,7 @@
var idIncrement = 0; var idIncrement = 0;
$.widget("ui.menu", { $.widget( "ui.menu", {
version: "@VERSION", version: "@VERSION",
defaultElement: "<ul>", defaultElement: "<ul>",
delay: 150, delay: 150,
@ -29,8 +29,8 @@ $.widget("ui.menu", {
var self = this; var self = this;
this.activeMenu = this.element; this.activeMenu = this.element;
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
if (this.element.find(".ui-icon").length) { if ( this.element.find( ".ui-icon" ).length ) {
this.element.addClass("ui-menu-icons"); this.element.addClass( "ui-menu-icons" );
} }
this.element this.element
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
@ -61,7 +61,7 @@ $.widget("ui.menu", {
self.focus( event, target ); self.focus( event, target );
} }
}) })
.bind("mouseout.menu", function( event ) { .bind( "mouseout.menu", function( event ) {
if ( self.options.disabled ) { if ( self.options.disabled ) {
return; return;
} }
@ -110,8 +110,8 @@ $.widget("ui.menu", {
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.ENTER: case $.ui.keyCode.ENTER:
if (self.active.children("a[aria-haspopup='true']").length) { if ( self.active.children( "a[aria-haspopup='true']" ).length ) {
if (self.right( event )) { if ( self.right( event ) ) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
} }
} }
@ -129,7 +129,7 @@ $.widget("ui.menu", {
break; break;
default: default:
event.stopPropagation(); event.stopPropagation();
clearTimeout(self.filterTimer); clearTimeout( self.filterTimer );
var match, var match,
prev = self.previousFilter || "", prev = self.previousFilter || "",
character = String.fromCharCode( event.keyCode ), character = String.fromCharCode( event.keyCode ),
@ -140,26 +140,28 @@ $.widget("ui.menu", {
} else { } else {
character = prev + character; character = prev + character;
} }
function escape(value) { function escape( value ) {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); return value.replace( /[-[\]{}()*+?.,\\^$|#\s]/g , "\\$&" );
} }
match = self.activeMenu.children(".ui-menu-item").filter(function() { match = self.activeMenu.children( ".ui-menu-item" ).filter( function() {
return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); return new RegExp("^" + escape(character), "i")
.test( $( this ).children( "a" ).text() );
}); });
match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match; match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match;
if (!match.length) { if ( !match.length ) {
character = String.fromCharCode(event.keyCode); character = String.fromCharCode(event.keyCode);
match = self.activeMenu.children(".ui-menu-item").filter(function() { match = self.activeMenu.children(".ui-menu-item").filter( function() {
return new RegExp("^" + escape(character), "i").test($(this).children("a").text()); return new RegExp("^" + escape(character), "i")
.test( $( this ).children( "a" ).text() );
}); });
} }
if (match.length) { if ( match.length ) {
self.focus(event, match); self.focus( event, match );
if (match.length > 1) { if (match.length > 1) {
self.previousFilter = character; self.previousFilter = character;
self.filterTimer = setTimeout(function() { self.filterTimer = setTimeout( function() {
delete self.previousFilter; delete self.previousFilter;
}, 1000); }, 1000 );
} else { } else {
delete self.previousFilter; delete self.previousFilter;
} }
@ -174,11 +176,11 @@ $.widget("ui.menu", {
//destroy (sub)menus //destroy (sub)menus
this.element this.element
.removeAttr( "aria-activedescendant" ) .removeAttr( "aria-activedescendant" )
.find("ul") .find( "ul" )
.andSelf() .andSelf()
.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.removeAttr( "role" ) .removeAttr( "role" )
.removeAttr("tabIndex") .removeAttr( "tabIndex" )
.removeAttr( "aria-labelledby" ) .removeAttr( "aria-labelledby" )
.removeAttr( "aria-expanded" ) .removeAttr( "aria-expanded" )
.removeAttr( "aria-hidden" ) .removeAttr( "aria-hidden" )
@ -195,22 +197,23 @@ $.widget("ui.menu", {
.removeAttr( "role" ) .removeAttr( "role" )
.removeAttr( "aria-haspopup" ) .removeAttr( "aria-haspopup" )
.removeAttr( "id" ) .removeAttr( "id" )
.children(".ui-icon").remove(); .children( ".ui-icon" )
.remove();
}, },
refresh: function() { refresh: function() {
var self = this; var self = this,
// initialize nested menus // initialize nested menus
var submenus = this.element.find( "ul:not(.ui-menu)" ) submenus = this.element.find( "ul:not(.ui-menu)" )
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.attr( "role", "menu" ) .attr( "role", "menu" )
.hide() .hide()
.attr( "aria-hidden", "true" ) .attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" ) .attr( "aria-expanded", "false" ),
;
// don't refresh list items that are already adapted // don't refresh list items that are already adapted
var items = submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" ) items = submenus.add( this.element ).children( "li:not(.ui-menu-item):has(a)" )
.addClass( "ui-menu-item" ) .addClass( "ui-menu-item" )
.attr( "role", "presentation" ); .attr( "role", "presentation" );
@ -233,17 +236,19 @@ $.widget("ui.menu", {
}, },
focus: function( event, item ) { focus: function( event, item ) {
var nested, self = this; var nested,
self = this;
this.blur(); this.blur();
if ( this._hasScroll() ) { if ( this._hasScroll() ) {
var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0, var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true ) ) || 0,
paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0, paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true ) ) || 0,
offset = item.offset().top - this.element.offset().top - borderTop - paddingTop, offset = item.offset().top - this.element.offset().top - borderTop - paddingTop,
scroll = this.element.scrollTop(), scroll = this.element.scrollTop(),
elementHeight = this.element.height(), elementHeight = this.element.height(),
itemHeight = item.height(); itemHeight = item.height();
if ( offset < 0 ) { if ( offset < 0 ) {
this.element.scrollTop( scroll + offset ); this.element.scrollTop( scroll + offset );
} else if ( offset + itemHeight > elementHeight ) { } else if ( offset + itemHeight > elementHeight ) {
@ -273,67 +278,90 @@ $.widget("ui.menu", {
this._trigger( "focus", event, { item: item } ); this._trigger( "focus", event, { item: item } );
}, },
blur: function(event) { blur: function( event ) {
if (!this.active) { if ( !this.active ) {
return; return;
} }
clearTimeout(this.timer); clearTimeout( this.timer );
this.active.children( "a" ).removeClass( "ui-state-focus" ); this.active.children( "a" ).removeClass( "ui-state-focus" );
this.active = null; this.active = null;
}, },
_startOpening: function(submenu) { _startOpening: function( submenu ) {
clearTimeout(this.timer); clearTimeout( this.timer );
var self = this; var self = this;
self.timer = setTimeout(function() { self.timer = setTimeout( function() {
self._close(); self._close();
self._open(submenu); self._open( submenu );
}, self.delay); }, self.delay );
}, },
_open: function(submenu) { _open: function( submenu ) {
clearTimeout(this.timer); clearTimeout( this.timer );
this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); this.element
.find( ".ui-menu" )
.not( submenu.parents() )
.hide()
.attr( "aria-hidden", "true" );
var position = $.extend({}, { var position = $.extend({}, {
of: this.active of: this.active
}, $.type(this.options.position) == "function" }, $.type(this.options.position) == "function"
? this.options.position(this.active) ? this.options.position(this.active)
: this.options.position : this.options.position
); );
submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position);
submenu.show()
.removeAttr( "aria-hidden" )
.attr( "aria-expanded", "true" )
.position( position );
}, },
closeAll: function() { closeAll: function() {
this.element this.element
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() .find( "ul" )
.find("a.ui-state-active").removeClass("ui-state-active"); .hide()
.attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" )
.end()
.find( "a.ui-state-active" )
.removeClass( "ui-state-active" );
this.blur(); this.blur();
this.activeMenu = this.element; this.activeMenu = this.element;
}, },
_close: function() { _close: function() {
this.active.parent() this.active.parent()
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end() .find( "ul" )
.find("a.ui-state-active").removeClass("ui-state-active"); .hide()
.attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" )
.end()
.find( "a.ui-state-active" )
.removeClass( "ui-state-active" );
}, },
left: function(event) { left: function( event ) {
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first(); var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
if (newItem && newItem.length) { if ( newItem && newItem.length ) {
this.active.parent().attr("aria-hidden", "true").attr("aria-expanded", "false").hide(); this.active.parent()
this.focus(event, newItem); .attr("aria-hidden", "true")
.attr("aria-expanded", "false")
.hide();
this.focus( event, newItem );
return true; return true;
} }
}, },
right: function(event) { right: function( event ) {
var self= this; var self = this,
var newItem = this.active && this.active.children("ul").children("li").first(); newItem = this.active && this.active.children("ul").children("li").first();
if (newItem && newItem.length) {
this._open(newItem.parent()); if ( newItem && newItem.length ) {
var current = this.active; this._open( newItem.parent() );
//timeout so Firefox will not hide activedescendant change in expanding submenu from AT //timeout so Firefox will not hide activedescendant change in expanding submenu from AT
setTimeout( function() { setTimeout( function() {
@ -359,16 +387,16 @@ $.widget("ui.menu", {
return this.active && !this.active.nextAll( ".ui-menu-item" ).length; return this.active && !this.active.nextAll( ".ui-menu-item" ).length;
}, },
_move: function(direction, edge, filter, event) { _move: function( direction, edge, filter, event ) {
if ( !this.active ) { if ( !this.active ) {
this.focus( event, this.activeMenu.children(edge)[filter]() ); this.focus( event, this.activeMenu.children( edge )[ filter ]() );
return; return;
} }
var next = this.active[ direction + "All" ]( ".ui-menu-item" ).eq( 0 ); var next = this.active[ direction + "All" ]( ".ui-menu-item" ).eq( 0 );
if ( next.length ) { if ( next.length ) {
this.focus( event, next ); this.focus( event, next );
} else { } else {
this.focus( event, this.activeMenu.children(edge)[filter]() ); this.focus( event, this.activeMenu.children( edge )[ filter ]() );
} }
}, },