/* * jQuery UI Accordion @VERSION * * Copyright 2011, 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 ) { // TODO: use ui-accordion-header-active class and fix styling $.widget( "ui.accordion", { options: { active: 0, animated: "slide", 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" } }, _create: function() { var self = this, options = self.options; self.running = false; self.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); self.headers = self.element.find( options.header ) .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); self._hoverable( self.headers ); self._focusable( self.headers ); self.headers.find( ":first-child" ).addClass( "ui-accordion-heading" ); self.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; } self.active = self._findActive( options.active ) .addClass( "ui-state-default ui-state-active" ) .toggleClass( "ui-corner-all" ) .toggleClass( "ui-corner-top" ); self.active.next().addClass( "ui-accordion-content-active" ); self._createIcons(); self.refresh(); // ARIA self.element.attr( "role", "tablist" ); self.headers .attr( "role", "tab" ) .bind( "keydown.accordion", $.proxy( self, "_keydown" ) ) .next() .attr( "role", "tabpanel" ); self.headers .not( self.active ) .attr({ "aria-expanded": "false", tabIndex: -1 }) .next() .hide(); // make sure at least one header is in the tab order if ( !self.active.length ) { self.headers.eq( 0 ).attr( "tabIndex", 0 ); } else { self.active .attr({ "aria-expanded": "true", tabIndex: 0 }); } // only need links in tab order for Safari if ( !$.browser.safari ) { self.headers.find( "a" ).attr( "tabIndex", -1 ); } this._setupEvents( options.event ); }, _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.element.addClass( "ui-accordion-icons" ); } }, _destroyIcons: function() { this.headers.children( ".ui-accordion-header-icon" ).remove(); this.element.removeClass( "ui-accordion-icons" ); }, _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-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" ) .removeAttr( "role" ) .removeAttr( "aria-expanded" ) .removeAttr( "tabIndex" ) .find( "a" ) .removeAttr( "tabIndex" ) .end() .find( ".ui-accordion-heading" ) .removeClass( "ui-accordion-heading" ); 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-accordion-disabled ui-state-disabled" ); 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; } this._super( "_setOption", key, value ); // setting collapsible: false while collapsed; open first panel if ( key === "collapsible" && !value && this.options.active === false ) { this._activate( 0 ); } if ( key === "event" ) { this._setupEvents( value ); } 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-accordion-disabled ui-state-disabled", !!value ); } }, _keydown: function( event ) { 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 options = this.options, parent = this.element.parent(), maxHeight, overflow; if ( options.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 ( options.heightStyle === "auto" ) { maxHeight = 0; this.headers.next() .each(function() { maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() ); }) .height( maxHeight ); } return this; }, _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; this._eventHandler({ target: active, currentTarget: active, preventDefault: $.noop }); }, _findActive: function( selector ) { return typeof selector === "number" ? this.headers.eq( selector ) : $(); }, _setupEvents: function( event ) { this.headers.unbind( ".accordion" ); if ( event ) { 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 || // can't switch during an animation this.running || // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation ( this._trigger( "beforeActivate", null, 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-state-active ui-corner-top" ) .addClass( "ui-state-default ui-corner-all" ) .children( ".ui-accordion-header-icon" ) .removeClass( options.icons.activeHeader ) .addClass( options.icons.header ); if ( !clickedIsActive ) { clicked .removeClass( "ui-state-default ui-corner-all" ) .addClass( "ui-state-active ui-corner-top" ) .children( ".ui-accordion-header-icon" ) .removeClass( options.icons.header ) .addClass( options.icons.activeHeader ); clicked .next() .addClass( "ui-accordion-content-active" ); } }, _toggle: function( data ) { var self = this, options = self.options, toShow = data.newContent, toHide = data.oldContent; self.running = true; function complete() { self._completed( data ); } if ( options.animated ) { var animations = $.ui.accordion.animations, animation = options.animated, additional; if ( !animations[ animation ] ) { additional = { easing: $.easing[ animation ] ? animation : "slide", duration: 700 }; animation = "slide"; } animations[ animation ]({ toShow: toShow, toHide: toHide, complete: complete, down: toShow.length && ( !toHide.length || ( toShow.index() < toHide.index() ) ) }, additional ); } else { toHide.hide(); toShow.show(); complete(); } // TODO assert that the blur and focus triggers are really necessary, remove otherwise toHide.prev() .attr({ "aria-expanded": "false", tabIndex: -1 }) .blur(); toShow.prev() .attr({ "aria-expanded": "true", tabIndex: 0 }) .focus(); }, _completed: function( data ) { var toShow = data.newContent, toHide = data.oldContent; this.running = false; if ( this.options.heightStyle === "content" ) { toShow.add( toHide ).css({ height: "", overflow: "" }); } // 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 ); } }); $.extend( $.ui.accordion, { version: "@VERSION", animations: { slide: function( options, additions ) { var showOverflow = options.toShow.css( "overflow" ), hideOverflow = options.toHide.css( "overflow" ), percentDone = 0, showProps = {}, hideProps = {}, fxAttrs = [ "height", "paddingTop", "paddingBottom" ], originalWidth; options = $.extend({ easing: "swing", duration: 300 }, options, additions ); if ( !options.toHide.size() ) { originalWidth = options.toShow[0].style.width; options.toShow .show() .width( options.toShow.width() ) .hide() .animate({ height: "show", paddingTop: "show", paddingBottom: "show" }, { duration: options.duration, easing: options.easing, complete: function() { options.toShow.width( originalWidth ); options.complete(); } }); return; } if ( !options.toShow.size() ) { options.toHide.animate({ height: "hide", paddingTop: "hide", paddingBottom: "hide" }, options ); return; } // fix width before calculating height of hidden element var s = options.toShow; originalWidth = s[0].style.width; s.width( parseInt( s.parent().width(), 10 ) - parseInt( s.css( "paddingLeft" ), 10 ) - parseInt( s.css( "paddingRight" ), 10 ) - ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 ) - ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) ); $.each( fxAttrs, function( i, prop ) { hideProps[ prop ] = "hide"; var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ ); showProps[ prop ] = { value: parts[ 1 ], unit: parts[ 2 ] || "px" }; }); options.toShow.css({ height: 0, overflow: "hidden" }).show(); options.toHide .filter( ":hidden" ) .each( options.complete ) .end() .filter( ":visible" ) .animate( hideProps, { step: function( now, settings ) { // only calculate the percent when animating height // IE gets very inconsistent results when animating elements // with small values, which is common for padding if ( settings.prop == "height" ) { percentDone = ( settings.end - settings.start === 0 ) ? 0 : ( settings.now - settings.start ) / ( settings.end - settings.start ); } options.toShow[ 0 ].style[ settings.prop ] = ( percentDone * showProps[ settings.prop ].value ) + showProps[ settings.prop ].unit; }, duration: options.duration, easing: options.easing, complete: function() { options.toShow.css({ width: originalWidth, overflow: showOverflow }); options.toHide.css( "overflow", hideOverflow ); options.complete(); } }); }, bounceslide: function( options ) { this.slide( options, { easing: options.down ? "easeOutBounce" : "swing", duration: options.down ? 1000 : 200 }); } } }); // 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 self = 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 ) ) { self.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() { 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 ) { 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 ) ); } })( jQuery );