Skip to content
Permalink
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
kborchers committed Mar 27, 2012
1 parent 509259a commit d3bc471688047d3c2dda3335dd642b724794070b
@@ -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>
@@ -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>
@@ -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>
@@ -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 );
});
Binary file not shown.
@@ -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");

This comment has been minimized.

Copy link
@jdomnitz

jdomnitz Mar 5, 2013

Contributor

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.

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 5, 2013

Member

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

This comment has been minimized.

Copy link
@jdomnitz

jdomnitz Mar 6, 2013

Contributor

Sounds Good! As long as things are consistant.

height: 100%;
filter: alpha(opacity=25);
opacity: 0.25;
}
.ui-progressbar .ui-progressbar-indeterminate {
background-image: none;
}
@@ -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 );

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 29, 2012

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.

This comment has been minimized.

Copy link
@jzaefferer

jzaefferer Nov 29, 2012

Member

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

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 29, 2012

Member

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


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 comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 29, 2012

Member

chain, same below

This comment has been minimized.

Copy link
@jzaefferer

jzaefferer Nov 29, 2012

Member

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

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 29, 2012

Member

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

this.element.removeAttr( "aria-valuenow" );
} else {
this.element.attr( "aria-valuemax", this.options.max );

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 29, 2012

Member

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

this.element.attr( "aria-valuenow", value );
}
}
});

0 comments on commit d3bc471

Please sign in to comment.
You can’t perform that action at this time.