mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Menu: Fix style issues
Closes gh-1491
This commit is contained in:
parent
4e6e27d073
commit
a10847a9db
90
ui/menu.js
90
ui/menu.js
@ -16,11 +16,11 @@
|
|||||||
//>>css.structure: ../themes/base/menu.css
|
//>>css.structure: ../themes/base/menu.css
|
||||||
//>>css.theme: ../themes/base/theme.css
|
//>>css.theme: ../themes/base/theme.css
|
||||||
|
|
||||||
(function( factory ) {
|
( function( factory ) {
|
||||||
if ( typeof define === "function" && define.amd ) {
|
if ( typeof define === "function" && define.amd ) {
|
||||||
|
|
||||||
// AMD. Register as an anonymous module.
|
// AMD. Register as an anonymous module.
|
||||||
define([
|
define( [
|
||||||
"jquery",
|
"jquery",
|
||||||
"./core",
|
"./core",
|
||||||
"./widget",
|
"./widget",
|
||||||
@ -31,7 +31,7 @@
|
|||||||
// Browser globals
|
// Browser globals
|
||||||
factory( jQuery );
|
factory( jQuery );
|
||||||
}
|
}
|
||||||
}(function( $ ) {
|
}( function( $ ) {
|
||||||
|
|
||||||
return $.widget( "ui.menu", {
|
return $.widget( "ui.menu", {
|
||||||
version: "@VERSION",
|
version: "@VERSION",
|
||||||
@ -64,10 +64,10 @@ return $.widget( "ui.menu", {
|
|||||||
this.mouseHandled = false;
|
this.mouseHandled = false;
|
||||||
this.element
|
this.element
|
||||||
.uniqueId()
|
.uniqueId()
|
||||||
.attr({
|
.attr( {
|
||||||
role: this.options.role,
|
role: this.options.role,
|
||||||
tabIndex: 0
|
tabIndex: 0
|
||||||
});
|
} );
|
||||||
|
|
||||||
if ( this.options.disabled ) {
|
if ( this.options.disabled ) {
|
||||||
this._addClass( null, "ui-state-disabled" );
|
this._addClass( null, "ui-state-disabled" );
|
||||||
@ -75,7 +75,7 @@ return $.widget( "ui.menu", {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._addClass( "ui-menu", "ui-widget ui-widget-content" );
|
this._addClass( "ui-menu", "ui-widget ui-widget-content" );
|
||||||
this._on({
|
this._on( {
|
||||||
|
|
||||||
// Prevent focus from sticking to links inside menu after clicking
|
// Prevent focus from sticking to links inside menu after clicking
|
||||||
// them (focus should always stay on UL during navigation).
|
// them (focus should always stay on UL during navigation).
|
||||||
@ -134,14 +134,14 @@ return $.widget( "ui.menu", {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
blur: function( event ) {
|
blur: function( event ) {
|
||||||
this._delay(function() {
|
this._delay( function() {
|
||||||
if ( !$.contains( this.element[0], $.ui.safeActiveElement( this.document[0] ) ) ) {
|
if ( !$.contains( this.element[ 0 ], $.ui.safeActiveElement( this.document[ 0 ] ) ) ) {
|
||||||
this.collapseAll( event );
|
this.collapseAll( event );
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
},
|
},
|
||||||
keydown: "_keydown"
|
keydown: "_keydown"
|
||||||
});
|
} );
|
||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
|
|
||||||
@ -155,7 +155,7 @@ return $.widget( "ui.menu", {
|
|||||||
// Reset the mouseHandled flag
|
// Reset the mouseHandled flag
|
||||||
this.mouseHandled = false;
|
this.mouseHandled = false;
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
},
|
},
|
||||||
|
|
||||||
_destroy: function() {
|
_destroy: function() {
|
||||||
@ -181,12 +181,12 @@ return $.widget( "ui.menu", {
|
|||||||
.removeUniqueId()
|
.removeUniqueId()
|
||||||
.show();
|
.show();
|
||||||
|
|
||||||
submenus.children().each(function() {
|
submenus.children().each( function() {
|
||||||
var elem = $( this );
|
var elem = $( this );
|
||||||
if ( elem.data( "ui-menu-submenu-caret" ) ) {
|
if ( elem.data( "ui-menu-submenu-caret" ) ) {
|
||||||
elem.remove();
|
elem.remove();
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
},
|
},
|
||||||
|
|
||||||
_keydown: function( event ) {
|
_keydown: function( event ) {
|
||||||
@ -256,7 +256,7 @@ return $.widget( "ui.menu", {
|
|||||||
if ( match.length ) {
|
if ( match.length ) {
|
||||||
this.focus( event, match );
|
this.focus( event, match );
|
||||||
this.previousFilter = character;
|
this.previousFilter = character;
|
||||||
this.filterTimer = this._delay(function() {
|
this.filterTimer = this._delay( function() {
|
||||||
delete this.previousFilter;
|
delete this.previousFilter;
|
||||||
}, 1000 );
|
}, 1000 );
|
||||||
} else {
|
} else {
|
||||||
@ -290,12 +290,12 @@ return $.widget( "ui.menu", {
|
|||||||
// Initialize nested menus
|
// Initialize nested menus
|
||||||
newSubmenus = submenus.filter( ":not(.ui-menu)" )
|
newSubmenus = submenus.filter( ":not(.ui-menu)" )
|
||||||
.hide()
|
.hide()
|
||||||
.attr({
|
.attr( {
|
||||||
role: this.options.role,
|
role: this.options.role,
|
||||||
"aria-hidden": "true",
|
"aria-hidden": "true",
|
||||||
"aria-expanded": "false"
|
"aria-expanded": "false"
|
||||||
})
|
} )
|
||||||
.each(function() {
|
.each( function() {
|
||||||
var menu = $( this ),
|
var menu = $( this ),
|
||||||
item = menu.prev(),
|
item = menu.prev(),
|
||||||
submenuCaret = $( "<span>" ).data( "ui-menu-submenu-caret", true );
|
submenuCaret = $( "<span>" ).data( "ui-menu-submenu-caret", true );
|
||||||
@ -305,7 +305,7 @@ return $.widget( "ui.menu", {
|
|||||||
.attr( "aria-haspopup", "true" )
|
.attr( "aria-haspopup", "true" )
|
||||||
.prepend( submenuCaret );
|
.prepend( submenuCaret );
|
||||||
menu.attr( "aria-labelledby", item.attr( "id" ) );
|
menu.attr( "aria-labelledby", item.attr( "id" ) );
|
||||||
});
|
} );
|
||||||
|
|
||||||
this._addClass( newSubmenus, "ui-menu", "ui-widget ui-widget-content ui-front" );
|
this._addClass( newSubmenus, "ui-menu", "ui-widget ui-widget-content ui-front" );
|
||||||
|
|
||||||
@ -313,22 +313,22 @@ return $.widget( "ui.menu", {
|
|||||||
items = menus.find( this.options.items );
|
items = menus.find( this.options.items );
|
||||||
|
|
||||||
// Initialize menu-items containing spaces and/or dashes only as dividers
|
// Initialize menu-items containing spaces and/or dashes only as dividers
|
||||||
items.not( ".ui-menu-item" ).each(function() {
|
items.not( ".ui-menu-item" ).each( function() {
|
||||||
var item = $( this );
|
var item = $( this );
|
||||||
if ( that._isDivider( item ) ) {
|
if ( that._isDivider( item ) ) {
|
||||||
that._addClass( item, "ui-menu-divider", "ui-widget-content" );
|
that._addClass( item, "ui-menu-divider", "ui-widget-content" );
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
|
|
||||||
// Don't refresh list items that are already adapted
|
// Don't refresh list items that are already adapted
|
||||||
newItems = items.not( ".ui-menu-item, .ui-menu-divider" );
|
newItems = items.not( ".ui-menu-item, .ui-menu-divider" );
|
||||||
newWrappers = newItems.children()
|
newWrappers = newItems.children()
|
||||||
.not( ".ui-menu" )
|
.not( ".ui-menu" )
|
||||||
.uniqueId()
|
.uniqueId()
|
||||||
.attr({
|
.attr( {
|
||||||
tabIndex: -1,
|
tabIndex: -1,
|
||||||
role: this._itemRole()
|
role: this._itemRole()
|
||||||
});
|
} );
|
||||||
this._addClass( newItems, "ui-menu-item" )
|
this._addClass( newItems, "ui-menu-item" )
|
||||||
._addClass( newWrappers, "ui-menu-item-wrapper" );
|
._addClass( newWrappers, "ui-menu-item-wrapper" );
|
||||||
|
|
||||||
@ -388,14 +388,14 @@ return $.widget( "ui.menu", {
|
|||||||
if ( event && event.type === "keydown" ) {
|
if ( event && event.type === "keydown" ) {
|
||||||
this._close();
|
this._close();
|
||||||
} else {
|
} else {
|
||||||
this.timer = this._delay(function() {
|
this.timer = this._delay( function() {
|
||||||
this._close();
|
this._close();
|
||||||
}, this.delay );
|
}, this.delay );
|
||||||
}
|
}
|
||||||
|
|
||||||
nested = item.children( ".ui-menu" );
|
nested = item.children( ".ui-menu" );
|
||||||
if ( nested.length && event && ( /^mouse/.test( event.type ) ) ) {
|
if ( nested.length && event && ( /^mouse/.test( event.type ) ) ) {
|
||||||
this._startOpening(nested);
|
this._startOpening( nested );
|
||||||
}
|
}
|
||||||
this.activeMenu = item.parent();
|
this.activeMenu = item.parent();
|
||||||
|
|
||||||
@ -405,8 +405,8 @@ return $.widget( "ui.menu", {
|
|||||||
_scrollIntoView: function( item ) {
|
_scrollIntoView: function( item ) {
|
||||||
var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
|
var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
|
||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) || 0;
|
borderTop = parseFloat( $.css( this.activeMenu[ 0 ], "borderTopWidth" ) ) || 0;
|
||||||
paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) || 0;
|
paddingTop = parseFloat( $.css( this.activeMenu[ 0 ], "paddingTop" ) ) || 0;
|
||||||
offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
|
offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
|
||||||
scroll = this.activeMenu.scrollTop();
|
scroll = this.activeMenu.scrollTop();
|
||||||
elementHeight = this.activeMenu.height();
|
elementHeight = this.activeMenu.height();
|
||||||
@ -445,14 +445,14 @@ return $.widget( "ui.menu", {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.timer = this._delay(function() {
|
this.timer = this._delay( function() {
|
||||||
this._close();
|
this._close();
|
||||||
this._open( submenu );
|
this._open( submenu );
|
||||||
}, this.delay );
|
}, this.delay );
|
||||||
},
|
},
|
||||||
|
|
||||||
_open: function( submenu ) {
|
_open: function( submenu ) {
|
||||||
var position = $.extend({
|
var position = $.extend( {
|
||||||
of: this.active
|
of: this.active
|
||||||
}, this.options.position );
|
}, this.options.position );
|
||||||
|
|
||||||
@ -470,7 +470,7 @@ return $.widget( "ui.menu", {
|
|||||||
|
|
||||||
collapseAll: function( event, all ) {
|
collapseAll: function( event, all ) {
|
||||||
clearTimeout( this.timer );
|
clearTimeout( this.timer );
|
||||||
this.timer = this._delay(function() {
|
this.timer = this._delay( function() {
|
||||||
// If we were passed an event, look for the submenu that contains the event
|
// If we were passed an event, look for the submenu that contains the event
|
||||||
var currentMenu = all ? this.element :
|
var currentMenu = all ? this.element :
|
||||||
$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
|
$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
|
||||||
@ -527,16 +527,16 @@ return $.widget( "ui.menu", {
|
|||||||
var newItem = this.active &&
|
var newItem = this.active &&
|
||||||
this.active
|
this.active
|
||||||
.children( ".ui-menu " )
|
.children( ".ui-menu " )
|
||||||
.find( this.options.items )
|
.find( this.options.items )
|
||||||
.first();
|
.first();
|
||||||
|
|
||||||
if ( newItem && newItem.length ) {
|
if ( newItem && newItem.length ) {
|
||||||
this._open( newItem.parent() );
|
this._open( newItem.parent() );
|
||||||
|
|
||||||
// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
|
// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
|
||||||
this._delay(function() {
|
this._delay( function() {
|
||||||
this.focus( event, newItem );
|
this.focus( event, newItem );
|
||||||
});
|
} );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -589,10 +589,10 @@ return $.widget( "ui.menu", {
|
|||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
base = this.active.offset().top;
|
base = this.active.offset().top;
|
||||||
height = this.element.height();
|
height = this.element.height();
|
||||||
this.active.nextAll( ".ui-menu-item" ).each(function() {
|
this.active.nextAll( ".ui-menu-item" ).each( function() {
|
||||||
item = $( this );
|
item = $( this );
|
||||||
return item.offset().top - base - height < 0;
|
return item.offset().top - base - height < 0;
|
||||||
});
|
} );
|
||||||
|
|
||||||
this.focus( event, item );
|
this.focus( event, item );
|
||||||
} else {
|
} else {
|
||||||
@ -613,10 +613,10 @@ return $.widget( "ui.menu", {
|
|||||||
if ( this._hasScroll() ) {
|
if ( this._hasScroll() ) {
|
||||||
base = this.active.offset().top;
|
base = this.active.offset().top;
|
||||||
height = this.element.height();
|
height = this.element.height();
|
||||||
this.active.prevAll( ".ui-menu-item" ).each(function() {
|
this.active.prevAll( ".ui-menu-item" ).each( function() {
|
||||||
item = $( this );
|
item = $( this );
|
||||||
return item.offset().top - base + height > 0;
|
return item.offset().top - base + height > 0;
|
||||||
});
|
} );
|
||||||
|
|
||||||
this.focus( event, item );
|
this.focus( event, item );
|
||||||
} else {
|
} else {
|
||||||
@ -646,13 +646,13 @@ return $.widget( "ui.menu", {
|
|||||||
return this.activeMenu
|
return this.activeMenu
|
||||||
.find( this.options.items )
|
.find( this.options.items )
|
||||||
|
|
||||||
// Only match on items, not dividers or other content (#10571)
|
// Only match on items, not dividers or other content (#10571)
|
||||||
.filter( ".ui-menu-item" )
|
.filter( ".ui-menu-item" )
|
||||||
.filter(function() {
|
.filter( function() {
|
||||||
return regex.test(
|
return regex.test(
|
||||||
$.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) );
|
$.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) );
|
||||||
});
|
} );
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
|
|
||||||
}));
|
} ) );
|
||||||
|
Loading…
Reference in New Issue
Block a user