Skip to content

Commit ea35ded

Browse files
arschmitzarschmitz
committed
Progressbar: Add classes option
Ref #7053 Ref gh-1411
1 parent 2ebef69 commit ea35ded

File tree

4 files changed

+52
-37
lines changed

4 files changed

+52
-37
lines changed

‎tests/unit/progressbar/progressbar.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", "progressbar" ],

‎tests/unit/progressbar/progressbar_common.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
TestHelpers.commonWidgetTests( "progressbar", {
22
defaults: {
3-
classes: {},
3+
classes: {
4+
"ui-progressbar": "ui-corner-all",
5+
"ui-progressbar-value": "ui-corner-left",
6+
"ui-progressbar-complete": "ui-corner-right"
7+
},
48
disabled: false,
59
max: 100,
610
value: 0,

‎tests/unit/progressbar/progressbar_core.js

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,33 @@
22

33
module( "progressbar: core" );
44

5-
test( "markup structure", function() {
6-
expect( 5 );
7-
var element = $( "#progressbar" ).progressbar();
8-
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
9-
ok( !element.hasClass( "ui-progressbar-indeterminate" ),
10-
"main element is not .ui-progressbar-indeterminate" );
11-
equal( element.children().length, 1, "main element contains one child" );
12-
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
13-
"child is .ui-progressbar-value" );
5+
test( "markup structure", function( assert ) {
6+
expect( 7 );
7+
var element = $( "#progressbar" ).progressbar(),
8+
value = element.children().eq( 0 );
9+
10+
assert.hasClasses( element, "ui-progressbar ui-widget ui-widget-content" );
11+
assert.hasClasses( value, "ui-progressbar-value ui-widget-header" );
12+
assert.lacksClasses( value, "ui-progressbar-complete" );
13+
assert.lacksClasses( element, "ui-progressbar-indeterminate" );
14+
equal( element.children().length, 1, "Main element contains one child" );
15+
16+
element.progressbar( "option", "value", 100 );
17+
assert.hasClasses( value, "ui-progressbar-complete ui-widget-header ui-progressbar-value" );
1418
equal( element.children().children().length, 0, "no overlay div" );
1519
});
1620

17-
test( "markup structure - indeterminate", function() {
21+
test( "markup structure - indeterminate", function( assert ) {
1822
expect( 5 );
19-
var element = $( "#progressbar" ).progressbar({ value: false });
20-
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
21-
ok( element.hasClass( "ui-progressbar-indeterminate" ),
22-
"main element is .ui-progressbar-indeterminate" );
23-
equal( element.children().length, 1, "main element contains one child" );
24-
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
25-
"child is .ui-progressbar-value" );
26-
equal( element.children().children( ".ui-progressbar-overlay" ).length, 1,
27-
".ui-progressbar-value has .ui-progressbar-overlay" );
23+
var element = $( "#progressbar" ).progressbar({ value: false }),
24+
children = element.children();
25+
26+
assert.hasClasses( element, "ui-progressbar ui-progressbar-indeterminate ui-widget ui-widget-content" );
27+
assert.hasClasses( children[ 0 ], "ui-progressbar-value ui-widget-header" );
28+
equal( children.length, 1, "Main element contains one child" );
29+
assert.hasClasses( children[ 0 ], "ui-progressbar-value" );
30+
equal( children.children( ".ui-progressbar-overlay" ).length, 1,
31+
"Value has class ui-progressbar-overlay" );
2832
});
2933

3034
test( "accessibility", function() {

‎ui/progressbar.js

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@
3535
return $.widget( "ui.progressbar", {
3636
version: "@VERSION",
3737
options: {
38+
classes: {
39+
"ui-progressbar": "ui-corner-all",
40+
"ui-progressbar-value": "ui-corner-left",
41+
"ui-progressbar-complete": "ui-corner-right"
42+
},
3843
max: 100,
3944
value: 0,
4045

@@ -45,27 +50,26 @@ return $.widget( "ui.progressbar", {
4550
min: 0,
4651

4752
_create: function() {
53+
4854
// Constrain initial value
4955
this.oldValue = this.options.value = this._constrainedValue();
5056

51-
this.element
52-
.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
53-
.attr({
54-
// Only set static values, aria-valuenow and aria-valuemax are
55-
// set inside _refreshValue()
56-
role: "progressbar",
57-
"aria-valuemin": this.min
58-
});
57+
this.element.attr({
5958

60-
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
61-
.appendTo( this.element );
59+
// Only set static values; aria-valuenow and aria-valuemax are
60+
// set inside _refreshValue()
61+
role: "progressbar",
62+
"aria-valuemin": this.min
63+
});
64+
this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
6265

66+
this.valueDiv = $( "<div>" ).appendTo( this.element );
67+
this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
6368
this._refreshValue();
6469
},
6570

6671
_destroy: function() {
6772
this.element
68-
.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
6973
.removeAttr( "role" )
7074
.removeAttr( "aria-valuemin" )
7175
.removeAttr( "aria-valuemax" )
@@ -116,9 +120,8 @@ return $.widget( "ui.progressbar", {
116120
value = Math.max( this.min, value );
117121
}
118122
if ( key === "disabled" ) {
119-
this.element
120-
.toggleClass( "ui-state-disabled", !!value )
121-
.attr( "aria-disabled", value );
123+
this.element.attr( "aria-disabled", value );
124+
this._toggleClass( null, "ui-state-disabled", !!value );
122125
}
123126
this._super( key, value );
124127
},
@@ -133,15 +136,18 @@ return $.widget( "ui.progressbar", {
133136

134137
this.valueDiv
135138
.toggle( this.indeterminate || value > this.min )
136-
.toggleClass( "ui-corner-right", value === this.options.max )
137139
.width( percentage.toFixed(0) + "%" );
138140

139-
this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
141+
this
142+
._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
143+
value === this.options.max )
144+
._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
140145

141146
if ( this.indeterminate ) {
142147
this.element.removeAttr( "aria-valuenow" );
143148
if ( !this.overlayDiv ) {
144-
this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
149+
this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
150+
this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
145151
}
146152
} else {
147153
this.element.attr({

0 commit comments

Comments
 (0)