From d3bc471688047d3c2dda3335dd642b724794070b Mon Sep 17 00:00:00 2001 From: kborchers Date: Mon, 26 Mar 2012 21:51:16 -0500 Subject: [PATCH] Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar --- demos/progressbar/animated.html | 9 ++-- demos/progressbar/indeterminate.html | 53 +++++++++++++++++++ demos/progressbar/index.html | 1 + tests/unit/progressbar/progressbar_events.js | 6 ++- themes/base/images/animated-overlay.gif | Bin 0 -> 1738 bytes themes/base/jquery.ui.progressbar.css | 11 +++- ui/jquery.ui.progressbar.js | 35 ++++++++---- 7 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 demos/progressbar/indeterminate.html create mode 100644 themes/base/images/animated-overlay.gif 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 0000000000000000000000000000000000000000..d441f75ebfbdf26a265dfccd670120d25c0a341c GIT binary patch literal 1738 zcmZ|OX;ji_6b5ixNYt8>l?gOuO)6lU%W(mxn(`>1S(XO;u`D+P%xqBvMr|w-Vyr1s z7R|Cn0b8|Hu<=Zmv1mFqh9Fj!NuZfKB2MP$e75`XJ@>=!y!Ux9xR3x;EW!q1^V>X| znVFuRUN`NqJ2)ybXh%e__h!!pv(M|S3+?9F%(K}zyE40MGyhWF5-IDgL&=%2-9`Nk z!1@8uk4t%_{(K~>N;sK&dzJbwJ=$kYTlL=$%#0Pfh>U{%i@~wWbvYsD_K-D`&+u1( z#Ma`>%q<^UhzGvi(hyE`zCD{-=2|zL5>wnB=DE!U?(CZG%q4@lDnCq_%&3DCla#(X zmBhDD+RN$aMWWHm?ig*>1Onn6~r?Ma~N2JKAxN>H%UtRyRqS)6Um!-Tz%-r=& zQmTb^JFIe3W^-kAm`}`2P|niMh>RYyd)S^f(dbrx965?rzbhP|XeP}o&&DSZ4|oYQ z)I{f!SfycYw?3=9W;o-B%U5xs(pP267X~9-7L|4WzaYexC0GtG8wWygm63rF{llCEraxzkc=IxvFQ-y37=_;e5 zJLq^gsSO0Ayz?a>E_?{dmUc+t#qv$)XN8$<<}rQ#)lsiw+pmL&J>~+hgpo>i$m+;l zZIa_ZRIfSeT$~v5d`EBV&*k`apPgjv&B|+d`Q!nyu{L4rs%ZfoF0*Kq8I%ByOcFpL zK=>wzofZo<+0GZLCnWM3oQ^pb(gRSf02;~cEn@LJ>~XB9IkEX{$N#Z`m%>S!U{uPx zloI%bLdo$Adxlh(Uv^yX7s5G&C zLwNRG>~T?G{kzupp8EcyLGPoPf)@&9Wqfw_l&uU-6cexk%5;uQg%wb=0k_733{i#& z1a2p)gV3S2+QG1-K9tZ}E~I<(P0r2aFFY-c{o?TUOz3Xjod#TLE2A_c?*T7t z=1>~%YW450{Qqno4t`}gvLnuMrcu8+#xEBoY%2_+Mb#Z6S38+r*M4O`-+!zl(@m`D zQsi|GA2l3gEy}LFe<#Hv8?$_L#u8E|3-bP$*La*E>B{X!Sy4i6?TKam!49aXCAW4S*P_O^H4^*DpiA40o}Uqw~Eo&veh1`|8i zD2$x+>_b^bXE4N;AW=5>iYak2%!JAh0j1*k1{p#iRCjbB7!cSws~U{1IA@acLII$t z$>X#A+^s6iJ5~DFG!xa?>z{=lxtdi1rzbM-(nqAu3D8h-&64xo6|E!p?pK0xT;qoK z`6%+SpBk+~M?nO}>2mTw!A{yZ6O>Z@kwSd4;8aWU5z!P~tQl?u==^+R`{OmOS}oZh zOXQ3{6kuz?Is^n^L7;9ieB9C+8B{>t+pDrlq4xGDDn#T#3T5$l1g`FTQkU;b-981j zNm{zC`$wn7etklM#qHI4=3m5gwa6DNS{?Z!vSObi_od{4eUo=_S2BKNpkSdiqe(k9WtkeM79;2-%CFbb)aB=&H1?i1}uwFzoZQ(38Kn1zBP ORn*B%u*Wk|4g3!*Rv{Mv literal 0 HcmV?d00001 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 ); + } } }); -- 2.39.5