mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Accordion: Fix style issues
Closes gh-1495
This commit is contained in:
parent
b99f5b305f
commit
1e266bb636
136
ui/accordion.js
136
ui/accordion.js
@ -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 );
|
||||||
}
|
}
|
||||||
});
|
} );
|
||||||
|
|
||||||
}));
|
} ) );
|
||||||
|
Loading…
Reference in New Issue
Block a user