Progressbar: Add classes option

Author: arschmitz

tests/unit/progressbar/progressbar_common.js

@@ -1,5 +1,12 @@
 TestHelpers.commonWidgetTests( "progressbar", {
 	defaults: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-overlay": "",
+			"ui-progressbar-indeterminate": "",
+			"ui-progressbar-complete": "ui-corner-right"
+		},
 		disabled: false,
 		max: 100,
 		value: 0,

tests/unit/progressbar/progressbar_core.js

@@ -1,23 +1,30 @@
 module( "progressbar: core" );
 
 test( "markup structure", function() {
-	expect( 5 );
-	var element = $( "#progressbar" ).progressbar();
-	ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
+	expect( 7 );
+	var element = $( "#progressbar" ).progressbar(),
+		value = element.children().eq( 0 );
+	ok( element.is( ".ui-progressbar.ui-widget.ui-widget-content.ui-corner-all" ),
+		"main element has proper classes" );
+	ok( !value.is( ".ui-progressbar-complete.ui-corner-right" ),
+		"value does not have ui-corner-right or ui-progressbar-complete" );
+	element.progressbar( "option", "value", 100 );
+	ok( value.is( ".ui-progressbar-complete.ui-corner-right.ui-corner-left.ui-widget-header" ),
+		"value has proper classes" );
+
 	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" ),
+	ok( element.children().eq( 0 ).is( ".ui-progressbar-value" ),
 		"child is .ui-progressbar-value" );
 	equal( element.children().children().length, 0, "no overlay div" );
 });
 
 test( "markup structure - indeterminate", function() {
-	expect( 5 );
+	expect( 4 );
 	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" );
+	ok( element.is( ".ui-progressbar.ui-progressbar-indeterminate" ),
+		"main element has proper classes" );
 	equal( element.children().length, 1, "main element contains one child" );
 	ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
 		"child is .ui-progressbar-value" );

ui/progressbar.js

@@ -27,6 +27,13 @@
 return $.widget( "ui.progressbar", {
 	version: "@VERSION",
 	options: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-overlay": "",
+			"ui-progressbar-indeterminate": "",
+			"ui-progressbar-complete": "ui-corner-right"
+		},
 		max: 100,
 		value: 0,
 
@@ -40,29 +47,28 @@ return $.widget( "ui.progressbar", {
 		// Constrain initial value
 		this.oldValue = this.options.value = this._constrainedValue();
 
-		this.element
-			.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
-			.attr({
+		this.element.attr({
 				// 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 class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
-			.appendTo( this.element );
-
+		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" )
 			.removeAttr( "aria-valuenow" );
 
+		this._removeClass( "ui-progressbar", "ui-widget ui-widget-content" );
+
 		this.valueDiv.remove();
 	},
 
@@ -125,15 +131,19 @@ 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[ ( ( value === this.options.max ) ? "_add" : "_remove" ) + "Class" ]
+			( this.valueDiv, "ui-progressbar-complete" );
+
+		this[ ( this.indeterminate ? "_add" : "_remove" ) + "Class" ]
+			( "ui-progressbar-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({