Skip to content

Commit 7c6a7d7

Browse files
arschmitzarschmitz
committed
Accordion: Add classes option
Ref #7053 Ref gh-1411
1 parent c192d40 commit 7c6a7d7

File tree

4 files changed

+81
-69
lines changed

4 files changed

+81
-69
lines changed

‎tests/unit/accordion/accordion.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<script src="../../../external/qunit/qunit.js"></script>
1010
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
1111
<script src="../testsuite.js"></script>
12+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
1213
<script>
1314
TestHelpers.loadResources({
1415
css: [ "core", "accordion" ],

‎tests/unit/accordion/accordion_common.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ TestHelpers.commonWidgetTests( "accordion", {
22
defaults: {
33
active: 0,
44
animate: {},
5-
classes: {},
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+
},
610
collapsible: false,
711
disabled: false,
812
event: "click",

‎tests/unit/accordion/accordion_core.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,26 @@ var setupTeardown = TestHelpers.accordion.setupTeardown,
66
module( "accordion: core", setupTeardown() );
77

88
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
9-
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,
14-
".ui-accordion-header elements exist, correct number" );
15-
equal( element.find( ".ui-accordion-content" ).length, 3,
16-
".ui-accordion-content elements exist, correct number" );
9+
10+
test( "markup structure: " + type, function( assert ) {
11+
expect( 10 );
12+
var element = $( selector ).accordion(),
13+
headers = element.find( ".ui-accordion-header" ),
14+
content = headers.next();
15+
16+
assert.hasClasses( element, "ui-accordion ui-widget" );
17+
equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" );
18+
assert.hasClasses( headers[ 0 ],
19+
"ui-accordion-header ui-accordion-header-active ui-accordion-icons" );
20+
assert.hasClasses( headers[ 1 ],
21+
"ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
22+
assert.hasClasses( headers[ 2 ],
23+
"ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
24+
equal( content.length, 3, ".ui-accordion-content elements exist, correct number" );
25+
assert.hasClasses( content[ 0 ],
26+
"ui-accordion-content ui-widget-content ui-accordion-content-active" );
27+
assert.hasClasses( content[ 1 ], "ui-accordion-content ui-widget-content" );
28+
assert.hasClasses( content[ 2 ], "ui-accordion-content ui-widget-content" );
1729
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
1830
element.find( ".ui-accordion-content" ).get(),
1931
"content panels come immediately after headers" );

‎ui/accordion.js

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ return $.widget( "ui.accordion", {
3737
options: {
3838
active: 0,
3939
animate: {},
40+
classes: {
41+
"ui-accordion-header": "ui-corner-top",
42+
"ui-accordion-header-collapsed": "ui-corner-all",
43+
"ui-accordion-content": "ui-corner-bottom"
44+
},
4045
collapsible: false,
4146
event: "click",
4247
header: "> li > :first-child,> :not(li):even",
@@ -69,10 +74,10 @@ return $.widget( "ui.accordion", {
6974

7075
_create: function() {
7176
var options = this.options;
77+
7278
this.prevShow = this.prevHide = $();
73-
this.element.addClass( "ui-accordion ui-widget ui-helper-reset" )
74-
// ARIA
75-
.attr( "role", "tablist" );
79+
this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
80+
this.element.attr( "role", "tablist" );
7681

7782
// don't allow collapsible: false and active: false / null
7883
if ( !options.collapsible && (options.active === false || options.active == null) ) {
@@ -95,37 +100,33 @@ return $.widget( "ui.accordion", {
95100
},
96101

97102
_createIcons: function() {
98-
var icons = this.options.icons;
103+
var icon, children,
104+
icons = this.options.icons;
105+
99106
if ( icons ) {
100-
$( "<span>" )
101-
.addClass( "ui-accordion-header-icon ui-icon " + icons.header )
102-
.prependTo( this.headers );
103-
this.active.children( ".ui-accordion-header-icon" )
104-
.removeClass( icons.header )
105-
.addClass( icons.activeHeader );
106-
this.headers.addClass( "ui-accordion-icons" );
107+
icon = $( "<span>" );
108+
this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
109+
icon.prependTo( this.headers );
110+
children = this.active.children( ".ui-accordion-header-icon" );
111+
this._removeClass( children, icons.header )
112+
._addClass( children, null, icons.activeHeader )
113+
._addClass( this.headers, "ui-accordion-icons" );
107114
}
108115
},
109116

110117
_destroyIcons: function() {
111-
this.headers
112-
.removeClass( "ui-accordion-icons" )
113-
.children( ".ui-accordion-header-icon" )
114-
.remove();
118+
this._removeClass( this.headers, "ui-accordion-icons" );
119+
this.headers.children( ".ui-accordion-header-icon" ).remove();
115120
},
116121

117122
_destroy: function() {
118123
var contents;
119124

120125
// clean up main element
121-
this.element
122-
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
123-
.removeAttr( "role" );
126+
this.element.removeAttr( "role" );
124127

125128
// clean up headers
126129
this.headers
127-
.removeClass( "ui-accordion-header ui-accordion-header-active ui-state-default " +
128-
"ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
129130
.removeAttr( "role" )
130131
.removeAttr( "aria-expanded" )
131132
.removeAttr( "aria-selected" )
@@ -137,8 +138,6 @@ return $.widget( "ui.accordion", {
137138

138139
// clean up content panels
139140
contents = this.headers.next()
140-
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom " +
141-
"ui-accordion-content ui-accordion-content-active ui-state-disabled" )
142141
.css( "display", "" )
143142
.removeAttr( "role" )
144143
.removeAttr( "aria-hidden" )
@@ -178,14 +177,15 @@ return $.widget( "ui.accordion", {
178177
}
179178
}
180179

181-
// #5332 - opacity doesn't cascade to positioned elements in IE
180+
// Support: IE8 Only
181+
// #5332 / #6059 - opacity doesn't cascade to positioned elements in IE
182182
// so we need to add the disabled class to the headers and panels
183183
if ( key === "disabled" ) {
184-
this.element
185-
.toggleClass( "ui-state-disabled", !!value )
186-
.attr( "aria-disabled", value );
187-
this.headers.add( this.headers.next() )
188-
.toggleClass( "ui-state-disabled", !!value );
184+
this.element.attr( "aria-disabled", value );
185+
186+
this._toggleClass( null, "ui-state-disabled", !!value );
187+
this._toggleClass( this.headers.add( this.headers.next() ), null, "ui-state-disabled",
188+
!!value );
189189
}
190190
},
191191

@@ -270,13 +270,12 @@ return $.widget( "ui.accordion", {
270270
var prevHeaders = this.headers,
271271
prevPanels = this.panels;
272272

273-
this.headers = this.element.find( this.options.header )
274-
.addClass( "ui-accordion-header ui-state-default ui-corner-all" );
273+
this.headers = this.element.find( this.options.header );
274+
this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
275+
"ui-state-default" );
275276

276-
this.panels = this.headers.next()
277-
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" )
278-
.filter( ":not(.ui-accordion-content-active)" )
279-
.hide();
277+
this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
278+
this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
280279

281280
// Avoid memory leaks (#10056)
282281
if ( prevPanels ) {
@@ -291,12 +290,11 @@ return $.widget( "ui.accordion", {
291290
heightStyle = options.heightStyle,
292291
parent = this.element.parent();
293292

294-
this.active = this._findActive( options.active )
295-
.addClass( "ui-accordion-header-active ui-state-active ui-corner-top" )
296-
.removeClass( "ui-corner-all" );
297-
this.active.next()
298-
.addClass( "ui-accordion-content-active" )
299-
.show();
293+
this.active = this._findActive( options.active );
294+
this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
295+
._removeClass( this.active, "ui-accordion-header-collapsed" );
296+
this._addClass( this.active.next(), "ui-accordion-content-active" );
297+
this.active.next().show();
300298

301299
this.headers
302300
.attr( "role", "tab" )
@@ -415,7 +413,8 @@ return $.widget( "ui.accordion", {
415413
},
416414

417415
_eventHandler: function( event ) {
418-
var options = this.options,
416+
var activeChildren, clickedChildren,
417+
options = this.options,
419418
active = this.active,
420419
clicked = $( event.currentTarget ),
421420
clickedIsActive = clicked[ 0 ] === active[ 0 ],
@@ -448,26 +447,23 @@ return $.widget( "ui.accordion", {
448447

449448
// switch classes
450449
// corner classes on the previously active header stay after the animation
451-
active.removeClass( "ui-accordion-header-active ui-state-active" );
450+
this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
452451
if ( options.icons ) {
453-
active.children( ".ui-accordion-header-icon" )
454-
.removeClass( options.icons.activeHeader )
455-
.addClass( options.icons.header );
452+
activeChildren = active.children( ".ui-accordion-header-icon" );
453+
this._removeClass( activeChildren, null, options.icons.activeHeader )
454+
._addClass( activeChildren, null, options.icons.header );
456455
}
457456

458457
if ( !clickedIsActive ) {
459-
clicked
460-
.removeClass( "ui-corner-all" )
461-
.addClass( "ui-accordion-header-active ui-state-active ui-corner-top" );
458+
this._removeClass( clicked, "ui-accordion-header-collapsed" )
459+
._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
462460
if ( options.icons ) {
463-
clicked.children( ".ui-accordion-header-icon" )
464-
.removeClass( options.icons.header )
465-
.addClass( options.icons.activeHeader );
461+
clickedChildren = clicked.children( ".ui-accordion-header-icon" );
462+
this._removeClass( clickedChildren, null, options.icons.header )
463+
._addClass( clickedChildren, null, options.icons.activeHeader );
466464
}
467465

468-
clicked
469-
.next()
470-
.addClass( "ui-accordion-content-active" );
466+
this._addClass( clicked.next(), "ui-accordion-content-active" );
471467
}
472468
},
473469

@@ -579,13 +575,12 @@ return $.widget( "ui.accordion", {
579575
},
580576

581577
_toggleComplete: function( data ) {
582-
var toHide = data.oldPanel;
578+
var toHide = data.oldPanel,
579+
prev = toHide.prev();
583580

584-
toHide
585-
.removeClass( "ui-accordion-content-active" )
586-
.prev()
587-
.removeClass( "ui-corner-top" )
588-
.addClass( "ui-corner-all" );
581+
this._removeClass( toHide, "ui-accordion-content-active" );
582+
this._removeClass( prev, "ui-accordion-header-active" )
583+
._addClass( prev, "ui-accordion-header-collapsed" );
589584

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

0 commit comments

Comments
 (0)