Skip to content

Commit 63563dc

Browse files
arschmitzarschmitz
committed
Accordion: Add classes option
1 parent 744f06f commit 63563dc

File tree

4 files changed

+81
-66
lines changed

4 files changed

+81
-66
lines changed

‎tests/unit/accordion/accordion_common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "accordion", {
22
defaults: {
33
active: 0,
44
animate: {},
5+
classes: {
6+
"ui-accordion-header": "ui-corner-top",
7+
"ui-accordion-header-collapsed": "ui-corner-all",
8+
"ui-accordion-content": "ui-corner-bottom"
9+
},
510
collapsible: false,
611
disabled: false,
712
event: "click",

‎tests/unit/accordion/accordion_core.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() );
77

88
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
99
test( "markup structure: " + type, function() {
10-
expect( 4 );
11-
var element = $( selector ).accordion();
12-
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
13-
equal( element.find( ".ui-accordion-header" ).length, 3,
10+
expect( 8 );
11+
var element = $( selector ).accordion(),
12+
headers = element.find( ".ui-accordion-header" ),
13+
panels = element.find( ".ui-accordion-content" );
14+
15+
ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" );
16+
ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" );
17+
ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" );
18+
ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" );
19+
ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ),
20+
"panel has proper classes" );
21+
22+
equal( headers.length, 3,
1423
".ui-accordion-header elements exist, correct number" );
15-
equal( element.find( ".ui-accordion-content" ).length, 3,
24+
equal( panels.length, 3,
1625
".ui-accordion-content elements exist, correct number" );
17-
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
18-
element.find( ".ui-accordion-content" ).get(),
26+
deepEqual( headers.next().get(), panels.get(),
1927
"content panels come immediately after headers" );
2028
});
2129
});

‎tests/unit/accordion/accordion_methods.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@ var equalHeight = TestHelpers.accordion.equalHeight,
77
module( "accordion: methods", setupTeardown() );
88

99
test( "destroy", function() {
10-
expect( 1 );
10+
expect( 2 );
1111
domEqual( "#list1", function() {
1212
$( "#list1" ).accordion().accordion( "destroy" );
1313
});
14+
15+
// Animate
16+
domEqual( "#list1", function() {
17+
$( "#list1" ).accordion()
18+
.accordion( "option", "active", 1 )
19+
.accordion( "destroy" );
20+
});
1421
});
1522

