Skip to content

Commit 526e2f2

Browse files
arschmitzarschmitz
committed
Progressbar: Add classes option
1 parent a2c6b33 commit 526e2f2

File tree

3 files changed

+36
-21
lines changed

3 files changed

+36
-21
lines changed

‎tests/unit/progressbar/progressbar_common.js

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

‎tests/unit/progressbar/progressbar_core.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
module( "progressbar: core" );
22

33
test( "markup structure", function() {
4-
expect( 5 );
5-
var element = $( "#progressbar" ).progressbar();
6-
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
4+
expect( 7 );
5+
var element = $( "#progressbar" ).progressbar(),
6+
value = element.children().eq( 0 );
7+
ok( element.is( ".ui-progressbar.ui-widget.ui-widget-content.ui-corner-all" ),
8+
"main element has proper classes" );
9+
ok( !value.is( ".ui-progressbar-complete.ui-corner-right" ),
10+
"value does not have ui-corner-right or ui-progressbar-complete" );
11+
element.progressbar( "option", "value", 100 );
12+
ok( value.is( ".ui-progressbar-complete.ui-corner-right.ui-corner-left.ui-widget-header" ),
13+
"value has proper classes" );
14+
715
ok( !element.hasClass( "ui-progressbar-indeterminate" ),
816
"main element is not .ui-progressbar-indeterminate" );
917
equal( element.children().length, 1, "main element contains one child" );
10-
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
18+
ok( element.children().eq( 0 ).is( ".ui-progressbar-value" ),
1119
"child is .ui-progressbar-value" );
1220
equal( element.children().children().length, 0, "no overlay div" );
1321
});
1422

1523
test( "markup structure - indeterminate", function() {
16-
expect( 5 );
24+
expect( 4 );
1725
var element = $( "#progressbar" ).progressbar({ value: false });
18-
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
19-
ok( element.hasClass( "ui-progressbar-indeterminate" ),
20-
"main element is .ui-progressbar-indeterminate" );
26+
ok( element.is( ".ui-progressbar.ui-progressbar-indeterminate" ),
27+
"main element has proper classes" );
2128
equal( element.children().length, 1, "main element contains one child" );
2229
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
2330
"child is .ui-progressbar-value" );

‎ui/progressbar.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
return $.widget( "ui.progressbar", {
2828
version: "@VERSION",
2929
options: {
30+
classes: {
31+
"ui-progressbar": "ui-corner-all",
32+
"ui-progressbar-value": "ui-corner-left",
33+
"ui-progressbar-complete": "ui-corner-right"
34+
},
3035
max: 100,
3136
value: 0,
3237

@@ -40,24 +45,21 @@ return $.widget( "ui.progressbar", {
4045
// Constrain initial value
4146
this.oldValue = this.options.value = this._constrainedValue();
4247

43-
this.element
44-
.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
45-
.attr({
48+
this.element.attr({
4649
// Only set static values, aria-valuenow and aria-valuemax are
4750
// set inside _refreshValue()
4851
role: "progressbar",
4952
"aria-valuemin": this.min
5053
});
54+
this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
5155

52-
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
53-
.appendTo( this.element );
54-
56+
this.valueDiv = $( "<div>" ).appendTo( this.element );
57+
this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
5558
this._refreshValue();
5659
},
5760

5861
_destroy: function() {
5962
this.element
60-
.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
6163
.removeAttr( "role" )
6264
.removeAttr( "aria-valuemin" )
6365
.removeAttr( "aria-valuemax" )
@@ -108,9 +110,8 @@ return $.widget( "ui.progressbar", {
108110
value = Math.max( this.min, value );
109111
}
110112
if ( key === "disabled" ) {
111-
this.element
112-
.toggleClass( "ui-state-disabled", !!value )
113-
.attr( "aria-disabled", value );
113+
this.element.attr( "aria-disabled", value );
114+
this._toggleClass( null, "ui-state-disabled", !!value );
114115
}
115116
this._super( key, value );
116117
},
@@ -125,15 +126,17 @@ return $.widget( "ui.progressbar", {
125126

126127
this.valueDiv
127128
.toggle( this.indeterminate || value > this.min )
128-
.toggleClass( "ui-corner-right", value === this.options.max )
129129
.width( percentage.toFixed(0) + "%" );
130130

131-
this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
131+
this._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
132+
value === this.options.max )
133+
._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
132134

133135
if ( this.indeterminate ) {
134136
this.element.removeAttr( "aria-valuenow" );
135137
if ( !this.overlayDiv ) {
136-
this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
138+
this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
139+
this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
137140
}
138141
} else {
139142
this.element.attr({

0 commit comments

Comments
 (0)