Skip to content

Commit 5a9ac3d

Browse files
petersendiditarschmitz
petersendidit
authored and
arschmitz
committed
Tabs: use the _classes method.
Fixes #7053
1 parent 7e741aa commit 5a9ac3d

File tree

5 files changed

+94
-25
lines changed

5 files changed

+94
-25
lines changed

‎tests/unit/tabs/tabs_common.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
TestHelpers.commonWidgetTests( "tabs", {
22
defaults: {
33
active: null,
4+
classes: {
5+
"ui-tabs": "ui-corner-all",
6+
"ui-tabs-collapsible": null,
7+
"ui-tabs-active": null,
8+
"ui-tabs-nav": "ui-corner-all",
9+
"ui-tab": "ui-corner-top",
10+
"ui-tabs-anchor": null,
11+
"ui-tabs-panel": "ui-corner-bottom",
12+
"ui-tabs-loading": null
13+
},
414
collapsible: false,
515
disabled: false,
616
event: "click",

‎tests/unit/tabs/tabs_core.js

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,32 @@ var state = TestHelpers.tabs.state;
55
module( "tabs: core" );
66

77
test( "markup structure", function() {
8-
expect( 3 );
9-
var element = $( "#tabs1" ).tabs();
8+
expect( 15 );
9+
var element = $( "#tabs1" ).tabs(),
10+
ul = element.find( "ul.ui-tabs-nav" ),
11+
tabs = ul.find( "li" ),
12+
active = tabs.eq( 0 );
13+
1014
ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
11-
ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" );
12-
equal( element.find( ".ui-tabs-panel" ).length, 3,
15+
ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" );
16+
ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
17+
ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
18+
ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );
19+
20+
ok( ul.hasClass( "ui-tabs-nav" ), "list is .ui-tabs-nav" );
21+
ok( ul.hasClass( "ui-widget-header" ), "list is .ui-widget-header" );
22+
ok( ul.hasClass( "ui-corner-all" ), "list is .ui-corner-all" );
23+
24+
ok( tabs.hasClass( "ui-tab" ), "list item is .ui-tab" );
25+
ok( tabs.hasClass( "ui-corner-top" ), "list item is .ui-corner-top" );
26+
ok( tabs.hasClass( "ui-state-default" ), "list item is .ui-state-default" );
27+
28+
ok( element.find( "a" ).hasClass( "ui-tabs-anchor" ), "link item is .ui-tabs-anchor" );
29+
30+
ok( active.hasClass( "ui-tabs-active" ), "active item is .ui-tabs-active" );
31+
ok( active.hasClass( "ui-state-active" ), "active item is .ui-state-active" );
32+
33+
equal( element.find( ".ui-tabs-panel.ui-widget-content.ui-corner-bottom" ).length, 3,
1334
".ui-tabs-panel elements exist, correct number" );
1435
});
1536

@@ -130,17 +151,21 @@ test( "accessibility", function() {
130151
});
131152

132153
asyncTest( "accessibility - ajax", function() {
133-
expect( 4 );
154+
expect( 6 );
134155
var element = $( "#tabs2" ).tabs(),
156+
tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
135157
panel = $( "#custom-id" );
136158

137159
equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" );
138160
equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" );
139161
element.tabs( "option", "active", 3 );
140162
equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" );
163+
ok( tab.hasClass( "ui-tabs-loading" ), "tab is .ui-tabs-loading during load" );
164+
141165
element.one( "tabsload", function() {
142166
setTimeout(function() {
143167
equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" );
168+
ok( !tab.hasClass( "ui-tabs-loading" ), "tab is not .ui-tabs-loading after load" );
144169
start();
145170
}, 1 );
146171
});

‎tests/unit/tabs/tabs_methods.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,22 @@ test( "destroy", function() {
1515
});
1616
});
1717

18+
asyncTest( "destroy - ajax", function() {
19+
expect( 1 );
20+
domEqual( "#tabs2", function( done ) {
21+
var element = $( "#tabs2" ).tabs({
22+
load: function() {
23+
setTimeout(function() {
24+
element.tabs( "destroy" );
25+
done();
26+
start();
27+
});
28+
}
29+
});
30+
element.tabs( "option", "active", 2 );
31+
});
32+
});
33+
1834
test( "enable", function() {
1935
expect( 8 );
2036

‎tests/unit/tabs/tabs_options.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,13 @@ test( "{ collapsible: false }", function() {
123123
});
124124

125125
test( "{ collapsible: true }", function() {
126-
expect( 6 );
126+
expect( 9 );
127127

128128
var element = $( "#tabs1" ).tabs({
129129
active: 1,
130130
collapsible: true
131131
});
132+
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );
132133

133134
element.tabs( "option", "active", false );
134135
equal( element.tabs( "option", "active" ), false );
@@ -141,6 +142,12 @@ test( "{ collapsible: true }", function() {
141142
element.find( ".ui-state-active .ui-tabs-anchor" ).click();
142143
equal( element.tabs( "option", "active" ), false );
143144
state( element, 0, 0, 0 );
145+
146+
element.tabs( "option", "collapsible", false );
147+
ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );
148+
149+
element.tabs( "option", "collapsible", true );
150+
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );
144151
});
145152

146153
test( "disabled", function() {

‎ui/tabs.js

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ return $.widget( "ui.tabs", {
2929
delay: 300,
3030
options: {
3131
active: null,
32+
classes: {
33+
"ui-tabs": "ui-corner-all",
34+
"ui-tabs-collapsible": null,
35+
"ui-tabs-active": null,
36+
"ui-tabs-nav": "ui-corner-all",
37+
"ui-tab": "ui-corner-top",
38+
"ui-tabs-anchor": null,
39+
"ui-tabs-panel": "ui-corner-bottom",
40+
"ui-tabs-loading": null
41+
},
3242
collapsible: false,
3343
event: "click",
3444
heightStyle: "content",
@@ -74,8 +84,8 @@ return $.widget( "ui.tabs", {
7484
this.running = false;
7585

7686
this.element
77-
.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" )
78-
.toggleClass( "ui-tabs-collapsible", options.collapsible );
87+
.addClass( this._classes( "ui-tabs" ) + " ui-widget ui-widget-content" )
88+
.toggleClass( this._classes( "ui-tabs-collapsible" ), options.collapsible );
7989

8090
this._processTabs();
8191
options.active = this._initialActive();
@@ -281,7 +291,7 @@ return $.widget( "ui.tabs", {
281291
this._super( key, value);
282292

283293
if ( key === "collapsible" ) {
284-
this.element.toggleClass( "ui-tabs-collapsible", value );
294+
this.element.toggleClass( this._classes( "ui-tabs-collapsible" ), value );
285295
// Setting collapsible: false while collapsed; open first panel
286296
if ( !value && this.options.active === false ) {
287297
this._activate( 0 );
@@ -357,7 +367,7 @@ return $.widget( "ui.tabs", {
357367
this.tabs.eq( 0 ).attr( "tabIndex", 0 );
358368
} else {
359369
this.active
360-
.addClass( "ui-tabs-active ui-state-active" )
370+
.addClass( this._classes( "ui-tabs-active" ) + " ui-state-active" )
361371
.attr({
362372
"aria-selected": "true",
363373
"aria-expanded": "true",
@@ -378,7 +388,7 @@ return $.widget( "ui.tabs", {
378388
prevPanels = this.panels;
379389

380390
this.tablist = this._getList()
381-
.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
391+
.addClass( this._classes( "ui-tabs-nav" ) + " ui-helper-reset ui-helper-clearfix ui-widget-header" )
382392
.attr( "role", "tablist" )
383393

384394
// Prevent users from focusing disabled tabs via click
@@ -401,7 +411,7 @@ return $.widget( "ui.tabs", {
401411
});
402412

403413
this.tabs = this.tablist.find( "> li:has(a[href])" )
404-
.addClass( "ui-state-default ui-corner-top" )
414+
.addClass( this._classes( "ui-tab" ) + " ui-state-default" )
405415
.attr({
406416
role: "tab",
407417
tabIndex: -1
@@ -410,7 +420,7 @@ return $.widget( "ui.tabs", {
410420
this.anchors = this.tabs.map(function() {
411421
return $( "a", this )[ 0 ];
412422
})
413-
.addClass( "ui-tabs-anchor" )
423+
.addClass( that._classes( "ui-tabs-anchor" ) )
414424
.attr({
415425
role: "presentation",
416426
tabIndex: -1
@@ -457,7 +467,7 @@ return $.widget( "ui.tabs", {
457467
});
458468

459469
this.panels
460-
.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
470+
.addClass( this._classes( "ui-tabs-panel" ) + " ui-widget-content" )
461471
.attr( "role", "tabpanel" );
462472

463473
// Avoid memory leaks (#10056)
@@ -476,7 +486,7 @@ return $.widget( "ui.tabs", {
476486
_createPanel: function( id ) {
477487
return $( "<div>" )
478488
.attr( "id", id )
479-
.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
489+
.addClass( this._classes( "ui-tabs-panel" ) + " ui-widget-content" )
480490
.data( "ui-tabs-destroy", true );
481491
},
482492

@@ -624,7 +634,7 @@ return $.widget( "ui.tabs", {
624634
}
625635

626636
function show() {
627-
eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
637+
eventData.newTab.closest( "li" ).addClass( that._classes( "ui-tabs-active" ) + " ui-state-active" );
628638

629639
if ( toShow.length && that.options.show ) {
630640
that._show( toShow, that.options.show, complete );
@@ -637,11 +647,11 @@ return $.widget( "ui.tabs", {
637647
// start out by hiding, then showing, then completing
638648
if ( toHide.length && this.options.hide ) {
639649
this._hide( toHide, this.options.hide, function() {
640-
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
650+
eventData.oldTab.closest( "li" ).removeClass( that._classes( "ui-tabs-active" ) + " ui-state-active" );
641651
show();
642652
});
643653
} else {
644-
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
654+
eventData.oldTab.closest( "li" ).removeClass( this._classes( "ui-tabs-active" ) + " ui-state-active" );
645655
toHide.hide();
646656
show();
647657
}
@@ -707,18 +717,19 @@ return $.widget( "ui.tabs", {
707717
},
708718

709719
_destroy: function() {
720+
var that = this;
710721
if ( this.xhr ) {
711722
this.xhr.abort();
712723
}
713724

714-
this.element.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" );
725+
this.element.removeClass( this._classes( "ui-tabs ui-tabs-collapsible" ) + " ui-widget ui-widget-content" );
715726

716727
this.tablist
717-
.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
728+
.removeClass( this._classes( "ui-tabs-nav" ) + " ui-helper-reset ui-helper-clearfix ui-widget-header" )
718729
.removeAttr( "role" );
719730

720731
this.anchors
721-
.removeClass( "ui-tabs-anchor" )
732+
.removeClass( this._classes( "ui-tabs-anchor" ) )
722733
.removeAttr( "role" )
723734
.removeAttr( "tabIndex" )
724735
.removeUniqueId();
@@ -730,8 +741,8 @@ return $.widget( "ui.tabs", {
730741
$( this ).remove();
731742
} else {
732743
$( this )
733-
.removeClass( "ui-state-default ui-state-active ui-state-disabled " +
734-
"ui-corner-top ui-corner-bottom ui-widget-content ui-tabs-active ui-tabs-panel" )
744+
.removeClass( that._classes( "ui-tabs-active ui-tab ui-tabs-panel" ) +
745+
" ui-helper-reset ui-helper-clearfix ui-widget-content ui-state-default ui-state-active ui-state-disabled" )
735746
.removeAttr( "tabIndex" )
736747
.removeAttr( "aria-live" )
737748
.removeAttr( "aria-busy" )
@@ -829,7 +840,7 @@ return $.widget( "ui.tabs", {
829840
// jQuery <1.8 returns false if the request is canceled in beforeSend,
830841
// but as of 1.8, $.ajax() always returns a jqXHR object.
831842
if ( this.xhr && this.xhr.statusText !== "canceled" ) {
832-
tab.addClass( "ui-tabs-loading" );
843+
tab.addClass( this._classes( "ui-tabs-loading" ) );
833844
panel.attr( "aria-busy", "true" );
834845

835846
this.xhr
@@ -849,7 +860,7 @@ return $.widget( "ui.tabs", {
849860
that.panels.stop( false, true );
850861
}
851862

852-
tab.removeClass( "ui-tabs-loading" );
863+
tab.removeClass( that._classes( "ui-tabs-loading" ) );
853864
panel.removeAttr( "aria-busy" );
854865

855866
if ( jqXHR === that.xhr ) {

0 commit comments

Comments
 (0)