Accordion: Fix style issues

Closes gh-1495
This commit is contained in:
Jörn Zaefferer 2015-03-14 12:19:32 +01:00
parent b99f5b305f
commit 1e266bb636

View File

@ -16,11 +16,11 @@
//>>css.structure: ../themes/base/accordion.css //>>css.structure: ../themes/base/accordion.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"
@ -30,7 +30,7 @@
// Browser globals // Browser globals
factory( jQuery ); factory( jQuery );
} }
}(function( $ ) { }( function( $ ) {
return $.widget( "ui.accordion", { return $.widget( "ui.accordion", {
version: "@VERSION", version: "@VERSION",
@ -80,7 +80,7 @@ return $.widget( "ui.accordion", {
this.element.attr( "role", "tablist" ); this.element.attr( "role", "tablist" );
// don't allow collapsible: false and active: false / null // don't allow collapsible: false and active: false / null
if ( !options.collapsible && (options.active === false || options.active == null) ) { if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
options.active = 0; options.active = 0;
} }
@ -200,24 +200,24 @@ return $.widget( "ui.accordion", {
toFocus = false; toFocus = false;
switch ( event.keyCode ) { switch ( event.keyCode ) {
case keyCode.RIGHT: case keyCode.RIGHT:
case keyCode.DOWN: case keyCode.DOWN:
toFocus = this.headers[ ( currentIndex + 1 ) % length ]; toFocus = this.headers[ ( currentIndex + 1 ) % length ];
break; break;
case keyCode.LEFT: case keyCode.LEFT:
case keyCode.UP: case keyCode.UP:
toFocus = this.headers[ ( currentIndex - 1 + length ) % length ]; toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
break; break;
case keyCode.SPACE: case keyCode.SPACE:
case keyCode.ENTER: case keyCode.ENTER:
this._eventHandler( event ); this._eventHandler( event );
break; break;
case keyCode.HOME: case keyCode.HOME:
toFocus = this.headers[ 0 ]; toFocus = this.headers[ 0 ];
break; break;
case keyCode.END: case keyCode.END:
toFocus = this.headers[ length - 1 ]; toFocus = this.headers[ length - 1 ];
break; break;
} }
if ( toFocus ) { if ( toFocus ) {
@ -248,7 +248,7 @@ return $.widget( "ui.accordion", {
// was active, but active panel is gone // was active, but active panel is gone
} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) { } else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
// all remaining panel are disabled // all remaining panel are disabled
if ( this.headers.length === this.headers.find(".ui-state-disabled").length ) { if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
options.active = false; options.active = false;
this.active = $(); this.active = $();
// activate previous panel // activate previous panel
@ -298,43 +298,43 @@ return $.widget( "ui.accordion", {
this.headers this.headers
.attr( "role", "tab" ) .attr( "role", "tab" )
.each(function() { .each( function() {
var header = $( this ), var header = $( this ),
headerId = header.uniqueId().attr( "id" ), headerId = header.uniqueId().attr( "id" ),
panel = header.next(), panel = header.next(),
panelId = panel.uniqueId().attr( "id" ); panelId = panel.uniqueId().attr( "id" );
header.attr( "aria-controls", panelId ); header.attr( "aria-controls", panelId );
panel.attr( "aria-labelledby", headerId ); panel.attr( "aria-labelledby", headerId );
}) } )
.next() .next()
.attr( "role", "tabpanel" ); .attr( "role", "tabpanel" );
this.headers this.headers
.not( this.active ) .not( this.active )
.attr({ .attr( {
"aria-selected": "false", "aria-selected": "false",
"aria-expanded": "false", "aria-expanded": "false",
tabIndex: -1 tabIndex: -1
}) } )
.next() .next()
.attr({ .attr( {
"aria-hidden": "true" "aria-hidden": "true"
}) } )
.hide(); .hide();
// make sure at least one header is in the tab order // make sure at least one header is in the tab order
if ( !this.active.length ) { if ( !this.active.length ) {
this.headers.eq( 0 ).attr( "tabIndex", 0 ); this.headers.eq( 0 ).attr( "tabIndex", 0 );
} else { } else {
this.active.attr({ this.active.attr( {
"aria-selected": "true", "aria-selected": "true",
"aria-expanded": "true", "aria-expanded": "true",
tabIndex: 0 tabIndex: 0
}) } )
.next() .next()
.attr({ .attr( {
"aria-hidden": "false" "aria-hidden": "false"
}); } );
} }
this._createIcons(); this._createIcons();
@ -343,7 +343,7 @@ return $.widget( "ui.accordion", {
if ( heightStyle === "fill" ) { if ( heightStyle === "fill" ) {
maxHeight = parent.height(); maxHeight = parent.height();
this.element.siblings( ":visible" ).each(function() { this.element.siblings( ":visible" ).each( function() {
var elem = $( this ), var elem = $( this ),
position = elem.css( "position" ); position = elem.css( "position" );
@ -351,24 +351,24 @@ return $.widget( "ui.accordion", {
return; return;
} }
maxHeight -= elem.outerHeight( true ); maxHeight -= elem.outerHeight( true );
}); } );
this.headers.each(function() { this.headers.each( function() {
maxHeight -= $( this ).outerHeight( true ); maxHeight -= $( this ).outerHeight( true );
}); } );
this.headers.next() this.headers.next()
.each(function() { .each( function() {
$( this ).height( Math.max( 0, maxHeight - $( this ).height( Math.max( 0, maxHeight -
$( this ).innerHeight() + $( this ).height() ) ); $( this ).innerHeight() + $( this ).height() ) );
}) } )
.css( "overflow", "auto" ); .css( "overflow", "auto" );
} else if ( heightStyle === "auto" ) { } else if ( heightStyle === "auto" ) {
maxHeight = 0; maxHeight = 0;
this.headers.next() this.headers.next()
.each(function() { .each( function() {
maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
}) } )
.height( maxHeight ); .height( maxHeight );
} }
}, },
@ -384,11 +384,11 @@ return $.widget( "ui.accordion", {
// trying to collapse, simulate a click on the currently active header // trying to collapse, simulate a click on the currently active header
active = active || this.active[ 0 ]; active = active || this.active[ 0 ];
this._eventHandler({ this._eventHandler( {
target: active, target: active,
currentTarget: active, currentTarget: active,
preventDefault: $.noop preventDefault: $.noop
}); } );
}, },
_findActive: function( selector ) { _findActive: function( selector ) {
@ -402,12 +402,12 @@ return $.widget( "ui.accordion", {
if ( event ) { if ( event ) {
$.each( event.split( " " ), function( index, eventName ) { $.each( event.split( " " ), function( index, eventName ) {
events[ eventName ] = "_eventHandler"; events[ eventName ] = "_eventHandler";
}); } );
} }
this._off( this.headers.add( this.headers.next() ) ); this._off( this.headers.add( this.headers.next() ) );
this._on( this.headers, events ); this._on( this.headers, events );
this._on( this.headers.next(), { keydown: "_panelKeyDown" }); this._on( this.headers.next(), { keydown: "_panelKeyDown" } );
this._hoverable( this.headers ); this._hoverable( this.headers );
this._focusable( this.headers ); this._focusable( this.headers );
}, },
@ -484,36 +484,36 @@ return $.widget( "ui.accordion", {
this._toggleComplete( data ); this._toggleComplete( data );
} }
toHide.attr({ toHide.attr( {
"aria-hidden": "true" "aria-hidden": "true"
}); } );
toHide.prev().attr({ toHide.prev().attr( {
"aria-selected": "false", "aria-selected": "false",
"aria-expanded": "false" "aria-expanded": "false"
}); } );
// if we're switching panels, remove the old header from the tab order // if we're switching panels, remove the old header from the tab order
// if we're opening from collapsed state, remove the previous header from the tab order // if we're opening from collapsed state, remove the previous header from the tab order
// if we're collapsing, then keep the collapsing header in the tab order // if we're collapsing, then keep the collapsing header in the tab order
if ( toShow.length && toHide.length ) { if ( toShow.length && toHide.length ) {
toHide.prev().attr({ toHide.prev().attr( {
"tabIndex": -1, "tabIndex": -1,
"aria-expanded": "false" "aria-expanded": "false"
}); } );
} else if ( toShow.length ) { } else if ( toShow.length ) {
this.headers.filter(function() { this.headers.filter( function() {
return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0; return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
}) } )
.attr( "tabIndex", -1 ); .attr( "tabIndex", -1 );
} }
toShow toShow
.attr( "aria-hidden", "false" ) .attr( "aria-hidden", "false" )
.prev() .prev()
.attr({ .attr( {
"aria-selected": "true", "aria-selected": "true",
"aria-expanded": "true", "aria-expanded": "true",
tabIndex: 0 tabIndex: 0
}); } );
}, },
_animate: function( toShow, toHide, data ) { _animate: function( toShow, toHide, data ) {
@ -553,7 +553,7 @@ return $.widget( "ui.accordion", {
step: function( now, fx ) { step: function( now, fx ) {
fx.now = Math.round( now ); fx.now = Math.round( now );
} }
}); } );
toShow toShow
.hide() .hide()
.animate( this.showProps, { .animate( this.showProps, {
@ -571,7 +571,7 @@ return $.widget( "ui.accordion", {
adjust = 0; adjust = 0;
} }
} }
}); } );
}, },
_toggleComplete: function( data ) { _toggleComplete: function( data ) {
@ -588,6 +588,6 @@ return $.widget( "ui.accordion", {
} }
this._trigger( "activate", null, data ); this._trigger( "activate", null, data );
} }
}); } );
})); } ) );