diff options
Diffstat (limited to 'ui/jquery.ui.accordion.js')
| -rw-r--r-- | ui/jquery.ui.accordion.js | 147 |
1 files changed, 104 insertions, 43 deletions
diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 2200732ac..00ecd1b64 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -1,4 +1,4 @@ -/* +/*! * jQuery UI Accordion @VERSION * * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) @@ -12,6 +12,22 @@ * jquery.ui.widget.js */ (function( $, undefined ) { + var uid = 0, + 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" } ); + +$.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() ); +}; $.widget( "ui.accordion", { version: "@VERSION", @@ -33,7 +49,9 @@ $.widget( "ui.accordion", { }, _create: function() { - var options = this.options; + var accordionId = this.accordionId = "ui-accordion-" + + (this.element.attr( "id" ) || ++uid), + options = this.options; this.prevShow = this.prevHide = $(); this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); @@ -68,18 +86,36 @@ $.widget( "ui.accordion", { this.headers .attr( "role", "tab" ) + .each(function( i ) { + var header = $( this ), + headerId = header.attr( "id" ), + panel = header.next(), + panelId = panel.attr( "id" ); + if ( !headerId ) { + headerId = accordionId + "-header-" + i; + header.attr( "id", headerId ); + } + if ( !panelId ) { + panelId = accordionId + "-panel-" + i; + panel.attr( "id", panelId ); + } + header.attr( "aria-controls", panelId ); + panel.attr( "aria-labelledby", headerId ); + }) .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() + .attr({ + "aria-expanded": "false", + "aria-hidden": "true" + }) .hide(); // make sure at least one header is in the tab order @@ -87,12 +123,18 @@ $.widget( "ui.accordion", { this.headers.eq( 0 ).attr( "tabIndex", 0 ); } else { this.active.attr({ - "aria-expanded": "true", "aria-selected": "true", tabIndex: 0 - }); + }) + .next() + .attr({ + "aria-expanded": "true", + "aria-hidden": "false" + }); } + this._bind( this.headers, { keydown: "_keydown" }); + this._bind( this.headers.next(), { keydown: "_panelKeyDown" }); this._setupEvents( options.event ); }, @@ -124,6 +166,9 @@ $.widget( "ui.accordion", { }, _destroy: function() { + var contents, + accordionId = this.accordionId; + // clean up main element this.element .removeClass( "ui-accordion ui-widget ui-helper-reset" ) @@ -131,19 +176,31 @@ $.widget( "ui.accordion", { // 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" ); + .removeAttr( "aria-controls" ) + .removeAttr( "tabIndex" ) + .each(function() { + if ( /^ui-accordion/.test( this.id ) ) { + this.removeAttribute( "id" ); + } + }); this._destroyIcons(); // clean up content panels - var contents = this.headers.next() + 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" ); + .removeAttr( "aria-expanded" ) + .removeAttr( "aria-hidden" ) + .removeAttr( "aria-labelledby" ) + .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" ) + .each(function() { + if ( /^ui-accordion/.test( this.id ) ) { + this.removeAttribute( "id" ); + } + }); if ( this.options.heightStyle !== "content" ) { this.element.css( "height", this.originalHeight ); contents.css( "height", "" ); @@ -159,7 +216,8 @@ $.widget( "ui.accordion", { if ( key === "event" ) { if ( this.options.event ) { - this.headers.unbind( ".accordion" ); + this.headers.unbind( + this.options.event.split( " " ).join( ".accordion " ) + ".accordion" ); } this._setupEvents( value ); } @@ -208,6 +266,13 @@ $.widget( "ui.accordion", { 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 ) { @@ -218,6 +283,12 @@ $.widget( "ui.accordion", { } }, + _panelKeyDown : function( event ) { + if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) { + $( event.currentTarget ).prev().focus(); + } + }, + refresh: function() { var heightStyle = this.options.heightStyle, parent = this.element.parent(), @@ -296,14 +367,13 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { - var events = { - keydown: "_keydown" - }; - if ( event ) { - $.each( event.split(" "), function( index, eventName ) { - events[ eventName ] = "_eventHandler"; - }); + var events = {}; + if ( !event ) { + return; } + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; + }); this._bind( this.headers, events ); }, @@ -382,21 +452,26 @@ $.widget( "ui.accordion", { this._toggleComplete( data ); } - // TODO assert that the blur and focus triggers are really necessary, remove otherwise - toHide.prev() + toHide .attr({ "aria-expanded": "false", - "aria-selected": "false", - tabIndex: -1 + "aria-hidden": "true" }) - .blur(); - toShow.prev() + .prev() + .attr({ + "aria-selected": "false", + tabIndex: -1 + }); + toShow .attr({ "aria-expanded": "true", - "aria-selected": "true", - tabIndex: 0 + "aria-hidden": "false" }) - .focus(); + .prev() + .attr({ + "aria-selected": "true", + tabIndex: 0 + }); }, _animate: function( toShow, toHide, data ) { @@ -455,20 +530,6 @@ $.widget( "ui.accordion", { } }); -$.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 @@ -636,7 +697,7 @@ if ( $.uiBackCompat !== false ) { easing: "easeOutBounce", duration: 1000 } - } + }; } else { options.animate = options.animated; } |