Permalink
Browse files

Progressbar: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
1 parent 2ebef69 commit ea35ded6ed12747d88bf163c3b7fa15506ef521a @arschmitz arschmitz committed Dec 3, 2014
@@ -9,6 +9,7 @@
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
+ <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "progressbar" ],
@@ -1,6 +1,10 @@
TestHelpers.commonWidgetTests( "progressbar", {
defaults: {
- classes: {},
+ classes: {
+ "ui-progressbar": "ui-corner-all",
+ "ui-progressbar-value": "ui-corner-left",
+ "ui-progressbar-complete": "ui-corner-right"
+ },
disabled: false,
max: 100,
value: 0,
@@ -2,29 +2,33 @@
module( "progressbar: core" );
-test( "markup structure", function() {
- expect( 5 );
- var element = $( "#progressbar" ).progressbar();
- ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
- ok( !element.hasClass( "ui-progressbar-indeterminate" ),
- "main element is not .ui-progressbar-indeterminate" );
- equal( element.children().length, 1, "main element contains one child" );
- ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
- "child is .ui-progressbar-value" );
+test( "markup structure", function( assert ) {
+ expect( 7 );
+ var element = $( "#progressbar" ).progressbar(),
+ value = element.children().eq( 0 );
+
+ assert.hasClasses( element, "ui-progressbar ui-widget ui-widget-content" );
+ assert.hasClasses( value, "ui-progressbar-value ui-widget-header" );
+ assert.lacksClasses( value, "ui-progressbar-complete" );
+ assert.lacksClasses( element, "ui-progressbar-indeterminate" );
+ equal( element.children().length, 1, "Main element contains one child" );
+
+ element.progressbar( "option", "value", 100 );
+ assert.hasClasses( value, "ui-progressbar-complete ui-widget-header ui-progressbar-value" );
equal( element.children().children().length, 0, "no overlay div" );
});
-test( "markup structure - indeterminate", function() {
+test( "markup structure - indeterminate", function( assert ) {
expect( 5 );
- var element = $( "#progressbar" ).progressbar({ value: false });
- ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
- ok( element.hasClass( "ui-progressbar-indeterminate" ),
- "main element is .ui-progressbar-indeterminate" );
- equal( element.children().length, 1, "main element contains one child" );
- ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
- "child is .ui-progressbar-value" );
- equal( element.children().children( ".ui-progressbar-overlay" ).length, 1,
- ".ui-progressbar-value has .ui-progressbar-overlay" );
+ var element = $( "#progressbar" ).progressbar({ value: false }),
+ children = element.children();
+
+ assert.hasClasses( element, "ui-progressbar ui-progressbar-indeterminate ui-widget ui-widget-content" );
+ assert.hasClasses( children[ 0 ], "ui-progressbar-value ui-widget-header" );
+ equal( children.length, 1, "Main element contains one child" );
+ assert.hasClasses( children[ 0 ], "ui-progressbar-value" );
+ equal( children.children( ".ui-progressbar-overlay" ).length, 1,
+ "Value has class ui-progressbar-overlay" );
});
test( "accessibility", function() {
View
@@ -35,6 +35,11 @@
return $.widget( "ui.progressbar", {
version: "@VERSION",
options: {
+ classes: {
+ "ui-progressbar": "ui-corner-all",
+ "ui-progressbar-value": "ui-corner-left",
+ "ui-progressbar-complete": "ui-corner-right"
+ },
max: 100,
value: 0,
@@ -45,27 +50,26 @@ return $.widget( "ui.progressbar", {
min: 0,
_create: function() {
+
// Constrain initial value
this.oldValue = this.options.value = this._constrainedValue();
- this.element
- .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
- .attr({
- // Only set static values, aria-valuenow and aria-valuemax are
- // set inside _refreshValue()
- role: "progressbar",
- "aria-valuemin": this.min
- });
+ this.element.attr({
- this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
- .appendTo( this.element );
+ // Only set static values; aria-valuenow and aria-valuemax are
+ // set inside _refreshValue()
+ role: "progressbar",
+ "aria-valuemin": this.min
+ });
+ this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
+ this.valueDiv = $( "<div>" ).appendTo( this.element );
+ this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
this._refreshValue();
},
_destroy: function() {
this.element
- .removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
.removeAttr( "role" )
.removeAttr( "aria-valuemin" )
.removeAttr( "aria-valuemax" )
@@ -116,9 +120,8 @@ return $.widget( "ui.progressbar", {
value = Math.max( this.min, value );
}
if ( key === "disabled" ) {
- this.element
- .toggleClass( "ui-state-disabled", !!value )
- .attr( "aria-disabled", value );
+ this.element.attr( "aria-disabled", value );
+ this._toggleClass( null, "ui-state-disabled", !!value );
}
this._super( key, value );
},
@@ -133,15 +136,18 @@ return $.widget( "ui.progressbar", {
this.valueDiv
.toggle( this.indeterminate || value > this.min )
- .toggleClass( "ui-corner-right", value === this.options.max )
.width( percentage.toFixed(0) + "%" );
- this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
+ this
+ ._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
+ value === this.options.max )
+ ._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
if ( this.indeterminate ) {
this.element.removeAttr( "aria-valuenow" );
if ( !this.overlayDiv ) {
- this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
+ this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
+ this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
}
} else {
this.element.attr({

0 comments on commit ea35ded

Please sign in to comment.