Browse files

Progressbar: Add ability to set value: false for an indeterminate pro…

…gressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar
  • Loading branch information...
1 parent 509259a commit d3bc471688047d3c2dda3335dd642b724794070b @kborchers kborchers committed with kborchers Mar 26, 2012
View
9 demos/progressbar/animated.html
@@ -9,14 +9,11 @@
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
- <style>
- .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
- </style>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 59
- });
+ }).find( ".ui-progressbar-value div" ).addClass( "ui-progressbar-overlay" );
});
</script>
</head>
@@ -27,10 +24,10 @@
<div class="demo-description">
<p>
This progressbar has an animated fill by setting the
-<code>background-image</code>
+<code>ui-progressbar-overlay</code> class
on the
<code>.ui-progressbar-value</code>
-element, using css.
+element's overlay div.
</p>
</div>
</body>
View
53 demos/progressbar/indeterminate.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Indeterminate Value</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#progressbar" ).progressbar({
+ value: false
+ });
+ $( "button" ).on( "click", function( event ) {
+ var target = $( event.target ),
+ pbar = $( "#progressbar" ),
+ pbarValue = pbar.find( ".ui-progressbar-value" );
+
+ if ( target.is( "#numButton" ) ) {
+ pbar.progressbar( "option", {
+ value: Math.floor( Math.random() * 100 )
+ });
+ } else if ( target.is( "#colorButton" ) ) {
+ pbarValue.css({
+ "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
+ });
+ } else if ( target.is( "#falseButton" ) ) {
+ pbar.progressbar( "option", "value", false );
+ }
+ });
+ });
+ </script>
+ <style>
+ #progressbar .ui-progressbar-value {
+ background-color: #CCCCCC;
+ }
+ </style>
+</head>
+<body>
+
+<div id="progressbar"></div>
+<button id="numButton">Random Value - Determinate</button>
+<button id="falseButton">Indeterminate</button>
+<button id="colorButton">Random Color</button>
+
+<div class="demo-description">
+<p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p>
+</div>
+</body>
+</html>
View
1 demos/progressbar/index.html
@@ -10,6 +10,7 @@
<li><a href="default.html">Default functionality</a></li>
<li><a href="animated.html">Animated</a></li>
<li><a href="resize.html">Resizable progressbar</a></li>
+ <li><a href="indeterminate.html">Indeterminate</a></li>
</ul>
</body>
View
6 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 );
});
View
BIN themes/base/images/animated-overlay.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11 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");
@jdomnitz
jdomnitz added a note Mar 5, 2013

Why are there quotes here? Every other url in jQuery UI's css is unquoted. It's probably best to be consistant and remove them.

@scottgonzalez
jQuery Foundation member

Actually, we should add quotes in the other places since it's the safer thing to do.

@jdomnitz
jdomnitz added a note Mar 6, 2013

Sounds Good! As long as things are consistant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
height: 100%;
+ filter: alpha(opacity=25);
+ opacity: 0.25;
+}
+.ui-progressbar .ui-progressbar-indeterminate {
+ background-image: none;
}
View
35 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 );
@scottgonzalez
jQuery Foundation member

We can't make assumptions like this, since users may insert additional elements for things like labels. We'll need to add a class to the div, or at least hold a reference to the div that we generated.

@jzaefferer
jQuery Foundation member

We should also add a demo with an updated label inside the progressbar.

@scottgonzalez
jQuery Foundation member

We should actually just create and destroy the overlay div as needed. There's no point in having it exist all the time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+
+ 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" );
@scottgonzalez
jQuery Foundation member

chain, same below

@jzaefferer
jQuery Foundation member

With 1.7 we could use a space-separated list...

@scottgonzalez
jQuery Foundation member

Maybe in UI 1.11... core 1.9 should be out by then, and 1.6 has a few annoying issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ this.element.removeAttr( "aria-valuenow" );
+ } else {
+ this.element.attr( "aria-valuemax", this.options.max );
@scottgonzalez
jQuery Foundation member

Actually, don't chain here, use an object.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ this.element.attr( "aria-valuenow", value );
+ }
}
});

0 comments on commit d3bc471

Please sign in to comment.