mirror of
https://github.com/WordPress/WordPress.git
synced 2024-07-02 09:44:58 +02:00
e175db4ae1
The final release is expected at the beginning of October. Updating to rc2 now gives everybody plenty of time to test and report any issues either with UI 1.13.0 or with the WordPress implementation. Props Clorith, mgol, azaozz. See #52163. Built from https://develop.svn.wordpress.org/trunk@51794 git-svn-id: http://core.svn.wordpress.org/trunk@51401 1a063a9b-81f0-0310-95a4-ce76da25c4cd
620 lines
16 KiB
JavaScript
620 lines
16 KiB
JavaScript
/*!
|
|
* jQuery UI Accordion 1.13.0-rc.2
|
|
* http://jqueryui.com
|
|
*
|
|
* Copyright jQuery Foundation and other contributors
|
|
* Released under the MIT license.
|
|
* http://jquery.org/license
|
|
*/
|
|
|
|
//>>label: Accordion
|
|
//>>group: Widgets
|
|
/* eslint-disable max-len */
|
|
//>>description: Displays collapsible content panels for presenting information in a limited amount of space.
|
|
/* eslint-enable max-len */
|
|
//>>docs: http://api.jqueryui.com/accordion/
|
|
//>>demos: http://jqueryui.com/accordion/
|
|
//>>css.structure: ../../themes/base/core.css
|
|
//>>css.structure: ../../themes/base/accordion.css
|
|
//>>css.theme: ../../themes/base/theme.css
|
|
|
|
( function( factory ) {
|
|
"use strict";
|
|
|
|
if ( typeof define === "function" && define.amd ) {
|
|
|
|
// AMD. Register as an anonymous module.
|
|
define( [
|
|
"jquery",
|
|
"./core"
|
|
], factory );
|
|
} else {
|
|
|
|
// Browser globals
|
|
factory( jQuery );
|
|
}
|
|
} )( function( $ ) {
|
|
"use strict";
|
|
|
|
return $.widget( "ui.accordion", {
|
|
version: "1.13.0-rc.2",
|
|
options: {
|
|
active: 0,
|
|
animate: {},
|
|
classes: {
|
|
"ui-accordion-header": "ui-corner-top",
|
|
"ui-accordion-header-collapsed": "ui-corner-all",
|
|
"ui-accordion-content": "ui-corner-bottom"
|
|
},
|
|
collapsible: false,
|
|
event: "click",
|
|
header: function( elem ) {
|
|
return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() );
|
|
},
|
|
heightStyle: "auto",
|
|
icons: {
|
|
activeHeader: "ui-icon-triangle-1-s",
|
|
header: "ui-icon-triangle-1-e"
|
|
},
|
|
|
|
// Callbacks
|
|
activate: null,
|
|
beforeActivate: null
|
|
},
|
|
|
|
hideProps: {
|
|
borderTopWidth: "hide",
|
|
borderBottomWidth: "hide",
|
|
paddingTop: "hide",
|
|
paddingBottom: "hide",
|
|
height: "hide"
|
|
},
|
|
|
|
showProps: {
|
|
borderTopWidth: "show",
|
|
borderBottomWidth: "show",
|
|
paddingTop: "show",
|
|
paddingBottom: "show",
|
|
height: "show"
|
|
},
|
|
|
|
_create: function() {
|
|
var options = this.options;
|
|
|
|
this.prevShow = this.prevHide = $();
|
|
this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
|
|
this.element.attr( "role", "tablist" );
|
|
|
|
// Don't allow collapsible: false and active: false / null
|
|
if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
|
|
options.active = 0;
|
|
}
|
|
|
|
this._processPanels();
|
|
|
|
// handle negative values
|
|
if ( options.active < 0 ) {
|
|
options.active += this.headers.length;
|
|
}
|
|
this._refresh();
|
|
},
|
|
|
|
_getCreateEventData: function() {
|
|
return {
|
|
header: this.active,
|
|
panel: !this.active.length ? $() : this.active.next()
|
|
};
|
|
},
|
|
|
|
_createIcons: function() {
|
|
var icon, children,
|
|
icons = this.options.icons;
|
|
|
|
if ( icons ) {
|
|
icon = $( "<span>" );
|
|
this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
|
|
icon.prependTo( this.headers );
|
|
children = this.active.children( ".ui-accordion-header-icon" );
|
|
this._removeClass( children, icons.header )
|
|
._addClass( children, null, icons.activeHeader )
|
|
._addClass( this.headers, "ui-accordion-icons" );
|
|
}
|
|
},
|
|
|
|
_destroyIcons: function() {
|
|
this._removeClass( this.headers, "ui-accordion-icons" );
|
|
this.headers.children( ".ui-accordion-header-icon" ).remove();
|
|
},
|
|
|
|
_destroy: function() {
|
|
var contents;
|
|
|
|
// Clean up main element
|
|
this.element.removeAttr( "role" );
|
|
|
|
// Clean up headers
|
|
this.headers
|
|
.removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" )
|
|
.removeUniqueId();
|
|
|
|
this._destroyIcons();
|
|
|
|
// Clean up content panels
|
|
contents = this.headers.next()
|
|
.css( "display", "" )
|
|
.removeAttr( "role aria-hidden aria-labelledby" )
|
|
.removeUniqueId();
|
|
|
|
if ( this.options.heightStyle !== "content" ) {
|
|
contents.css( "height", "" );
|
|
}
|
|
},
|
|
|
|
_setOption: function( key, value ) {
|
|
if ( key === "active" ) {
|
|
|
|
// _activate() will handle invalid values and update this.options
|
|
this._activate( value );
|
|
return;
|
|
}
|
|
|
|
if ( key === "event" ) {
|
|
if ( this.options.event ) {
|
|
this._off( this.headers, this.options.event );
|
|
}
|
|
this._setupEvents( value );
|
|
}
|
|
|
|
this._super( key, value );
|
|
|
|
// Setting collapsible: false while collapsed; open first panel
|
|
if ( key === "collapsible" && !value && this.options.active === false ) {
|
|
this._activate( 0 );
|
|
}
|
|
|
|
if ( key === "icons" ) {
|
|
this._destroyIcons();
|
|
if ( value ) {
|
|
this._createIcons();
|
|
}
|
|
}
|
|
},
|
|
|
|
_setOptionDisabled: function( value ) {
|
|
this._super( value );
|
|
|
|
this.element.attr( "aria-disabled", value );
|
|
|
|
// Support: IE8 Only
|
|
// #5332 / #6059 - opacity doesn't cascade to positioned elements in IE
|
|
// so we need to add the disabled class to the headers and panels
|
|
this._toggleClass( null, "ui-state-disabled", !!value );
|
|
this._toggleClass( this.headers.add( this.headers.next() ), null, "ui-state-disabled",
|
|
!!value );
|
|
},
|
|
|
|
_keydown: function( event ) {
|
|
if ( event.altKey || event.ctrlKey ) {
|
|
return;
|
|
}
|
|
|
|
var keyCode = $.ui.keyCode,
|
|
length = this.headers.length,
|
|
currentIndex = this.headers.index( event.target ),
|
|
toFocus = false;
|
|
|
|
switch ( event.keyCode ) {
|
|
case keyCode.RIGHT:
|
|
case keyCode.DOWN:
|
|
toFocus = this.headers[ ( currentIndex + 1 ) % length ];
|
|
break;
|
|
case keyCode.LEFT:
|
|
case keyCode.UP:
|
|
toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
|
|
break;
|
|
case keyCode.SPACE:
|
|
case keyCode.ENTER:
|
|
this._eventHandler( event );
|
|
break;
|
|
case keyCode.HOME:
|
|
toFocus = this.headers[ 0 ];
|
|
break;
|
|
case keyCode.END:
|
|
toFocus = this.headers[ length - 1 ];
|
|
break;
|
|
}
|
|
|
|
if ( toFocus ) {
|
|
$( event.target ).attr( "tabIndex", -1 );
|
|
$( toFocus ).attr( "tabIndex", 0 );
|
|
$( toFocus ).trigger( "focus" );
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
|
|
_panelKeyDown: function( event ) {
|
|
if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) {
|
|
$( event.currentTarget ).prev().trigger( "focus" );
|
|
}
|
|
},
|
|
|
|
refresh: function() {
|
|
var options = this.options;
|
|
this._processPanels();
|
|
|
|
// Was collapsed or no panel
|
|
if ( ( options.active === false && options.collapsible === true ) ||
|
|
!this.headers.length ) {
|
|
options.active = false;
|
|
this.active = $();
|
|
|
|
// active false only when collapsible is true
|
|
} else if ( options.active === false ) {
|
|
this._activate( 0 );
|
|
|
|
// was active, but active panel is gone
|
|
} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
|
|
|
|
// all remaining panel are disabled
|
|
if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
|
|
options.active = false;
|
|
this.active = $();
|
|
|
|
// activate previous panel
|
|
} else {
|
|
this._activate( Math.max( 0, options.active - 1 ) );
|
|
}
|
|
|
|
// was active, active panel still exists
|
|
} else {
|
|
|
|
// make sure active index is correct
|
|
options.active = this.headers.index( this.active );
|
|
}
|
|
|
|
this._destroyIcons();
|
|
|
|
this._refresh();
|
|
},
|
|
|
|
_processPanels: function() {
|
|
var prevHeaders = this.headers,
|
|
prevPanels = this.panels;
|
|
|
|
if ( typeof this.options.header === "function" ) {
|
|
this.headers = this.options.header( this.element );
|
|
} else {
|
|
this.headers = this.element.find( this.options.header );
|
|
}
|
|
this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
|
|
"ui-state-default" );
|
|
|
|
this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
|
|
this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
|
|
|
|
// Avoid memory leaks (#10056)
|
|
if ( prevPanels ) {
|
|
this._off( prevHeaders.not( this.headers ) );
|
|
this._off( prevPanels.not( this.panels ) );
|
|
}
|
|
},
|
|
|
|
_refresh: function() {
|
|
var maxHeight,
|
|
options = this.options,
|
|
heightStyle = options.heightStyle,
|
|
parent = this.element.parent();
|
|
|
|
this.active = this._findActive( options.active );
|
|
this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
|
|
._removeClass( this.active, "ui-accordion-header-collapsed" );
|
|
this._addClass( this.active.next(), "ui-accordion-content-active" );
|
|
this.active.next().show();
|
|
|
|
this.headers
|
|
.attr( "role", "tab" )
|
|
.each( function() {
|
|
var header = $( this ),
|
|
headerId = header.uniqueId().attr( "id" ),
|
|
panel = header.next(),
|
|
panelId = panel.uniqueId().attr( "id" );
|
|
header.attr( "aria-controls", panelId );
|
|
panel.attr( "aria-labelledby", headerId );
|
|
} )
|
|
.next()
|
|
.attr( "role", "tabpanel" );
|
|
|
|
this.headers
|
|
.not( this.active )
|
|
.attr( {
|
|
"aria-selected": "false",
|
|
"aria-expanded": "false",
|
|
tabIndex: -1
|
|
} )
|
|
.next()
|
|
.attr( {
|
|
"aria-hidden": "true"
|
|
} )
|
|
.hide();
|
|
|
|
// Make sure at least one header is in the tab order
|
|
if ( !this.active.length ) {
|
|
this.headers.eq( 0 ).attr( "tabIndex", 0 );
|
|
} else {
|
|
this.active.attr( {
|
|
"aria-selected": "true",
|
|
"aria-expanded": "true",
|
|
tabIndex: 0
|
|
} )
|
|
.next()
|
|
.attr( {
|
|
"aria-hidden": "false"
|
|
} );
|
|
}
|
|
|
|
this._createIcons();
|
|
|
|
this._setupEvents( options.event );
|
|
|
|
if ( heightStyle === "fill" ) {
|
|
maxHeight = parent.height();
|
|
this.element.siblings( ":visible" ).each( function() {
|
|
var elem = $( this ),
|
|
position = elem.css( "position" );
|
|
|
|
if ( position === "absolute" || position === "fixed" ) {
|
|
return;
|
|
}
|
|
maxHeight -= elem.outerHeight( true );
|
|
} );
|
|
|
|
this.headers.each( function() {
|
|
maxHeight -= $( this ).outerHeight( true );
|
|
} );
|
|
|
|
this.headers.next()
|
|
.each( function() {
|
|
$( this ).height( Math.max( 0, maxHeight -
|
|
$( this ).innerHeight() + $( this ).height() ) );
|
|
} )
|
|
.css( "overflow", "auto" );
|
|
} else if ( heightStyle === "auto" ) {
|
|
maxHeight = 0;
|
|
this.headers.next()
|
|
.each( function() {
|
|
var isVisible = $( this ).is( ":visible" );
|
|
if ( !isVisible ) {
|
|
$( this ).show();
|
|
}
|
|
maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
|
|
if ( !isVisible ) {
|
|
$( this ).hide();
|
|
}
|
|
} )
|
|
.height( maxHeight );
|
|
}
|
|
},
|
|
|
|
_activate: function( index ) {
|
|
var active = this._findActive( index )[ 0 ];
|
|
|
|
// Trying to activate the already active panel
|
|
if ( active === this.active[ 0 ] ) {
|
|
return;
|
|
}
|
|
|
|
// Trying to collapse, simulate a click on the currently active header
|
|
active = active || this.active[ 0 ];
|
|
|
|
this._eventHandler( {
|
|
target: active,
|
|
currentTarget: active,
|
|
preventDefault: $.noop
|
|
} );
|
|
},
|
|
|
|
_findActive: function( selector ) {
|
|
return typeof selector === "number" ? this.headers.eq( selector ) : $();
|
|
},
|
|
|
|
_setupEvents: function( event ) {
|
|
var events = {
|
|
keydown: "_keydown"
|
|
};
|
|
if ( event ) {
|
|
$.each( event.split( " " ), function( index, eventName ) {
|
|
events[ eventName ] = "_eventHandler";
|
|
} );
|
|
}
|
|
|
|
this._off( this.headers.add( this.headers.next() ) );
|
|
this._on( this.headers, events );
|
|
this._on( this.headers.next(), { keydown: "_panelKeyDown" } );
|
|
this._hoverable( this.headers );
|
|
this._focusable( this.headers );
|
|
},
|
|
|
|
_eventHandler: function( event ) {
|
|
var activeChildren, clickedChildren,
|
|
options = this.options,
|
|
active = this.active,
|
|
clicked = $( event.currentTarget ),
|
|
clickedIsActive = clicked[ 0 ] === active[ 0 ],
|
|
collapsing = clickedIsActive && options.collapsible,
|
|
toShow = collapsing ? $() : clicked.next(),
|
|
toHide = active.next(),
|
|
eventData = {
|
|
oldHeader: active,
|
|
oldPanel: toHide,
|
|
newHeader: collapsing ? $() : clicked,
|
|
newPanel: toShow
|
|
};
|
|
|
|
event.preventDefault();
|
|
|
|
if (
|
|
|
|
// click on active header, but not collapsible
|
|
( clickedIsActive && !options.collapsible ) ||
|
|
|
|
// allow canceling activation
|
|
( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
|
|
return;
|
|
}
|
|
|
|
options.active = collapsing ? false : this.headers.index( clicked );
|
|
|
|
// When the call to ._toggle() comes after the class changes
|
|
// it causes a very odd bug in IE 8 (see #6720)
|
|
this.active = clickedIsActive ? $() : clicked;
|
|
this._toggle( eventData );
|
|
|
|
// Switch classes
|
|
// corner classes on the previously active header stay after the animation
|
|
this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
|
|
if ( options.icons ) {
|
|
activeChildren = active.children( ".ui-accordion-header-icon" );
|
|
this._removeClass( activeChildren, null, options.icons.activeHeader )
|
|
._addClass( activeChildren, null, options.icons.header );
|
|
}
|
|
|
|
if ( !clickedIsActive ) {
|
|
this._removeClass( clicked, "ui-accordion-header-collapsed" )
|
|
._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
|
|
if ( options.icons ) {
|
|
clickedChildren = clicked.children( ".ui-accordion-header-icon" );
|
|
this._removeClass( clickedChildren, null, options.icons.header )
|
|
._addClass( clickedChildren, null, options.icons.activeHeader );
|
|
}
|
|
|
|
this._addClass( clicked.next(), "ui-accordion-content-active" );
|
|
}
|
|
},
|
|
|
|
_toggle: function( data ) {
|
|
var toShow = data.newPanel,
|
|
toHide = this.prevShow.length ? this.prevShow : data.oldPanel;
|
|
|
|
// Handle activating a panel during the animation for another activation
|
|
this.prevShow.add( this.prevHide ).stop( true, true );
|
|
this.prevShow = toShow;
|
|
this.prevHide = toHide;
|
|
|
|
if ( this.options.animate ) {
|
|
this._animate( toShow, toHide, data );
|
|
} else {
|
|
toHide.hide();
|
|
toShow.show();
|
|
this._toggleComplete( data );
|
|
}
|
|
|
|
toHide.attr( {
|
|
"aria-hidden": "true"
|
|
} );
|
|
toHide.prev().attr( {
|
|
"aria-selected": "false",
|
|
"aria-expanded": "false"
|
|
} );
|
|
|
|
// 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 collapsing, then keep the collapsing header in the tab order
|
|
if ( toShow.length && toHide.length ) {
|
|
toHide.prev().attr( {
|
|
"tabIndex": -1,
|
|
"aria-expanded": "false"
|
|
} );
|
|
} else if ( toShow.length ) {
|
|
this.headers.filter( function() {
|
|
return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
|
|
} )
|
|
.attr( "tabIndex", -1 );
|
|
}
|
|
|
|
toShow
|
|
.attr( "aria-hidden", "false" )
|
|
.prev()
|
|
.attr( {
|
|
"aria-selected": "true",
|
|
"aria-expanded": "true",
|
|
tabIndex: 0
|
|
} );
|
|
},
|
|
|
|
_animate: function( toShow, toHide, data ) {
|
|
var total, easing, duration,
|
|
that = this,
|
|
adjust = 0,
|
|
boxSizing = toShow.css( "box-sizing" ),
|
|
down = toShow.length &&
|
|
( !toHide.length || ( toShow.index() < toHide.index() ) ),
|
|
animate = this.options.animate || {},
|
|
options = down && animate.down || animate,
|
|
complete = function() {
|
|
that._toggleComplete( data );
|
|
};
|
|
|
|
if ( typeof options === "number" ) {
|
|
duration = options;
|
|
}
|
|
if ( typeof options === "string" ) {
|
|
easing = options;
|
|
}
|
|
|
|
// fall back from options to animation in case of partial down settings
|
|
easing = easing || options.easing || animate.easing;
|
|
duration = duration || options.duration || animate.duration;
|
|
|
|
if ( !toHide.length ) {
|
|
return toShow.animate( this.showProps, duration, easing, complete );
|
|
}
|
|
if ( !toShow.length ) {
|
|
return toHide.animate( this.hideProps, duration, easing, complete );
|
|
}
|
|
|
|
total = toShow.show().outerHeight();
|
|
toHide.animate( this.hideProps, {
|
|
duration: duration,
|
|
easing: easing,
|
|
step: function( now, fx ) {
|
|
fx.now = Math.round( now );
|
|
}
|
|
} );
|
|
toShow
|
|
.hide()
|
|
.animate( this.showProps, {
|
|
duration: duration,
|
|
easing: easing,
|
|
complete: complete,
|
|
step: function( now, fx ) {
|
|
fx.now = Math.round( now );
|
|
if ( fx.prop !== "height" ) {
|
|
if ( boxSizing === "content-box" ) {
|
|
adjust += fx.now;
|
|
}
|
|
} else if ( that.options.heightStyle !== "content" ) {
|
|
fx.now = Math.round( total - toHide.outerHeight() - adjust );
|
|
adjust = 0;
|
|
}
|
|
}
|
|
} );
|
|
},
|
|
|
|
_toggleComplete: function( data ) {
|
|
var toHide = data.oldPanel,
|
|
prev = toHide.prev();
|
|
|
|
this._removeClass( toHide, "ui-accordion-content-active" );
|
|
this._removeClass( prev, "ui-accordion-header-active" )
|
|
._addClass( prev, "ui-accordion-header-collapsed" );
|
|
|
|
// Work around for rendering bug in IE (#5421)
|
|
if ( toHide.length ) {
|
|
toHide.parent()[ 0 ].className = toHide.parent()[ 0 ].className;
|
|
}
|
|
this._trigger( "activate", null, data );
|
|
}
|
|
} );
|
|
|
|
} );
|