Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar

1 files changed, 24 insertions, 11 deletions

diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js
index 6c3d7dadd..0b1ee8aba 100644
--- a/ui/jquery.ui.progressbar.js
+++ b/ui/jquery.ui.progressbar.js
@@ -36,7 +36,7 @@ $.widget( "ui.progressbar", {
 				"aria-valuenow": this.options.value
 			});
 
-		this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
+		this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" )
 			.appendTo( this.element );
 
 		this.oldValue = this.options.value;
@@ -71,16 +71,19 @@ $.widget( "ui.progressbar", {
 			val = newValue;
 		}
 
+		this.indeterminate = val === false;
+
 		// sanitize value
 		if ( typeof val !== "number" ) {
 			val = 0;
 		}
-		return Math.min( this.options.max, Math.max( this.min, val ) );
+		return this.indeterminate ? false : Math.min( this.options.max, Math.max( this.min, val ) );
 	},
 
 	_setOptions: function( options ) {
 		var val = options.value;
 
+		// Ensure "value" option is set after other values (like max)
 		delete options.value;
 		this._super( options );
 
@@ -106,26 +109,36 @@ $.widget( "ui.progressbar", {
 	},
 
 	_percentage: function() {
-		return 100 * this.options.value / this.options.max;
+		return this.indeterminate ? 100 : 100 * this.options.value / this.options.max;
 	},
 
 	_refreshValue: function() {
-		var percentage = this._percentage();
+		var value = this.options.value,
+			percentage = this._percentage(),
+			overlay = this.valueDiv.children().eq( 0 );
+
+		overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate );
+		this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
 
-		if ( this.oldValue !== this.options.value ) {
-			this.oldValue = this.options.value;
+		if ( this.oldValue !== value ) {
+			this.oldValue = value;
 			this._trigger( "change" );
 		}
-		if ( this.options.value === this.options.max ) {
+		if ( value === this.options.max ) {
 			this._trigger( "complete" );
 		}
 
 		this.valueDiv
-			.toggle( this.options.value > this.min )
-			.toggleClass( "ui-corner-right", this.options.value === this.options.max )
+			.toggle( this.indeterminate || value > this.min )
+			.toggleClass( "ui-corner-right", value === this.options.max )
 			.width( percentage.toFixed(0) + "%" );
-		this.element.attr( "aria-valuemax", this.options.max );
-		this.element.attr( "aria-valuenow", this.options.value );
+		if ( this.indeterminate ) {
+			this.element.removeAttr( "aria-valuemax" );
+			this.element.removeAttr( "aria-valuenow" );
+		} else {
+			this.element.attr( "aria-valuemax", this.options.max );
+			this.element.attr( "aria-valuenow", value );
+		}
 	}
 });