Skip to content

Commit d3bc471

Browse files
kborcherskborchers
committed
Progressbar: Add ability to set value: false for an indeterminate progressbar. Fixes #7624 - Progressbar: Support value: false for indeterminate progressbar
1 parent 509259a commit d3bc471

File tree

7 files changed

+95
-20
lines changed

7 files changed

+95
-20
lines changed

‎demos/progressbar/animated.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@
99
<script src="../../ui/jquery.ui.widget.js"></script>
1010
<script src="../../ui/jquery.ui.progressbar.js"></script>
1111
<link rel="stylesheet" href="../demos.css">
12-
<style>
13-
.ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
14-
</style>
1512
<script>
1613
$(function() {
1714
$( "#progressbar" ).progressbar({
1815
value: 59
19-
});
16+
}).find( ".ui-progressbar-value div" ).addClass( "ui-progressbar-overlay" );
2017
});
2118
</script>
2219
</head>
@@ -27,10 +24,10 @@
2724
<div class="demo-description">
2825
<p>
2926
This progressbar has an animated fill by setting the
30-
<code>background-image</code>
27+
<code>ui-progressbar-overlay</code> class
3128
on the
3229
<code>.ui-progressbar-value</code>
33-
element, using css.
30+
element's overlay div.
3431
</p>
3532
</div>
3633
</body>

‎demos/progressbar/indeterminate.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Progressbar - Indeterminate Value</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.8.3.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.progressbar.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "#progressbar" ).progressbar({
15+
value: false
16+
});
17+
$( "button" ).on( "click", function( event ) {
18+
var target = $( event.target ),
19+
pbar = $( "#progressbar" ),
20+
pbarValue = pbar.find( ".ui-progressbar-value" );
21+
22+
if ( target.is( "#numButton" ) ) {
23+
pbar.progressbar( "option", {
24+
value: Math.floor( Math.random() * 100 )
25+
});
26+
} else if ( target.is( "#colorButton" ) ) {
27+
pbarValue.css({
28+
"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
29+
});
30+
} else if ( target.is( "#falseButton" ) ) {
31+
pbar.progressbar( "option", "value", false );
32+
}
33+
});
34+
});
35+
</script>
36+
<style>
37+
#progressbar .ui-progressbar-value {
38+
background-color: #CCCCCC;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
44+
<div id="progressbar"></div>
45+
<button id="numButton">Random Value - Determinate</button>
46+
<button id="falseButton">Indeterminate</button>
47+
<button id="colorButton">Random Color</button>
48+
49+
<div class="demo-description">
50+
<p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p>
51+
</div>
52+
</body>
53+
</html>

‎demos/progressbar/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<li><a href="default.html">Default functionality</a></li>
1111
<li><a href="animated.html">Animated</a></li>
1212
<li><a href="resize.html">Resizable progressbar</a></li>
13+
<li><a href="indeterminate.html">Indeterminate</a></li>
1314
</ul>
1415

1516
</body>

‎tests/unit/progressbar/progressbar_events.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ test( "change", function() {
2323
});
2424

2525
test( "complete", function() {
26-
expect( 3 );
26+
expect( 4 );
2727
var value,
2828
changes = 0,
2929
element = $( "#progressbar" ).progressbar({
@@ -32,12 +32,14 @@ test( "complete", function() {
3232
deepEqual( element.progressbar( "value" ), value, "change at " + value );
3333
},
3434
complete: function() {
35-
equal( changes, 2, "complete triggered after change" );
35+
equal( changes, 3, "complete triggered after change and not on indeterminate" );
3636
}
3737
});
3838

3939
value = 5;
4040
element.progressbar( "value", value );
41+
value = false;
42+
element.progressbar( "value", value );
4143
value = 100;
4244
element.progressbar( "value", value );
4345
});

‎themes/base/images/animated-overlay.gif‎

1.7 KB
Loading

‎themes/base/jquery.ui.progressbar.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,20 @@
99
* http://docs.jquery.com/UI/Progressbar#theming
1010
*/
1111
.ui-progressbar {
12-
height:2em;
12+
height: 2em;
1313
text-align: left;
1414
overflow: hidden;
1515
}
1616
.ui-progressbar .ui-progressbar-value {
1717
margin: -1px;
18+
height:100%;
19+
}
20+
.ui-progressbar .ui-progressbar-value .ui-progressbar-overlay {
21+
background: url("images/animated-overlay.gif");
1822
height: 100%;
23+
filter: alpha(opacity=25);
24+
opacity: 0.25;
25+
}
26+
.ui-progressbar .ui-progressbar-indeterminate {
27+
background-image: none;
1928
}

‎ui/jquery.ui.progressbar.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ $.widget( "ui.progressbar", {
3636
"aria-valuenow": this.options.value
3737
});
3838

39-
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
39+
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" )
4040
.appendTo( this.element );
4141

4242
this.oldValue = this.options.value;
@@ -71,16 +71,19 @@ $.widget( "ui.progressbar", {
7171
val = newValue;
7272
}
7373

74+
this.indeterminate = val === false;
75+
7476
// sanitize value
7577
if ( typeof val !== "number" ) {
7678
val = 0;
7779
}
78-
return Math.min( this.options.max, Math.max( this.min, val ) );
80+
return this.indeterminate ? false : Math.min( this.options.max, Math.max( this.min, val ) );
7981
},
8082

8183
_setOptions: function( options ) {
8284
var val = options.value;
8385

86+
// Ensure "value" option is set after other values (like max)
8487
delete options.value;
8588
this._super( options );
8689

@@ -106,26 +109,36 @@ $.widget( "ui.progressbar", {
106109
},
107110

108111
_percentage: function() {
109-
return 100 * this.options.value / this.options.max;
112+
return this.indeterminate ? 100 : 100 * this.options.value / this.options.max;
110113
},
111114

112115
_refreshValue: function() {
113-
var percentage = this._percentage();
116+
var value = this.options.value,
117+
percentage = this._percentage(),
118+
overlay = this.valueDiv.children().eq( 0 );
119+
120+
overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate );
121+
this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
114122

115-
if ( this.oldValue !== this.options.value ) {
116-
this.oldValue = this.options.value;
123+
if ( this.oldValue !== value ) {
124+
this.oldValue = value;
117125
this._trigger( "change" );
118126
}
119-
if ( this.options.value === this.options.max ) {
127+
if ( value === this.options.max ) {
120128
this._trigger( "complete" );
121129
}
122130

123131
this.valueDiv
124-
.toggle( this.options.value > this.min )
125-
.toggleClass( "ui-corner-right", this.options.value === this.options.max )
132+
.toggle( this.indeterminate || value > this.min )
133+
.toggleClass( "ui-corner-right", value === this.options.max )
126134
.width( percentage.toFixed(0) + "%" );
127-
this.element.attr( "aria-valuemax", this.options.max );
128-
this.element.attr( "aria-valuenow", this.options.value );
135+
if ( this.indeterminate ) {
136+
this.element.removeAttr( "aria-valuemax" );
137+
this.element.removeAttr( "aria-valuenow" );
138+
} else {
139+
this.element.attr( "aria-valuemax", this.options.max );
140+
this.element.attr( "aria-valuenow", value );
141+
}
129142
}
130143
});
131144

0 commit comments

Comments
 (0)