Progressbar: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html
index 56a02bcd4d6e5d00f4816a7603e50c7b1223b94c..1dae6b666ae82fb8ae8541827a27f484b23106cd 100644 (file)
--- a/tests/unit/progressbar/progressbar.html
+++ b/tests/unit/progressbar/progressbar.html
@@ -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" ],

diff --git a/tests/unit/progressbar/progressbar_common.js b/tests/unit/progressbar/progressbar_common.js
index c603b4efd2b3ee2deaec349cb77b654b2fb86fbe..0608f09f7922dc88cf3db3e56a3af2b6e8afff80 100644 (file)
--- a/tests/unit/progressbar/progressbar_common.js
+++ b/tests/unit/progressbar/progressbar_common.js
@@ -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,

diff --git a/tests/unit/progressbar/progressbar_core.js b/tests/unit/progressbar/progressbar_core.js
index 5b9aadc3d08c83abf95710758287253661985f02..686e93b432b03ad945990f7554e20805e82b5238 100644 (file)
--- a/tests/unit/progressbar/progressbar_core.js
+++ b/tests/unit/progressbar/progressbar_core.js
@@ -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() {

diff --git a/ui/progressbar.js b/ui/progressbar.js
index 28912d975e8a4d0429ba6d29298ca7af16fd58a5..d6127950eb475b9d0953633184558d408cc3f149 100644 (file)
--- a/ui/progressbar.js
+++ b/ui/progressbar.js
@@ -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({