more progress on progress bar
This commit is contained in:
parent
16ef28d260
commit
12423e7b03
5 changed files with 220 additions and 51 deletions
|
@ -1,36 +1,57 @@
|
|||
Ox.load('UI', {debug: true, theme: 'modern'}, function() {
|
||||
Ox.load('UI', {debug: true}, function() {
|
||||
|
||||
var $progressbar = Ox.Progressbar()
|
||||
var paused = false,
|
||||
width = 384,
|
||||
$progressbar = Ox.Progressbar({
|
||||
showCancelButton: true,
|
||||
showPauseButton: true,
|
||||
showPercent: true,
|
||||
showTime: true,
|
||||
width: width
|
||||
})
|
||||
.css({margin: '16px'})
|
||||
.appendTo(Ox.UI.$body)
|
||||
.start(),
|
||||
.bindEvent({
|
||||
pause: function() {
|
||||
paused = true;
|
||||
},
|
||||
resume: function() {
|
||||
paused = false;
|
||||
},
|
||||
cancel: function() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}),
|
||||
$status = Ox.Label({
|
||||
width: 256
|
||||
width: width
|
||||
})
|
||||
.css({marginLeft: '16px'})
|
||||
.appendTo(Ox.UI.$body);
|
||||
$percent = $('<div>')
|
||||
.css({float: 'left', width: '60px', fontWeight: 'bold'})
|
||||
.css({float: 'left', width: '64px', fontWeight: 'bold'})
|
||||
.appendTo($status);
|
||||
$remaining = $('<div>')
|
||||
.css({float: 'left', width: '180px', textAlign: 'right'})
|
||||
.css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
|
||||
.appendTo($status);
|
||||
progress = 0,
|
||||
i = 0,
|
||||
interval = setInterval(function() {
|
||||
if (Math.random() < 0.25) {
|
||||
progress += 0.01;
|
||||
$progressbar.options({progress: progress});
|
||||
if (!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'));
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (i % 10 == 0 || progress >= 1) {
|
||||
var status = $progressbar.status();
|
||||
$percent.html(status.percent);
|
||||
$remaining.html('Remaining: ' + status.remaining);
|
||||
}
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
i++;
|
||||
}, 25);
|
||||
|
||||
});
|
|
@ -75,7 +75,8 @@ Bars
|
|||
border-style: solid;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.OxProgressbar > div {
|
||||
.OxProgressbar .OxTrack {
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-width: 1px;
|
||||
|
@ -83,10 +84,18 @@ Bars
|
|||
border-radius: 8px;
|
||||
margin: -1px;
|
||||
}
|
||||
.OxProgressbar > div.OxAnimate {
|
||||
-webkit-animation: move 1s linear infinite;
|
||||
.OxProgressbar .OxProgress {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 8px;
|
||||
margin: -1px;
|
||||
}
|
||||
@-webkit-keyframes move {
|
||||
.OxProgressbar .OxProgress.OxAnimate {
|
||||
-webkit-animation: progress 1s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes progress {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
@ -94,6 +103,22 @@ Bars
|
|||
background-position: -32px 0;
|
||||
}
|
||||
}
|
||||
.OxProgressbar .OxText {
|
||||
float: left;
|
||||
height: 14px;
|
||||
//padding-top: 2px;
|
||||
//font-size: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.OxProgressbar .OxText.OxSmall {
|
||||
//padding-top: 1px;
|
||||
//font-size: 9px;
|
||||
}
|
||||
.OxProgressbar .OxButton {
|
||||
float: left;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
|
||||
.OxResizebar {
|
||||
z-index: 2;
|
||||
|
|
|
@ -3,36 +3,100 @@ Ox.Progressbar = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
paused: false,
|
||||
progress: 0,
|
||||
showCancelButton: false,
|
||||
showPauseButton: false,
|
||||
showPercent: false,
|
||||
showTime: false,
|
||||
width: 256
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxProgressbar')
|
||||
.css({width: self.options.width - 2 + 'px'});
|
||||
|
||||
self.$progress = $('<div>').appendTo(that);
|
||||
self.trackWidth = self.options.width
|
||||
- self.options.showPercent * 36
|
||||
- self.options.showTime * 60
|
||||
- self.options.showPauseButton * 16
|
||||
- self.options.showCancelButton * 16;
|
||||
|
||||
//setProgress();
|
||||
self.$track = $('<div>')
|
||||
.addClass('OxTrack')
|
||||
.css({
|
||||
width: self.trackWidth - 2 + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
function setProgress() {
|
||||
self.$progress.stop().animate({
|
||||
width: Math.round(14 + self.options.progress * (self.options.width - 16)) + 'px'
|
||||
}, 250);
|
||||
if (self.options.progress == 1) {
|
||||
self.$progress.removeClass('OxAnimate');
|
||||
$.browser.mozilla && clearInterval(self.interval);
|
||||
}
|
||||
self.$progress = $('<div>')
|
||||
.addClass('OxProgress')
|
||||
.appendTo(self.$track);
|
||||
|
||||
if (self.options.showPercent) {
|
||||
self.$percent = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({width: '36px'})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'progress') {
|
||||
self.options.progress = Ox.limit(self.options.progress, 0, 1);
|
||||
setProgress();
|
||||
}
|
||||
};
|
||||
if (self.options.showTime) {
|
||||
self.$time = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({width: '60px'})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
that.start = function() {
|
||||
self.startTime = +new Date();
|
||||
if (self.options.showPauseButton) {
|
||||
self.$pauseButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: [
|
||||
{id: 'pause', title: 'pause', selected: !self.options.paused},
|
||||
{id: 'resume', title: 'redo', selected: self.options.paused}
|
||||
],
|
||||
tooltip: ['Pause', 'Resume'],
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: togglePaused
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
if (self.options.showCancelButton) {
|
||||
self.$cancelButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'close',
|
||||
tooltip: 'Cancel',
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: cancel
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
!self.options.paused && resume();
|
||||
|
||||
function cancel() {
|
||||
self.cancelled = true;
|
||||
self.options.progress = 1;
|
||||
setProgress();
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
|
||||
function pause() {
|
||||
self.pauseTime = +new Date();
|
||||
self.$progress.removeClass('OxAnimate');
|
||||
$.browser.mozilla && clearInterval(self.interval);
|
||||
self.$time && self.$time
|
||||
.addClass('OxSmall')
|
||||
.html(self.cancelled ? 'Cancelled' : 'Paused');
|
||||
}
|
||||
|
||||
function resume() {
|
||||
self.startTime = !self.startTime
|
||||
? +new Date()
|
||||
: self.startTime + +new Date() - self.pauseTime;
|
||||
self.$progress.addClass('OxAnimate');
|
||||
if ($.browser.mozilla) {
|
||||
self.offset = 0;
|
||||
|
@ -40,19 +104,59 @@ Ox.Progressbar = function(options, self) {
|
|||
self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
|
||||
}, 1000 / 32);
|
||||
}
|
||||
return that;
|
||||
self.$time && self.$time
|
||||
.removeClass('OxSmall')
|
||||
.html(self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown');
|
||||
}
|
||||
|
||||
function setProgress() {
|
||||
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({
|
||||
width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px'
|
||||
}, 250, function() {
|
||||
if (self.options.progress == 1) {
|
||||
pause();
|
||||
self.$time && self.$time
|
||||
.addClass('OxSmall')
|
||||
.html(self.cancelled ? 'Cancelled' : 'Complete');
|
||||
self.$pauseButton.options({disabled: true});
|
||||
self.$cancelButton.options({disabled: true});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function togglePaused() {
|
||||
self.options.paused = !self.options.paused;
|
||||
if (self.options.paused) {
|
||||
pause()
|
||||
} else {
|
||||
resume();
|
||||
}
|
||||
that.triggerEvent(self.options.paused ? 'pause' : 'resume');
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'paused') {
|
||||
togglePaused();
|
||||
} if (key == 'progress') {
|
||||
self.options.progress = Ox.limit(self.options.progress, 0, 1);
|
||||
!self.options.paused && !self.options.cancelled && setProgress();
|
||||
}
|
||||
};
|
||||
|
||||
that.status = function() {
|
||||
var elapsed = +new Date() - self.startTime;
|
||||
var elapsed = +new Date() - self.startTime,
|
||||
remaining = elapsed / self.options.progress * (1 - self.options.progress);
|
||||
return {
|
||||
elapsed: Ox.formatDuration(Math.floor(
|
||||
elapsed / 1000
|
||||
), 'long'),
|
||||
percent: Math.round(self.options.progress * 100) + '%',
|
||||
remaining: progress ? Ox.formatDuration(Math.ceil(
|
||||
elapsed / progress * (1 - progress) / 1000
|
||||
), 'long') : 'unknown'
|
||||
elapsed: Math.floor(elapsed / 1000),
|
||||
remaining: self.options.progress
|
||||
? Math.ceil(remaining / 1000)
|
||||
: Infinity
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -30,12 +30,21 @@ Bars
|
|||
}
|
||||
|
||||
.OxThemeClassic .OxProgressbar {
|
||||
border-color: rgb(176, 176, 176);
|
||||
background-image: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
}
|
||||
.OxThemeClassic .OxProgressbar .OxTrack {
|
||||
border-color: rgb(176, 176, 176);
|
||||
background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255));
|
||||
background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255));
|
||||
}
|
||||
.OxThemeClassic .OxProgressbar > div {
|
||||
.OxThemeClassic .OxProgressbar .OxProgress {
|
||||
border-color: rgb(176, 176, 176);
|
||||
background-image: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
}
|
||||
.OxThemeClassic .OxProgressbar .OxProgress.OxAnimate {
|
||||
background-image:
|
||||
-moz-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
|
@ -53,6 +62,7 @@ Bars
|
|||
),
|
||||
-webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-size: 32px 32px, 16px 16px;
|
||||
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxResizebar > .OxLine {
|
||||
|
|
|
@ -31,12 +31,21 @@ Bars
|
|||
}
|
||||
|
||||
.OxThemeModern .OxProgressbar {
|
||||
border-color: rgb(48, 48, 48);
|
||||
background-image: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
}
|
||||
.OxThemeModern .OxProgressbar .OxTrack {
|
||||
border-color: rgb(48, 48, 48);
|
||||
background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
|
||||
background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
|
||||
}
|
||||
.OxThemeModern .OxProgressbar > div {
|
||||
.OxThemeModern .OxProgressbar .OxProgress {
|
||||
border-color: rgb(48, 48, 48);
|
||||
background-image: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
}
|
||||
.OxThemeModern .OxProgressbar .OxProgress.OxAnimate {
|
||||
background-image:
|
||||
-moz-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
|
|
Loading…
Reference in a new issue