1623
test( "enable/disable", function() {

‎ui/accordion.js

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ return $.widget( "ui.accordion", {
2929
options: {
3030
active: 0,
3131
animate: {},
32+
classes: {
33+
"ui-accordion-header": "ui-corner-top",
34+
"ui-accordion-header-collapsed": "ui-corner-all",
35+
"ui-accordion-content": "ui-corner-bottom"
36+
},
3237
collapsible: false,
3338
event: "click",
3439
header: "> li > :first-child,> :not(li):even",
@@ -62,9 +67,10 @@ return $.widget( "ui.accordion", {
6267
_create: function() {
6368
var options = this.options;
6469
this.prevShow = this.prevHide = $();
65-
this.element.addClass( "ui-accordion ui-widget ui-helper-reset" )
66-
// ARIA
67-
.attr( "role", "tablist" );
70+
this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
71+
72+
// ARIA
73+
this.element.attr( "role", "tablist" );
6874

6975
// don't allow collapsible: false and active: false / null
7076
if ( !options.collapsible && (options.active === false || options.active == null) ) {
@@ -87,37 +93,32 @@ return $.widget( "ui.accordion", {
8793
},
8894

8995
_createIcons: function() {
90-
var icons = this.options.icons;
96+
var icon, children,
97+
icons = this.options.icons;
9198
if ( icons ) {
92-
$( "<span>" )
93-
.addClass( "ui-accordion-header-icon ui-icon " + icons.header )
94-
.prependTo( this.headers );
95-
this.active.children( ".ui-accordion-header-icon" )
96-
.removeClass( icons.header )
97-
.addClass( icons.activeHeader );
98-
this.headers.addClass( "ui-accordion-icons" );
99+
icon = $( "<span>" );
100+
this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
101+
icon.prependTo( this.headers );
102+
children = this.active.children( ".ui-accordion-header-icon" );
103+
this._removeClass( children, icons.header )
104+
._addClass( children, null, icons.activeHeader )
105+
._addClass( this.headers, "ui-accordion-icons" );
99106
}
100107
},
101108

102109
_destroyIcons: function() {
103-
this.headers
104-
.removeClass( "ui-accordion-icons" )
105-
.children( ".ui-accordion-header-icon" )
106-
.remove();
110+
this._removeClass( this.headers, "ui-accordion-icons" );
111+
this.headers.children( ".ui-accordion-header-icon" ).remove();
107112
},
108113

109114
_destroy: function() {
110115
var contents;
111116

112117
// clean up main element
113-
this.element
114-
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
115-
.removeAttr( "role" );
118+
this.element.removeAttr( "role" );
116119

117120
// clean up headers
118121
this.headers
119-
.removeClass( "ui-accordion-header ui-accordion-header-active ui-state-default " +
120-
"ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
121122
.removeAttr( "role" )
122123
.removeAttr( "aria-expanded" )
123124
.removeAttr( "aria-selected" )
@@ -129,8 +130,6 @@ return $.widget( "ui.accordion", {
129130

130131
// clean up content panels
131132
contents = this.headers.next()
132-
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom " +
133-
"ui-accordion-content ui-accordion-content-active ui-state-disabled" )
134133
.css( "display", "" )
135134
.removeAttr( "role" )
136135
.removeAttr( "aria-hidden" )
@@ -173,11 +172,11 @@ return $.widget( "ui.accordion", {
173172
// #5332 - opacity doesn't cascade to positioned elements in IE
174173
// so we need to add the disabled class to the headers and panels
175174
if ( key === "disabled" ) {
176-
this.element
177-
.toggleClass( "ui-state-disabled", !!value )
178-
.attr( "aria-disabled", value );
179-
this.headers.add( this.headers.next() )
180-
.toggleClass( "ui-state-disabled", !!value );
175+
this.element.attr( "aria-disabled", value );
176+
177+
this._toggleClass( null, "ui-state-disabled", !!value );
178+
this._toggleClass( this.headers.add( this.headers.next() ), null, "ui-state-disabled",
179+
!!value );
181180
}
182181
},
183182

@@ -262,13 +261,12 @@ return $.widget( "ui.accordion", {
262261
var prevHeaders = this.headers,
263262
prevPanels = this.panels;
264263

265-
this.headers = this.element.find( this.options.header )
266-
.addClass( "ui-accordion-header ui-state-default ui-corner-all" );
264+
this.headers = this.element.find( this.options.header );
265+
this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
266+
"ui-state-default" );
267267

268-
this.panels = this.headers.next()
269-
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" )
270-
.filter( ":not(.ui-accordion-content-active)" )
271-
.hide();
268+
this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
269+
this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
272270

273271
// Avoid memory leaks (#10056)
274272
if ( prevPanels ) {
@@ -283,12 +281,11 @@ return $.widget( "ui.accordion", {
283281
heightStyle = options.heightStyle,
284282
parent = this.element.parent();
285283

286-
this.active = this._findActive( options.active )
287-
.addClass( "ui-accordion-header-active ui-state-active ui-corner-top" )
288-
.removeClass( "ui-corner-all" );
289-
this.active.next()
290-
.addClass( "ui-accordion-content-active" )
291-
.show();
284+
this.active = this._findActive( options.active );
285+
this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
286+
._removeClass( this.active, "ui-accordion-header-collapsed" )
287+
._addClass( this.active.next(), "ui-accordion-content-active" )
288+
.active.next().show();
292289

293290
this.headers
294291
.attr( "role", "tab" )
@@ -409,6 +406,8 @@ return $.widget( "ui.accordion", {
409406
_eventHandler: function( event ) {
410407
var options = this.options,
411408
active = this.active,
409+
activeChildren = null,
410+
clickedChildren = null,
412411
clicked = $( event.currentTarget ),
413412
clickedIsActive = clicked[ 0 ] === active[ 0 ],
414413
collapsing = clickedIsActive && options.collapsible,
@@ -440,26 +439,23 @@ return $.widget( "ui.accordion", {
440439

441440
// switch classes
442441
// corner classes on the previously active header stay after the animation
443-
active.removeClass( "ui-accordion-header-active ui-state-active" );
442+
this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
444443
if ( options.icons ) {
445-
active.children( ".ui-accordion-header-icon" )
446-
.removeClass( options.icons.activeHeader )
447-
.addClass( options.icons.header );
444+
activeChildren = active.children( ".ui-accordion-header-icon" );
445+
this._removeClass( activeChildren, null, options.icons.activeHeader )
446+
._addClass( activeChildren, null, options.icons.header );
448447
}
449448

450449
if ( !clickedIsActive ) {
451-
clicked
452-
.removeClass( "ui-corner-all" )
453-
.addClass( "ui-accordion-header-active ui-state-active ui-corner-top" );
450+
this._removeClass( clicked, "ui-accordion-header-collapsed" )
451+
._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
454452
if ( options.icons ) {
455-
clicked.children( ".ui-accordion-header-icon" )
456-
.removeClass( options.icons.header )
457-
.addClass( options.icons.activeHeader );
453+
clickedChildren = clicked.children( ".ui-accordion-header-icon" );
454+
this._removeClass( clickedChildren, null, options.icons.header )
455+
._addClass( clickedChildren, null, options.icons.activeHeader );
458456
}
459457

460-
clicked
461-
.next()
462-
.addClass( "ui-accordion-content-active" );
458+
this._addClass( clicked.next(), "ui-accordion-content-active" );
463459
}
464460
},
465461

@@ -565,13 +561,12 @@ return $.widget( "ui.accordion", {
565561
},
566562

567563
_toggleComplete: function( data ) {
568-
var toHide = data.oldPanel;
564+
var toHide = data.oldPanel,
565+
prev = toHide.prev();
569566

570-
toHide
571-
.removeClass( "ui-accordion-content-active" )
572-
.prev()
573-
.removeClass( "ui-corner-top" )
574-
.addClass( "ui-corner-all" );
567+
this._removeClass( toHide, "ui-accordion-content-active" )
568+
._removeClass( prev, "ui-accordion-header-active" )
569+
._addClass( prev, "ui-accordion-header-collapsed" );
575570

576571
// Work around for rendering bug in IE (#5421)
577572
if ( toHide.length ) {

0 commit comments

Comments
 (0)