Skip to content

Code Review for the classes changes #790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
petersendidit wants to merge 12 commits into from
Closed

Code Review for the classes changes #790

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cd43b3d
Widget: add the _classes method.
petersendidit Oct 19, 2012
11528ff
Tabs: use the _classes method.
petersendidit Oct 19, 2012
66a1347
Dialog: use the _classes method.
petersendidit Apr 23, 2013
d1cc07b
Accordion: use the _classes method.
petersendidit Apr 23, 2013
b4e2f81
Autocomplete: use the _classes method.
petersendidit Apr 24, 2013
8746e4d
Slider: use the _classes method.
petersendidit Apr 24, 2013
bb7f6e9
Spinner: use the _classes method.
petersendidit Apr 24, 2013
6fca6fe
Progressbar: use the _classes method.
petersendidit Apr 24, 2013
05fba95
Menu: use the _classes method.
petersendidit Apr 25, 2013
c3b8a80
Button: use the _classes method.
petersendidit Apr 25, 2013
171e6a2
Tooltip: use the _classes method.
petersendidit Apr 25, 2013
051c9c1
Selectmenu: use the _classes method.
petersendidit Aug 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Tabs: use the _classes method. 
Fixes #7053
  • Loading branch information
@petersendidit
petersendidit committed Aug 24, 2014
commit 11528ffcc2aef495fd31263229c46fc11e81b093
10 changes: 10 additions & 0 deletions tests/unit/tabs/tabs_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
TestHelpers.commonWidgetTests( "tabs", {
defaults: {
active: null,
classes: {
"ui-tabs": "ui-corner-all",
"ui-tabs-collapsible": null,
"ui-tabs-active": null,
"ui-tabs-nav": "ui-corner-all",
"ui-tab": "ui-corner-top",
"ui-tabs-anchor": null,
"ui-tabs-panel": "ui-corner-bottom",
"ui-tabs-loading": null
},
collapsible: false,
disabled: false,
event: "click",
Expand Down
35 changes: 30 additions & 5 deletions tests/unit/tabs/tabs_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,32 @@ var state = TestHelpers.tabs.state;
module( "tabs: core" );

test( "markup structure", function() {
expect( 3 );
var element = $( "#tabs1" ).tabs();
expect( 15 );
var element = $( "#tabs1" ).tabs(),
ul = element.find( "ul.ui-tabs-nav" ),
tabs = ul.find( "li" ),
active = tabs.eq( 0 );

ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" );
equal( element.find( ".ui-tabs-panel" ).length, 3,
ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" );
ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );

ok( ul.hasClass( "ui-tabs-nav" ), "list is .ui-tabs-nav" );
ok( ul.hasClass( "ui-widget-header" ), "list is .ui-widget-header" );
ok( ul.hasClass( "ui-corner-all" ), "list is .ui-corner-all" );

ok( tabs.hasClass( "ui-tab" ), "list item is .ui-tab" );
ok( tabs.hasClass( "ui-corner-top" ), "list item is .ui-corner-top" );
ok( tabs.hasClass( "ui-state-default" ), "list item is .ui-state-default" );

ok( element.find( "a" ).hasClass( "ui-tabs-anchor" ), "link item is .ui-tabs-anchor" );

ok( active.hasClass( "ui-tabs-active" ), "active item is .ui-tabs-active" );
ok( active.hasClass( "ui-state-active" ), "active item is .ui-state-active" );

equal( element.find( ".ui-tabs-panel.ui-widget-content.ui-corner-bottom" ).length, 3,
".ui-tabs-panel elements exist, correct number" );
});

Expand Down Expand Up @@ -130,17 +151,21 @@ test( "accessibility", function() {
});

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

equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" );
equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" );
element.tabs( "option", "active", 3 );
equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" );
ok( tab.hasClass( "ui-tabs-loading" ), "tab is .ui-tabs-loading during load" );

element.one( "tabsload", function() {
setTimeout(function() {
equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" );
ok( !tab.hasClass( "ui-tabs-loading" ), "tab is not .ui-tabs-loading after load" );
start();
}, 1 );
});
Expand Down
16 changes: 16 additions & 0 deletions tests/unit/tabs/tabs_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,22 @@ test( "destroy", function() {
});
});

asyncTest( "destroy - ajax", function() {
expect( 1 );
domEqual( "#tabs2", function( done ) {
var element = $( "#tabs2" ).tabs({
load: function() {
setTimeout(function() {
element.tabs( "destroy" );
done();
start();
});
}
});
element.tabs( "option", "active", 2 );
});
});

test( "enable", function() {
expect( 8 );

Expand Down
9 changes: 8 additions & 1 deletion tests/unit/tabs/tabs_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,12 +123,13 @@ test( "{ collapsible: false }", function() {
});

test( "{ collapsible: true }", function() {
expect( 6 );
expect( 9 );

var element = $( "#tabs1" ).tabs({
active: 1,
collapsible: true
});
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );

element.tabs( "option", "active", false );
equal( element.tabs( "option", "active" ), false );
Expand All @@ -141,6 +142,12 @@ test( "{ collapsible: true }", function() {
element.find( ".ui-state-active .ui-tabs-anchor" ).click();
equal( element.tabs( "option", "active" ), false );
state( element, 0, 0, 0 );

element.tabs( "option", "collapsible", false );
ok( !element.hasClass( "ui-tabs-collapsible" ), "main element is not .ui-tabs-collapsible" );

element.tabs( "option", "collapsible", true );
ok( element.hasClass( "ui-tabs-collapsible" ), "main element is .ui-tabs-collapsible" );
});

test( "disabled", function() {
Expand Down
49 changes: 30 additions & 19 deletions ui/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,16 @@ return $.widget( "ui.tabs", {
delay: 300,
options: {
active: null,
classes: {
"ui-tabs": "ui-corner-all",
"ui-tabs-collapsible": null,
"ui-tabs-active": null,
"ui-tabs-nav": "ui-corner-all",
"ui-tab": "ui-corner-top",
"ui-tabs-anchor": null,
"ui-tabs-panel": "ui-corner-bottom",
"ui-tabs-loading": null
},
collapsible: false,
event: "click",
heightStyle: "content",
Expand Down Expand Up @@ -74,8 +84,8 @@ return $.widget( "ui.tabs", {
this.running = false;

this.element
.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" )
.toggleClass( "ui-tabs-collapsible", options.collapsible );
.addClass( this._classes( "ui-tabs" ) + " ui-widget ui-widget-content" )
.toggleClass( this._classes( "ui-tabs-collapsible" ), options.collapsible );

this._processTabs();
options.active = this._initialActive();
Expand Down Expand Up @@ -281,7 +291,7 @@ return $.widget( "ui.tabs", {
this._super( key, value);

if ( key === "collapsible" ) {
this.element.toggleClass( "ui-tabs-collapsible", value );
this.element.toggleClass( this._classes( "ui-tabs-collapsible" ), value );
// Setting collapsible: false while collapsed; open first panel
if ( !value && this.options.active === false ) {
this._activate( 0 );
Expand Down Expand Up @@ -357,7 +367,7 @@ return $.widget( "ui.tabs", {
this.tabs.eq( 0 ).attr( "tabIndex", 0 );
} else {
this.active
.addClass( "ui-tabs-active ui-state-active" )
.addClass( this._classes( "ui-tabs-active" ) + " ui-state-active" )
.attr({
"aria-selected": "true",
"aria-expanded": "true",
Expand All @@ -378,7 +388,7 @@ return $.widget( "ui.tabs", {
prevPanels = this.panels;

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

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

this.tabs = this.tablist.find( "> li:has(a[href])" )
.addClass( "ui-state-default ui-corner-top" )
.addClass( this._classes( "ui-tab" ) + " ui-state-default" )
.attr({
role: "tab",
tabIndex: -1
Expand All @@ -410,7 +420,7 @@ return $.widget( "ui.tabs", {
this.anchors = this.tabs.map(function() {
return $( "a", this )[ 0 ];
})
.addClass( "ui-tabs-anchor" )
.addClass( that._classes( "ui-tabs-anchor" ) )
.attr({
role: "presentation",
tabIndex: -1
Expand Down Expand Up @@ -457,7 +467,7 @@ return $.widget( "ui.tabs", {
});

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

// Avoid memory leaks (#10056)
Expand All @@ -476,7 +486,7 @@ return $.widget( "ui.tabs", {
_createPanel: function( id ) {
return $( "<div>" )
.attr( "id", id )
.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
.addClass( this._classes( "ui-tabs-panel" ) + " ui-widget-content" )
.data( "ui-tabs-destroy", true );
},

Expand Down Expand Up @@ -624,7 +634,7 @@ return $.widget( "ui.tabs", {
}

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

if ( toShow.length && that.options.show ) {
that._show( toShow, that.options.show, complete );
Expand All @@ -637,11 +647,11 @@ return $.widget( "ui.tabs", {
// start out by hiding, then showing, then completing
if ( toHide.length && this.options.hide ) {
this._hide( toHide, this.options.hide, function() {
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
eventData.oldTab.closest( "li" ).removeClass( that._classes( "ui-tabs-active" ) + " ui-state-active" );
show();
});
} else {
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
eventData.oldTab.closest( "li" ).removeClass( this._classes( "ui-tabs-active" ) + " ui-state-active" );
toHide.hide();
show();
}
Expand Down Expand Up @@ -707,18 +717,19 @@ return $.widget( "ui.tabs", {
},

_destroy: function() {
var that = this;
if ( this.xhr ) {
this.xhr.abort();
}

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

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

this.anchors
.removeClass( "ui-tabs-anchor" )
.removeClass( this._classes( "ui-tabs-anchor" ) )
.removeAttr( "role" )
.removeAttr( "tabIndex" )
.removeUniqueId();
Expand All @@ -730,8 +741,8 @@ return $.widget( "ui.tabs", {
$( this ).remove();
} else {
$( this )
.removeClass( "ui-state-default ui-state-active ui-state-disabled " +
"ui-corner-top ui-corner-bottom ui-widget-content ui-tabs-active ui-tabs-panel" )
.removeClass( that._classes( "ui-tabs-active ui-tab ui-tabs-panel" ) +
" ui-helper-reset ui-helper-clearfix ui-widget-content ui-state-default ui-state-active ui-state-disabled" )
.removeAttr( "tabIndex" )
.removeAttr( "aria-live" )
.removeAttr( "aria-busy" )
Expand Down Expand Up @@ -829,7 +840,7 @@ return $.widget( "ui.tabs", {
// jQuery <1.8 returns false if the request is canceled in beforeSend,
// but as of 1.8, $.ajax() always returns a jqXHR object.
if ( this.xhr && this.xhr.statusText !== "canceled" ) {
tab.addClass( "ui-tabs-loading" );
tab.addClass( this._classes( "ui-tabs-loading" ) );
panel.attr( "aria-busy", "true" );

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

tab.removeClass( "ui-tabs-loading" );
tab.removeClass( that._classes( "ui-tabs-loading" ) );
panel.removeAttr( "aria-busy" );

if ( jqXHR === that.xhr ) {
Expand Down