From: kborchers Date: Tue, 27 Mar 2012 02:51:16 +0000 (-0500) Subject: Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes... X-Git-Tag: 1.10.0-beta.1~137 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d3bc471688047d3c2dda3335dd642b724794070b;p=jquery-ui.git Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar --- diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html index f03070571..5cb1872ed 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -9,14 +9,11 @@ - @@ -27,10 +24,10 @@

This progressbar has an animated fill by setting the -background-image +ui-progressbar-overlay class on the .ui-progressbar-value -element, using css. +element's overlay div.

diff --git a/demos/progressbar/indeterminate.html b/demos/progressbar/indeterminate.html new file mode 100644 index 000000000..34ce6da47 --- /dev/null +++ b/demos/progressbar/indeterminate.html @@ -0,0 +1,53 @@ + + + + + jQuery UI Progressbar - Indeterminate Value + + + + + + + + + + + +
+ + + + +
+

Indeterminate progress bar and switching between determinate and indeterminate styles.

+
+ + diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index 5080520c2..df3483816 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -10,6 +10,7 @@
  • Default functionality
  • Animated
  • Resizable progressbar
    • +
  • Indeterminate
    • diff --git a/tests/unit/progressbar/progressbar_events.js b/tests/unit/progressbar/progressbar_events.js index bb0d3ca5c..fe05182a1 100644 --- a/tests/unit/progressbar/progressbar_events.js +++ b/tests/unit/progressbar/progressbar_events.js @@ -23,7 +23,7 @@ test( "change", function() { }); test( "complete", function() { - expect( 3 ); + expect( 4 ); var value, changes = 0, element = $( "#progressbar" ).progressbar({ @@ -32,12 +32,14 @@ test( "complete", function() { deepEqual( element.progressbar( "value" ), value, "change at " + value ); }, complete: function() { - equal( changes, 2, "complete triggered after change" ); + equal( changes, 3, "complete triggered after change and not on indeterminate" ); } }); value = 5; element.progressbar( "value", value ); + value = false; + element.progressbar( "value", value ); value = 100; element.progressbar( "value", value ); }); diff --git a/themes/base/images/animated-overlay.gif b/themes/base/images/animated-overlay.gif new file mode 100644 index 000000000..d441f75eb Binary files /dev/null and b/themes/base/images/animated-overlay.gif differ diff --git a/themes/base/jquery.ui.progressbar.css b/themes/base/jquery.ui.progressbar.css index f042a120f..5aba50cdf 100644 --- a/themes/base/jquery.ui.progressbar.css +++ b/themes/base/jquery.ui.progressbar.css @@ -9,11 +9,20 @@ * http://docs.jquery.com/UI/Progressbar#theming */ .ui-progressbar { - height:2em; + height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; + height:100%; +} +.ui-progressbar .ui-progressbar-value .ui-progressbar-overlay { + background: url("images/animated-overlay.gif"); height: 100%; + filter: alpha(opacity=25); + opacity: 0.25; +} +.ui-progressbar .ui-progressbar-indeterminate { + background-image: none; } 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 = $( "
    " ) + this.valueDiv = $( "
    " ) .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 ); + } } });