/* * jQuery UI Accordion @VERSION * * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI/Accordion * * Depends: * jquery.ui.core.js * jquery.ui.widget.js */ (function( $, undefined ) { $.widget( "ui.accordion", { version: "@VERSION", options: { active: 0, animate: {}, collapsible: false, event: "click", header: "> li > :first-child,> :not(li):even", heightStyle: "auto", icons: { activeHeader: "ui-icon-triangle-1-s", header: "ui-icon-triangle-1-e" }, // callbacks activate: null, beforeActivate: null }, _create: function() { var options = this.options; this.prevShow = this.prevHide = $(); this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); this.headers = this.element.find( options.header ) .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); this._hoverable( this.headers ); this._focusable( this.headers ); this.headers.next() .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ); // don't allow collapsible: false and active: false if ( !options.collapsible && options.active === false ) { options.active = 0; } // handle negative values if ( options.active < 0 ) { options.active += this.headers.length; } this.active = this._findActive( options.active ) .addClass( "ui-accordion-header-active ui-state-active" ) .toggleClass( "ui-corner-all ui-corner-top" ); this.active.next().addClass( "ui-accordion-content-active" ); this._createIcons(); this.originalHeight = this.element[0].style.height; this.refresh(); // ARIA this.element.attr( "role", "tablist" ); this.headers .attr( "role", "tab" ) // TODO: use _bind() .bind( "keydown.accordion", $.proxy( this, "_keydown" ) ) .next() .attr( "role", "tabpanel" ); this.headers .not( this.active ) .attr({ // TODO: document support for each of these "aria-expanded": "false", "aria-selected": "false", tabIndex: -1 }) .next() .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-expanded": "true", "aria-selected": "true", tabIndex: 0 }); } this._setupEvents( options.event ); }, _getCreateEventData: function() { return { header: this.active, content: !this.active.length ? $() : this.active.next() }; }, _createIcons: function() { var icons = this.options.icons; if ( icons ) { $( "" ) .addClass( "ui-accordion-header-icon ui-icon " + icons.header ) .prependTo( this.headers ); this.active.children( ".ui-accordion-header-icon" ) .removeClass( icons.header ) .addClass( icons.activeHeader ); this.headers.addClass( "ui-accordion-icons" ); } }, _destroyIcons: function() { this.headers .removeClass( "ui-accordion-icons" ) .children( ".ui-accordion-header-icon" ) .remove(); }, _destroy: function() { // clean up main element this.element .removeClass( "ui-accordion ui-widget ui-helper-reset" ) .removeAttr( "role" ); // clean up headers this.headers .unbind( ".accordion" ) .removeClass( "ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ) .removeAttr( "role" ) .removeAttr( "aria-expanded" ) .removeAttr( "aria-selected" ) .removeAttr( "tabIndex" ); this._destroyIcons(); // clean up content panels var contents = this.headers.next() .css( "display", "" ) .removeAttr( "role" ) .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" ); if ( this.options.heightStyle !== "content" ) { this.element.css( "height", this.originalHeight ); 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 ) { // TODO: this is incorrect for multiple events (see _setupEvents) this.headers.unbind( this.options.event + ".accordion", this._eventHandler ); } 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(); } } // #5332 - opacity doesn't cascade to positioned elements in IE // so we need to add the disabled class to the headers and panels if ( key === "disabled" ) { this.headers.add( this.headers.next() ) .toggleClass( "ui-state-disabled", !!value ); } }, _keydown: function( event ) { // TODO: remove disabled check when using _bind() if ( this.options.disabled || 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 ); } if ( toFocus ) { $( event.target ).attr( "tabIndex", -1 ); $( toFocus ).attr( "tabIndex", 0 ); toFocus.focus(); event.preventDefault(); } }, refresh: function() { var heightStyle = this.options.heightStyle, parent = this.element.parent(), maxHeight, overflow; this.element.css( "height", this.originalHeight ); if ( heightStyle === "fill" ) { // IE 6 treats height like minHeight, so we need to turn off overflow // in order to get a reliable height // we use the minHeight support test because we assume that only // browsers that don't support minHeight will treat height as minHeight if ( !$.support.minHeight ) { overflow = parent.css( "overflow" ); parent.css( "overflow", "hidden"); } 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 ); }); if ( overflow ) { parent.css( "overflow", overflow ); } 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() { maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() ); }) .height( maxHeight ); } if ( heightStyle !== "content" ) { this.element.height( this.element.height() ); } }, _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 ) { if ( event ) { // TODO: use _bind() this.headers.bind( event.split( " " ).join( ".accordion " ) + ".accordion", $.proxy( this, "_eventHandler" ) ); } }, _eventHandler: function( event ) { var 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, oldContent: toHide, newHeader: collapsing ? $() : clicked, newContent: toShow }; event.preventDefault(); if ( options.disabled || // 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 active .removeClass( "ui-accordion-header-active ui-state-active ui-corner-top" ) .addClass( "ui-corner-all" ); if ( options.icons ) { active.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.activeHeader ) .addClass( options.icons.header ); } if ( !clickedIsActive ) { clicked .removeClass( "ui-corner-all" ) .addClass( "ui-accordion-header-active ui-state-active ui-corner-top" ); if ( options.icons ) { clicked.children( ".ui-accordion-header-icon" ) .removeClass( options.icons.header ) .addClass( options.icons.activeHeader ); } clicked .next() .addClass( "ui-accordion-content-active" ); } }, _toggle: function( data ) { var toShow = data.newContent, toHide = this.prevShow.length ? this.prevShow : data.oldContent; // 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 ); } // TODO assert that the blur and focus triggers are really necessary, remove otherwise toHide.prev() .attr({ "aria-expanded": "false", "aria-selected": "false", tabIndex: -1 }) .blur(); toShow.prev() .attr({ "aria-expanded": "true", "aria-selected": "true", tabIndex: 0 }) .focus(); }, _animate: function( toShow, toHide, data ) { var total, easing, duration, that = this, down = toShow.length && ( !toHide.length || ( toShow.index() < toHide.index() ) ), animate = this.options.animate || {}, options = down && animate.down || animate, complete = function() { toShow.removeData( "ui-accordion-height" ); 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.size() ) { return toShow.animate( showProps, duration, easing, complete ); } if ( !toShow.size() ) { return toHide.animate( hideProps, duration, easing, complete ); } total = toShow.show().outerHeight(); toHide.animate( hideProps, duration, easing ); toShow .hide() .data( "ui-accordion-height", { total: total, toHide: toHide }) .animate( this.options.heightStyle === "content" ? showProps : showPropsAdjust, duration, easing, complete ); }, _toggleComplete: function( data ) { var toShow = data.newContent, toHide = data.oldContent; // other classes are removed before the animation; this one needs to stay until completed toHide.removeClass( "ui-accordion-content-active" ); // Work around for rendering bug in IE (#5421) if ( toHide.length ) { toHide.parent()[0].className = toHide.parent()[0].className; } this._trigger( "activate", null, data ); } }); $.fx.step.accordionHeight = function( fx ) { var elem = $( fx.elem ), data = elem.data( "ui-accordion-height" ); elem.height( data.total - elem.outerHeight() - data.toHide.outerHeight() + elem.height() ); }; var hideProps = {}, showProps = {}, showPropsAdjust = {}; hideProps.height = hideProps.paddingTop = hideProps.paddingBottom = hideProps.borderTopWidth = hideProps.borderBottomWidth = "hide"; showProps.height = showProps.paddingTop = showProps.paddingBottom = showProps.borderTopWidth = showProps.borderBottomWidth = "show"; $.extend( showPropsAdjust, showProps, { accordionHeight: "show" } ); // DEPRECATED if ( $.uiBackCompat !== false ) { // navigation options (function( $, prototype ) { $.extend( prototype.options, { navigation: false, navigationFilter: function() { return this.href.toLowerCase() === location.href.toLowerCase(); } }); var _create = prototype._create; prototype._create = function() { if ( this.options.navigation ) { var that = this, headers = this.element.find( this.options.header ), content = headers.next(), current = headers.add( content ) .find( "a" ) .filter( this.options.navigationFilter ) [ 0 ]; if ( current ) { headers.add( content ).each( function( index ) { if ( $.contains( this, current ) ) { that.options.active = Math.floor( index / 2 ); return false; } }); } } _create.call( this ); }; }( jQuery, jQuery.ui.accordion.prototype ) ); // height options (function( $, prototype ) { $.extend( prototype.options, { heightStyle: null, // remove default so we fall back to old values autoHeight: true, // use heightStyle: "auto" clearStyle: false, // use heightStyle: "content" fillSpace: false // use heightStyle: "fill" }); var _create = prototype._create, _setOption = prototype._setOption; $.extend( prototype, { _create: function() { this.options.heightStyle = this.options.heightStyle || this._mergeHeightStyle(); _create.call( this ); }, _setOption: function( key, value ) { if ( key === "autoHeight" || key === "clearStyle" || key === "fillSpace" ) { this.options.heightStyle = this._mergeHeightStyle(); } _setOption.apply( this, arguments ); }, _mergeHeightStyle: function() { var options = this.options; if ( options.fillSpace ) { return "fill"; } if ( options.clearStyle ) { return "content"; } if ( options.autoHeight ) { return "auto"; } } }); }( jQuery, jQuery.ui.accordion.prototype ) ); // icon options (function( $, prototype ) { $.extend( prototype.options.icons, { activeHeader: null, // remove default so we fall back to old values headerSelected: "ui-icon-triangle-1-s" }); var _createIcons = prototype._createIcons; prototype._createIcons = function() { if ( this.options.icons ) { this.options.icons.activeHeader = this.options.icons.activeHeader || this.options.icons.headerSelected; } _createIcons.call( this ); }; }( jQuery, jQuery.ui.accordion.prototype ) ); // expanded active option, activate method (function( $, prototype ) { prototype.activate = prototype._activate; var _findActive = prototype._findActive; prototype._findActive = function( index ) { if ( index === -1 ) { index = false; } if ( index && typeof index !== "number" ) { index = this.headers.index( this.headers.filter( index ) ); if ( index === -1 ) { index = false; } } return _findActive.call( this, index ); }; }( jQuery, jQuery.ui.accordion.prototype ) ); // resize method jQuery.ui.accordion.prototype.resize = jQuery.ui.accordion.prototype.refresh; // change events (function( $, prototype ) { $.extend( prototype.options, { change: null, changestart: null }); var _trigger = prototype._trigger; prototype._trigger = function( type, event, data ) { var ret = _trigger.apply( this, arguments ); if ( !ret ) { return false; } if ( type === "beforeActivate" ) { ret = _trigger.call( this, "changestart", event, data ); } else if ( type === "activate" ) { ret = _trigger.call( this, "change", event, data ); } return ret; }; }( jQuery, jQuery.ui.accordion.prototype ) ); // animated option // NOTE: this only provides support for "slide", "bounceslide", and easings // not the full $.ui.accordion.animations API (function( $, prototype ) { $.extend( prototype.options, { animate: null, animated: "slide" }); var _create = prototype._create; prototype._create = function() { var options = this.options; if ( options.animate === null ) { if ( !options.animated ) { options.animate = false; } else if ( options.animated === "slide" ) { options.animate = 300; } else if ( options.animated === "bounceslide" ) { options.animate = { duration: 200, down: { easing: "easeOutBounce", duration: 1000 } } } else { options.animate = options.animated; } } _create.call( this ); }; }( jQuery, jQuery.ui.accordion.prototype ) ); } })( jQuery );