sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

update progress bar

Browse source
This commit is contained in:
rolux 2012-01-02 13:55:34 +05:30
commit 7ca9a4a9e7
8 changed files with 202 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

46
demos/progress/js/progress.js
View file

@ -1,51 +1,67 @@
Ox.load('UI', {debug: true}, function() {
'use strict';
var paused = false,
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;
},
cancel: function() {
clearInterval(interval);
}
}),
$status = Ox.Label({
width: width
})
.css({marginLeft: '16px'})
.appendTo(Ox.UI.$body);
.appendTo(Ox.UI.$body),
$percent = $('<div>')
.css({float: 'left', width: '64px', fontWeight: 'bold'})
.appendTo($status);
.appendTo($status),
$remaining = $('<div>')
.css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
.appendTo($status);
.appendTo($status),
progress = 0,
i = 0,
interval = setInterval(function() {
if (!paused) {
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();
$percent.html(Math.round(progress * 100) + '%');
$remaining.html('Remaining: ' + status.remaining == Infinity
? 'unknown' : Ox.formatDuration(status.remaining, 'long'));
setPercent();
$remaining.html('Remaining: ' + (
status.remaining == 0 ? 'done'
: status.remaining == Infinity ? 'unknown'
: Ox.formatDuration(status.remaining, 'long')
));
}
if (progress >= 1) {
clearInterval(interval);
@ -53,5 +69,9 @@ Ox.load('UI', {debug: true}, function() {
i++;
}
}, 25);
function setPercent() {
$percent.html(
Math.round($progressbar.options('progress') * 100) + '%'
);
}
});