diff options
| -rw-r--r-- | tests/unit/progressbar/progressbar.html | 1 | ||||
| -rw-r--r-- | tests/unit/progressbar/progressbar_common.js | 6 | ||||
| -rw-r--r-- | tests/unit/progressbar/progressbar_core.js | 42 | ||||
| -rw-r--r-- | ui/progressbar.js | 40 |
4 files changed, 52 insertions, 37 deletions
diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html index 56a02bcd4..1dae6b666 100644 --- 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 c603b4efd..0608f09f7 100644 --- 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 5b9aadc3d..686e93b43 100644 --- 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 28912d975..d6127950e 100644 --- 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({ |