77 lines
No EOL
2.5 KiB
JavaScript
77 lines
No EOL
2.5 KiB
JavaScript
'use strict';
|
|
|
|
Ox.load('UI', {debug: true}, function() {
|
|
var cancelled = false,
|
|
paused = false,
|
|
width = 384,
|
|
$progressbar = Ox.Progressbar({
|
|
showCancelButton: true,
|
|
showPauseButton: true,
|
|
showPercent: true,
|
|
showRestartButton: true,
|
|
showTime: true,
|
|
width: width
|
|
})
|
|
.css({margin: '16px'})
|
|
.appendTo(Ox.UI.$body)
|
|
.bindEvent({
|
|
cancel: function() {
|
|
cancelled = true;
|
|
setPercent();
|
|
},
|
|
complete: function() {
|
|
clearInterval(interval);
|
|
},
|
|
pause: function() {
|
|
paused = true;
|
|
setPercent();
|
|
},
|
|
restart: function() {
|
|
cancelled = false;
|
|
paused = false;
|
|
progress = 0;
|
|
},
|
|
resume: function() {
|
|
paused = false;
|
|
}
|
|
}),
|
|
$status = Ox.Label({
|
|
width: width
|
|
})
|
|
.css({marginLeft: '16px'})
|
|
.appendTo(Ox.UI.$body),
|
|
$percent = $('<div>')
|
|
.css({float: 'left', width: '64px', fontWeight: 'bold'})
|
|
.appendTo($status),
|
|
$remaining = $('<div>')
|
|
.css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
|
|
.appendTo($status),
|
|
progress = 0,
|
|
i = 0,
|
|
interval = setInterval(function() {
|
|
if (!cancelled && !paused) {
|
|
if (Math.random() < 0.25) {
|
|
progress += 0.01;
|
|
$progressbar.options({progress: progress});
|
|
}
|
|
if (i % 10 == 0 || progress >= 1) {
|
|
var status = $progressbar.status();
|
|
setPercent();
|
|
$remaining.html('Remaining: ' + (
|
|
status.remaining == 0 ? 'done'
|
|
: status.remaining == Infinity ? 'unknown'
|
|
: Ox.formatDuration(status.remaining, 'long')
|
|
));
|
|
}
|
|
if (progress >= 1) {
|
|
clearInterval(interval);
|
|
}
|
|
i++;
|
|
}
|
|
}, 25);
|
|
function setPercent() {
|
|
$percent.html(
|
|
Math.round($progressbar.options('progress') * 100) + '%'
|
|
);
|
|
}
|
|
}); |