oxjs/source/Ox.UI/js/Bar/Progressbar.js

241 lines
7.4 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-01-02 08:25:34 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.Progressbar <f> Progress Bar
([options[, self]]) -> <o:Ox.Element> Progress Bar
2012-06-17 22:38:26 +00:00
cancel <!> cancelled
complete <!> completed
pause <!> paused
restart <!> restart
resume <!> resumed
2012-01-02 08:25:34 +00:00
options <o|{}> Options object
cancelled <b|false> If true, progress bar is cancelled
paused <b|false> If true, progress bar is paused
2012-04-14 11:49:22 +00:00
progress <n|0> Progress, float between 0 and 1, or -1 for indeterminate
2012-01-02 08:25:34 +00:00
showCancelButton <b|false> If true, show cancel button
showPauseButton <b|false> If true, show pause button
showPercent <b|false> If true, show progress in percent
showRestartButton <b|false> If true, show restart button
showTime <b|false> If true, show remaining time
2012-04-14 11:54:45 +00:00
showTooltips <b|false> If true, buttons have tooltips
2012-01-02 08:25:34 +00:00
width <n|256> Width in px
self <o|{}> Shared private variable
@*/
2011-09-01 09:35:45 +00:00
Ox.Progressbar = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2012-01-02 08:25:34 +00:00
cancelled: false,
2011-09-01 13:13:47 +00:00
paused: false,
2011-09-01 09:35:45 +00:00
progress: 0,
2011-09-01 13:13:47 +00:00
showCancelButton: false,
showPauseButton: false,
showPercent: false,
2012-01-02 08:25:34 +00:00
showRestartButton: false,
2011-09-01 13:13:47 +00:00
showTime: false,
2012-04-14 11:54:45 +00:00
showTooltips: false,
2011-09-01 09:35:45 +00:00
width: 256
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
cancelled: toggleCancelled,
paused: togglePaused,
progress: function() {
self.options.progress = Ox.limit(self.options.progress, 0, 1);
!self.options.paused && !self.options.cancelled && setProgress(true);
}
})
2011-09-01 09:35:45 +00:00
.addClass('OxProgressbar')
2011-09-01 21:38:57 +00:00
.css({width: self.options.width - 2 + 'px'});
2011-09-01 09:35:45 +00:00
2012-04-14 11:49:22 +00:00
self.indeterminate = self.options.progress == -1;
2011-09-01 13:13:47 +00:00
self.trackWidth = self.options.width
- self.options.showPercent * 36
- self.options.showTime * 60
- self.options.showPauseButton * 16
- self.options.showCancelButton * 16;
2011-09-01 09:35:45 +00:00
2011-09-01 13:13:47 +00:00
self.$track = $('<div>')
.addClass('OxTrack')
.css({
width: self.trackWidth - 2 + 'px'
})
.appendTo(that);
2011-09-01 09:35:45 +00:00
2011-09-01 13:13:47 +00:00
self.$progress = $('<div>')
.addClass('OxProgress')
.appendTo(self.$track);
if (self.options.showPercent) {
self.$percent = $('<div>')
.addClass('OxText')
.css({width: '36px'})
.appendTo(that);
2011-09-01 09:35:45 +00:00
}
2011-09-01 13:13:47 +00:00
if (self.options.showTime) {
self.$time = $('<div>')
.addClass('OxText')
.css({width: '60px'})
.appendTo(that);
}
if (self.options.showPauseButton) {
self.$pauseButton = Ox.Button({
style: 'symbol',
2012-04-14 11:54:45 +00:00
tooltip: self.options.showTooltips ? ['Pause', 'Resume'] : '',
2011-12-22 07:24:20 +00:00
type: 'image',
2012-01-02 08:25:34 +00:00
value: !self.options.paused ? 'pause' : 'redo',
values: ['pause', 'redo']
2011-09-01 13:13:47 +00:00
})
.bindEvent({
click: togglePaused
})
.appendTo(that);
}
2011-09-01 21:38:57 +00:00
2011-09-01 13:13:47 +00:00
if (self.options.showCancelButton) {
2012-01-02 08:25:34 +00:00
self.$cancelButton = Ox.Button(Ox.extend({
2011-09-01 13:13:47 +00:00
style: 'symbol',
type: 'image'
2012-01-02 08:25:34 +00:00
}, self.options.showRestartButton ? {
2012-04-14 11:54:45 +00:00
tooltip: self.options.showTooltips ? ['Cancel', 'Restart'] : '',
2012-01-02 08:25:34 +00:00
value: 'close',
values: ['close', 'redo']
} : {
2012-01-02 14:05:14 +00:00
title: 'close',
2012-04-14 11:54:45 +00:00
tooltip: self.options.showTooltips ? 'Cancel' : ''
2012-01-02 08:25:34 +00:00
}))
2011-09-01 13:13:47 +00:00
.bindEvent({
2012-01-02 08:25:34 +00:00
click: toggleCancelled
2011-09-01 13:13:47 +00:00
})
.appendTo(that);
}
2012-04-14 11:49:22 +00:00
setProgress();
2011-09-01 13:13:47 +00:00
!self.options.paused && resume();
function cancel() {
2012-01-02 08:25:34 +00:00
self.options.cancelled = true;
if (self.options.paused) {
self.options.paused = false;
self.$pauseButton && self.$pauseButton.toggle();
}
2011-09-02 00:32:23 +00:00
stop();
2011-09-01 13:13:47 +00:00
that.triggerEvent('cancel');
}
2012-01-02 08:25:34 +00:00
function complete() {
self.complete = true;
stop();
self.paused = false;
that.triggerEvent('complete');
}
2011-09-01 13:13:47 +00:00
function pause() {
self.pauseTime = +new Date();
self.$progress.removeClass('OxAnimate');
2011-09-03 15:25:52 +00:00
($.browser.mozilla || $.browser.opera) && clearInterval(self.interval);
2012-01-02 08:25:34 +00:00
self.$time && self.$time.html(
self.options.cancelled ? 'Cancelled' : 'Paused'
);
}
function restart() {
self.options.cancelled = false;
2012-04-14 11:49:22 +00:00
if (!self.indeterminate) {
self.options.progress = 0;
}
2012-01-02 08:25:34 +00:00
delete self.startTime;
self.$pauseButton && self.$pauseButton.options({disabled: false});
setProgress();
resume();
that.triggerEvent('restart');
2011-09-01 13:13:47 +00:00
}
function resume() {
self.startTime = !self.startTime
? +new Date()
: self.startTime + +new Date() - self.pauseTime;
2011-09-01 21:38:57 +00:00
self.$progress.addClass('OxAnimate');
2011-09-03 15:25:52 +00:00
if ($.browser.mozilla || $.browser.opera) {
2011-09-01 21:38:57 +00:00
self.offset = 0;
self.interval = setInterval(function() {
self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
}, 1000 / 32);
}
2012-01-02 08:25:34 +00:00
self.$time && self.$time.html(
self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown'
);
2011-09-01 13:13:47 +00:00
}
2012-01-02 08:25:34 +00:00
function setProgress(animate) {
2011-09-01 13:13:47 +00:00
self.$percent && self.$percent.html(
Math.floor(self.options.progress * 100) + '%'
);
self.$time && self.$time.html(
self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown'
);
self.$progress.stop().animate({
2012-04-14 11:49:22 +00:00
width: Math.round(14 + Math.abs(self.options.progress) * (self.trackWidth - 16)) + 'px'
2012-01-02 08:25:34 +00:00
}, animate ? 250 : 0, function() {
self.options.progress == 1 && complete();
2011-09-01 13:13:47 +00:00
});
}
2011-09-02 00:32:23 +00:00
function stop() {
pause();
2012-01-02 08:25:34 +00:00
self.$time && self.$time.html(
self.options.cancelled ? 'Cancelled' : 'Complete'
);
if (self.$pauseButton && (self.options.cancelled || self.complete)) {
self.$pauseButton.options({disabled: true});
}
if (self.$cancelButton && (self.complete || !self.options.showRestartButton)) {
self.$cancelButton.options({disabled: true});
}
2011-09-02 00:32:23 +00:00
}
2012-01-02 08:25:34 +00:00
function toggleCancelled(e) {
if (e) {
self.options.cancelled = !self.options.cancelled;
2012-04-14 11:49:22 +00:00
} else if (self.$cancelButton) {
self.$cancelButton.toggle();
2012-01-02 08:25:34 +00:00
}
self.options.cancelled ? cancel() : restart();
that.triggerEvent(self.options.cancelled ? 'cancel' : 'restart');
}
function togglePaused(e) {
if (e) {
self.options.paused = !self.options.paused;
2012-04-14 11:49:22 +00:00
} else if (self.$pauseButton) {
self.$pauseButton.toggle();
2011-09-01 13:13:47 +00:00
}
2012-01-02 08:25:34 +00:00
self.options.paused ? pause() : resume();
2011-09-01 13:13:47 +00:00
that.triggerEvent(self.options.paused ? 'pause' : 'resume');
}
2012-01-02 08:25:34 +00:00
/*@
that.status <f> Returns time elapsed / remaining
() -> <o> status
@*/
2011-09-01 21:38:57 +00:00
that.status = function() {
2011-09-01 13:13:47 +00:00
var elapsed = +new Date() - self.startTime,
remaining = elapsed / self.options.progress * (1 - self.options.progress);
2011-09-01 21:38:57 +00:00
return {
2011-09-01 13:13:47 +00:00
elapsed: Math.floor(elapsed / 1000),
remaining: self.options.progress
? Math.ceil(remaining / 1000)
: Infinity
2011-09-01 21:38:57 +00:00
};
};
2011-09-01 09:35:45 +00:00
return that;
2011-11-03 15:42:41 +00:00
2012-05-22 13:14:40 +00:00
};