diff options
| -rw-r--r-- | tests/visual/progressbar.html | 8 | ||||
| -rw-r--r-- | ui/ui.progressbar.js | 65 |
2 files changed, 47 insertions, 26 deletions
diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html index 59ddbd403..9052855e1 100644 --- a/tests/visual/progressbar.html +++ b/tests/visual/progressbar.html @@ -114,7 +114,7 @@ body <button id="p1-destroy" onclick="$('#p1').progressbar('destroy');">destroy</button>
<button id="p1-start" onclick="$('#p1').progressbar('start');">Start</button>
<button id="p1-stop" onclick="$('#p1').progressbar('stop');">Stop</button>
-<button id="p1-pause" onclick="$('#p1').progressbar('reset');">reset</button>
+<button id="p1-stop" onclick="$('#p1').progressbar('pause');">pause</button>
<button id="p1-enable" onclick="$('#p1').progressbar('enable');">enable</button>
<button id="p1-disable" onclick="$('#p1').progressbar('disable');">disable</button>
<button id="p1-progress" onclick="$('#p1').progressbar('progress', 50);">progress to 50</button>
@@ -128,7 +128,7 @@ body <button id="p2-destroy" onclick="$('#p2').progressbar('destroy');">destroy</button>
<button id="p2-start" onclick="$('#p2').progressbar('start');">Start</button>
<button id="p2-stop" onclick="$('#p2').progressbar('stop');">Stop</button>
-<button id="p2-pause" onclick="$('#p2').progressbar('reset');">reset</button>
+<button id="p2-stop" onclick="$('#p2').progressbar('pause');">pause</button>
<button id="p2-enable" onclick="$('#p2').progressbar('enable');">enable</button>
<button id="p2-disable" onclick="$('#p2').progressbar('disable');">disable</button>
<button id="p2-progress" onclick="$('#p2').progressbar('progress', 40);">progress to 50</button>
@@ -141,7 +141,7 @@ body <button id="p3-destroy" onclick="$('#p3').progressbar('destroy');">destroy</button>
<button id="p3-start" onclick="$('#p3').progressbar('start');">Start</button>
<button id="p3-stop" onclick="$('#p3').progressbar('stop');">Stop</button>
-<button id="p3-pause" onclick="$('#p3').progressbar('reset');">reset</button>
+<button id="p3-stop" onclick="$('#p3').progressbar('pause');">pause</button>
<button id="p3-enable" onclick="$('#p3').progressbar('enable');">enable</button>
<button id="p3-disable" onclick="$('#p3').progressbar('disable');">disable</button>
<button id="p3-progress" onclick="$('#p3').progressbar('progress', $('#p3-value').val());">progress to</button>
@@ -151,7 +151,7 @@ body <button id="p2-startall" onclick="$('#p2, #p1, #p3').progressbar('start');">Start All</button>
<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('stop');">Stop All</button>
-<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('reset');">Reset All</button>
+<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('pause');">Pause All</button>
<script>
diff --git a/ui/ui.progressbar.js b/ui/ui.progressbar.js index c594ded12..9e9730948 100644 --- a/ui/ui.progressbar.js +++ b/ui/ui.progressbar.js @@ -47,6 +47,13 @@ $.widget("ui.progressbar", { .append(this.bar.append(this.textElement.addClass(options.textClass)), this.textBg)
.appendTo(this.element);
+ jQuery.easing[this.identifier] = function (x, t, b, c, d) {
+ var inc = options.increment,
+ width = options.width,
+ step = ((inc > width ? width : inc)/width),
+ state = Math.round(x/step)*step;
+ return state > 1 ? 1 : state;
+ };
},
plugins: {},
@@ -66,7 +73,7 @@ $.widget("ui.progressbar", { this.element.triggerHandler(n == "progressbar" ? n : ["progressbar", n].join(""), [e, this.ui()], this.options[n]);
},
destroy: function() {
- this.reset();
+ this.stop();
this.element
.removeClass("ui-progressbar ui-progressbar-disabled")
@@ -84,54 +91,68 @@ $.widget("ui.progressbar", { this.disabled = true;
},
start: function() {
- if (this.disabled) return;
-
var self = this, options = this.options;
- jQuery.easing[this.identifier] = function (x, t, b, c, d) {
- var inc = options.increment,
- width = options.width,
- step = ((inc > width ? width : inc)/width),
- state = Math.round(x/step)*step;
- return state > 1 ? 1 : state;
+ if (this.disabled) {
+ return;
};
+
+ self.active = true;
+
+ setTimeout(
+ function() {
+ self.active = false;
+ },
+ options.duration
+ );
+
+ this.animate();
+
+ this.propagate('start', this.ui());
+ return false;
+ },
+ animate: function() {
+ var self = this,
+ options = this.options,
+ interval = options.interval;
this.bar.animate(
{
width: options.width
},
{
- duration: options.interval,
+ duration: interval,
easing: this.identifier,
step: function(step, b) {
- var elapsedTime = ((new Date().getTime()) - b.startTime);
- options.interval = options._interval - elapsedTime;
self.progress((step/options.width)*100);
+ var elapsedTime = ((new Date().getTime()) - b.startTime);
+ options.interval = interval - elapsedTime;
},
complete: function() {
delete jQuery.easing[self.identifier];
- self.stop();
+ self.pause();
+
+ if (self.active) {
+ /*TODO*/
+ self.stop();
+ self.animate();
+ }
}
}
);
-
- this.propagate('start', this.ui());
- return false;
},
- stop: function() {
+ pause: function() {
if (this.disabled) return;
this.bar.stop();
- this.propagate('stop', this.ui());
- return false;
-
+ this.propagate('pause', this.ui());
},
- reset: function() {
+ stop: function() {
this.bar.stop();
this.bar.width(0);
this.textElement.width(0);
this.bar.addClass('ui-hidden');
this.options.interval = this.options._interval;
- return false;
+ this.propagate('stop', this.ui());
},
progress: function(percentState) {
if (this.bar.is('.ui-hidden')) {
|