Permalink
Browse files

Accordion: Enhance refresh to allow adding/removing panels. Fixes #46…

…72 - Accordion: ability to add/remove panels
  • Loading branch information...
1 parent 8e1ceba commit d657538ed57a96b610853d69e9fbf559c5ae230f @petersendidit petersendidit committed with mikesherov Nov 12, 2012
Showing with 188 additions and 88 deletions.
  1. +62 −1 tests/unit/accordion/accordion_methods.js
  2. +126 −87 ui/jquery.ui.accordion.js
@@ -30,7 +30,7 @@ test( "enable/disable", function() {
});
test( "refresh", function() {
- expect( 6 );
+ expect( 17 );
var element = $( "#navigation" )
.parent()
.height( 300 )
@@ -43,6 +43,67 @@ test( "refresh", function() {
element.parent().height( 500 );
element.accordion( "refresh" );
equalHeight( element, 455 );
+
+ element = $( "#list1" );
+ element.accordion();
+ state( element, 1, 0, 0 );
+
+ // disable panel via markup
+ element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
+ element.accordion( "refresh" );
+ state( element, 1, 0, 0 );
+
+ // don't add multiple icons
+ element.accordion( "refresh" );
+ equal( element.find( ".ui-accordion-header-icon" ).length, 3 );
+
+ // add a panel
+ element
+ .append("<h3 class='bar' id='new_1'>new 1</h3>")
+ .append("<div class='foo' id='new_1_panel'>new 1</div>");
+ element.accordion( "refresh" );
+ state( element, 1, 0, 0, 0 );
+
+ // remove all tabs
+ element.find( "h3.bar, div.foo" ).remove();
+ element.accordion( "refresh" );
+ state( element );
+ equal( element.accordion( "option", "active" ), false, "no active accordion panel" );
+
+ // add panels
+ element
+ .append("<h3 class='bar' id='new_2'>new 2</h3>")
+ .append("<div class='foo' id='new_2_panel'>new 2</div>")
+ .append("<h3 class='bar' id='new_3'>new 3</h3>")
+ .append("<div class='foo' id='new_3_panel'>new 3</div>")
+ .append("<h3 class='bar' id='new_4'>new 4</h3>")
+ .append("<div class='foo' id='new_4_panel'>new 4</div>")
+ .append("<h3 class='bar' id='new_5'>new 5</h3>")
+ .append("<div class='foo' id='new_5_panel'>new 5</div>");
+ element.accordion( "refresh" );
+ state( element, 1, 0, 0, 0 );
+
+ // activate third tab
+ element.accordion( "option", "active", 2 );
+ state( element, 0, 0, 1, 0 );
+
+ // remove fourth panel, third panel should stay active
+ element.find( "h3.bar" ).eq( 3 ).remove();
+ element.find( "div.foo" ).eq( 3 ).remove();
+ element.accordion( "refresh" );
+ state( element, 0, 0, 1 );
+
+ // remove third (active) panel, second panel should become active
+ element.find( "h3.bar" ).eq( 2 ).remove();
+ element.find( "div.foo" ).eq( 2 ).remove();
+ element.accordion( "refresh" );
+ state( element, 0, 1 );
+
+ // remove first panel, previously active panel (now first) should stay active
+ element.find( "h3.bar" ).eq( 0 ).remove();
+ element.find( "div.foo" ).eq( 0 ).remove();
+ element.accordion( "refresh" );
+ state( element, 1 );
});
test( "widget", function() {
@@ -43,95 +43,23 @@ $.widget( "ui.accordion", {
},
_create: function() {
- var accordionId = this.accordionId = "ui-accordion-" +
- (this.element.attr( "id" ) || ++uid),
- options = this.options;
-
+ 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" )
- .hide();
+ this.element.addClass( "ui-accordion ui-widget ui-helper-reset" )
+ // ARIA
+ .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.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" )
- .show();
-
- this._createIcons();
- this.refresh();
-
- // ARIA
- this.element.attr( "role", "tablist" );
-
- 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({
- "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
- if ( !this.active.length ) {
- this.headers.eq( 0 ).attr( "tabIndex", 0 );
- } else {
- this.active.attr({
- "aria-selected": "true",
- tabIndex: 0
- })
- .next()
- .attr({
- "aria-expanded": "true",
- "aria-hidden": "false"
- });
- }
-
- this._on( this.headers, { keydown: "_keydown" });
- this._on( this.headers.next(), { keydown: "_panelKeyDown" });
- this._setupEvents( options.event );
+ this._refresh();
},
_getCreateEventData: function() {
@@ -283,9 +211,114 @@ $.widget( "ui.accordion", {
},
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
+ } 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() {
+ this.headers = this.element.find( this.options.header )
+ .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" );
+
+ this.headers.next()
+ .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" )
+ .filter(":not(.ui-accordion-content-active)")
+ .hide();
+ },
+
+ _refresh: function() {
var maxHeight,
- heightStyle = this.options.heightStyle,
- parent = this.element.parent();
+ options = this.options,
+ heightStyle = options.heightStyle,
+ parent = this.element.parent(),
+ accordionId = this.accordionId = "ui-accordion-" +
+ (this.element.attr( "id" ) || ++uid);
+
+ 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" )
+ .show();
+
+ 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({
+ "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
+ if ( !this.active.length ) {
+ this.headers.eq( 0 ).attr( "tabIndex", 0 );
+ } else {
+ this.active.attr({
+ "aria-selected": "true",
+ tabIndex: 0
+ })
+ .next()
+ .attr({
+ "aria-expanded": "true",
+ "aria-hidden": "false"
+ });
+ }
+
+ this._createIcons();
+
+ this._setupEvents( options.event );
if ( heightStyle === "fill" ) {
maxHeight = parent.height();
@@ -342,14 +375,20 @@ $.widget( "ui.accordion", {
},
_setupEvents: function( event ) {
- var events = {};
- if ( !event ) {
- return;
+ var events = {
+ keydown: "_keydown"
+ };
+ if ( event ) {
+ $.each( event.split(" "), function( index, eventName ) {
+ events[ eventName ] = "_eventHandler";
+ });
}
- $.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 ) {

0 comments on commit d657538

Please sign in to comment.