update progress bar
This commit is contained in:
parent
2f740a972a
commit
7ca9a4a9e7
8 changed files with 202 additions and 70 deletions
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>OxJS Progressbar Demo</title
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/progress.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -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) + '%'
|
||||
);
|
||||
}
|
||||
});
|
|
@ -15,13 +15,13 @@ Ox.Bar = function(options, self) {
|
|||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
orientation: 'horizontal',
|
||||
size: 'medium' // can be int
|
||||
size: 'medium'
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)),
|
||||
dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||
self.options.size = Ox.isString(self.options.size) ?
|
||||
Ox.UI.getBarSize(self.options.size) : self.options.size;
|
||||
self.options.size = Ox.isString(self.options.size)
|
||||
? Ox.UI.getBarSize(self.options.size) : self.options.size;
|
||||
that.css(dimensions[0], '100%')
|
||||
.css(dimensions[1], self.options.size + 'px');
|
||||
return that;
|
||||
|
|
|
@ -1,15 +1,39 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.Progressbar <f> Progress Bar
|
||||
() -> <o> Progress Bar
|
||||
(options) -> <o> Progress Bar
|
||||
(options, self) -> <o> Progress Bar
|
||||
options <o|{}> Options object
|
||||
cancelled <b|false> If true, progress bar is cancelled
|
||||
paused <b|false> If true, progress bar is paused
|
||||
progress <n|0> Progress, float between 0 and 1
|
||||
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
|
||||
width <n|256> Width in px
|
||||
self <o|{}> Shared private variable
|
||||
cancel <!> cancelled
|
||||
complete <!> completed
|
||||
pause <!> paused
|
||||
resume <!> resumed
|
||||
@*/
|
||||
|
||||
Ox.Progressbar = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
cancelled: false,
|
||||
paused: false,
|
||||
progress: 0,
|
||||
showCancelButton: false,
|
||||
showPauseButton: false,
|
||||
showPercent: false,
|
||||
showRestartButton: false,
|
||||
showTime: false,
|
||||
width: 256
|
||||
})
|
||||
|
@ -53,8 +77,8 @@ Ox.Progressbar = function(options, self) {
|
|||
style: 'symbol',
|
||||
tooltip: ['Pause', 'Resume'],
|
||||
type: 'image',
|
||||
value: !self.options.paused ? 'pause' : 'resume',
|
||||
values: ['pause', 'resume']
|
||||
value: !self.options.paused ? 'pause' : 'redo',
|
||||
values: ['pause', 'redo']
|
||||
})
|
||||
.bindEvent({
|
||||
click: togglePaused
|
||||
|
@ -62,15 +86,21 @@ Ox.Progressbar = function(options, self) {
|
|||
.appendTo(that);
|
||||
}
|
||||
|
||||
|
||||
if (self.options.showCancelButton) {
|
||||
self.$cancelButton = Ox.Button({
|
||||
self.$cancelButton = Ox.Button(Ox.extend({
|
||||
style: 'symbol',
|
||||
title: 'close',
|
||||
tooltip: 'Cancel',
|
||||
tooltip: self.options.showRestartButton
|
||||
? ['Cancel', 'Restart'] : 'Cancel',
|
||||
type: 'image'
|
||||
})
|
||||
}, self.options.showRestartButton ? {
|
||||
value: 'close',
|
||||
values: ['close', 'redo']
|
||||
} : {
|
||||
title: 'close'
|
||||
}))
|
||||
.bindEvent({
|
||||
click: cancel
|
||||
click: toggleCancelled
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
@ -78,18 +108,39 @@ Ox.Progressbar = function(options, self) {
|
|||
!self.options.paused && resume();
|
||||
|
||||
function cancel() {
|
||||
self.cancelled = true;
|
||||
self.options.cancelled = true;
|
||||
if (self.options.paused) {
|
||||
self.options.paused = false;
|
||||
self.$pauseButton && self.$pauseButton.toggle();
|
||||
}
|
||||
stop();
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
|
||||
function complete() {
|
||||
self.complete = true;
|
||||
stop();
|
||||
self.paused = false;
|
||||
that.triggerEvent('complete');
|
||||
}
|
||||
|
||||
function pause() {
|
||||
self.pauseTime = +new Date();
|
||||
self.$progress.removeClass('OxAnimate');
|
||||
($.browser.mozilla || $.browser.opera) && clearInterval(self.interval);
|
||||
self.$time && self.$time
|
||||
.addClass('OxSmall')
|
||||
.html(self.cancelled ? 'Cancelled' : 'Paused');
|
||||
self.$time && self.$time.html(
|
||||
self.options.cancelled ? 'Cancelled' : 'Paused'
|
||||
);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
self.options.cancelled = false;
|
||||
self.options.progress = 0;
|
||||
delete self.startTime;
|
||||
self.$pauseButton && self.$pauseButton.options({disabled: false});
|
||||
setProgress();
|
||||
resume();
|
||||
that.triggerEvent('restart');
|
||||
}
|
||||
|
||||
function resume() {
|
||||
|
@ -103,12 +154,12 @@ Ox.Progressbar = function(options, self) {
|
|||
self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
|
||||
}, 1000 / 32);
|
||||
}
|
||||
self.$time && self.$time
|
||||
.removeClass('OxSmall')
|
||||
.html(self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown');
|
||||
self.$time && self.$time.html(
|
||||
self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown'
|
||||
);
|
||||
}
|
||||
|
||||
function setProgress() {
|
||||
function setProgress(animate) {
|
||||
self.$percent && self.$percent.html(
|
||||
Math.floor(self.options.progress * 100) + '%'
|
||||
);
|
||||
|
@ -117,39 +168,55 @@ Ox.Progressbar = function(options, self) {
|
|||
);
|
||||
self.$progress.stop().animate({
|
||||
width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px'
|
||||
}, 250, function() {
|
||||
self.options.progress == 1 && stop();
|
||||
}, animate ? 250 : 0, function() {
|
||||
self.options.progress == 1 && complete();
|
||||
});
|
||||
}
|
||||
|
||||
function stop() {
|
||||
pause();
|
||||
self.$time && self.$time
|
||||
.addClass('OxSmall')
|
||||
.html(self.cancelled ? 'Cancelled' : 'Complete');
|
||||
self.$pauseButton.options({disabled: true});
|
||||
self.$cancelButton.options({disabled: true});
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
function togglePaused() {
|
||||
self.options.paused = !self.options.paused;
|
||||
if (self.options.paused) {
|
||||
pause()
|
||||
} else {
|
||||
resume();
|
||||
function toggleCancelled(e) {
|
||||
if (e) {
|
||||
self.options.cancelled = !self.options.cancelled;
|
||||
}
|
||||
self.options.cancelled ? cancel() : restart();
|
||||
that.triggerEvent(self.options.cancelled ? 'cancel' : 'restart');
|
||||
}
|
||||
|
||||
function togglePaused(e) {
|
||||
if (e) {
|
||||
self.options.paused = !self.options.paused;
|
||||
}
|
||||
self.options.paused ? pause() : resume();
|
||||
that.triggerEvent(self.options.paused ? 'pause' : 'resume');
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'paused') {
|
||||
if (key == 'cancelled') {
|
||||
toggleCancelled();
|
||||
} if (key == 'paused') {
|
||||
togglePaused();
|
||||
} if (key == 'progress') {
|
||||
self.options.progress = Ox.limit(self.options.progress, 0, 1);
|
||||
!self.options.paused && !self.options.cancelled && setProgress();
|
||||
!self.options.paused && !self.options.cancelled && setProgress(true);
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
that.status <f> Returns time elapsed / remaining
|
||||
() -> <o> status
|
||||
@*/
|
||||
that.status = function() {
|
||||
var elapsed = +new Date() - self.startTime,
|
||||
remaining = elapsed / self.options.progress * (1 - self.options.progress);
|
||||
|
|
|
@ -88,7 +88,6 @@ Ox.Button = function(options, self) {
|
|||
|
||||
if (Ox.isArray(options.tooltip)) {
|
||||
self.options.tooltip = options.tooltip;
|
||||
//Ox.print('TOOLTIP', self.options.tooltip);
|
||||
that.$tooltip.options({
|
||||
title: self.options.tooltip[self.value]
|
||||
});
|
||||
|
@ -127,6 +126,7 @@ Ox.Button = function(options, self) {
|
|||
self.setOption = function(key, value) {
|
||||
if (key == 'disabled') {
|
||||
that.attr({disabled: value}).toggleClass('OxDisabled');
|
||||
value && that.$tooltip && that.$tooltip.hide();
|
||||
} else if (key == 'tooltip') {
|
||||
that.$tooltip.options({title: value});
|
||||
} else if (key == 'title') {
|
||||
|
@ -145,7 +145,7 @@ Ox.Button = function(options, self) {
|
|||
that.toggle = function() {
|
||||
if (self.options.values.length) {
|
||||
self.value = 1 - Ox.getPositionById(self.options.values, self.options.value);
|
||||
//Ox.print('S:O:', self.options, self.value)
|
||||
Ox.print('S:O:', self.options, self.value)
|
||||
self.options.title = self.options.values[self.value].title;
|
||||
self.options.value = self.options.values[self.value].id;
|
||||
setTitle();
|
||||
|
@ -158,6 +158,7 @@ Ox.Button = function(options, self) {
|
|||
self.options.value = !self.options.value;
|
||||
}
|
||||
self.options.selectable && that.toggleClass('OxSelected');
|
||||
return that;
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
@ -48,18 +48,13 @@ Bars
|
|||
}
|
||||
.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: -o-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%,
|
||||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 100%
|
||||
),
|
||||
),
|
||||
-moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image:
|
||||
-o-repeating-linear-gradient(
|
||||
|
@ -67,7 +62,7 @@ Bars
|
|||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 100%
|
||||
),
|
||||
),
|
||||
-o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image:
|
||||
-webkit-repeating-linear-gradient(
|
||||
|
@ -75,10 +70,36 @@ Bars
|
|||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 100%
|
||||
),
|
||||
-webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-size: 32px 32px, 16px 16px;
|
||||
}
|
||||
.OxThemeClassic .OxProgressbar .OxProgress.OxAnimate {
|
||||
background-image:
|
||||
-moz-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
),
|
||||
-moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image:
|
||||
-o-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
),
|
||||
-o-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-image:
|
||||
-webkit-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
),
|
||||
-webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
|
||||
background-size: 32px 32px, 16px 16px;
|
||||
|
||||
background-size: 32px 32px, 16px 16px;
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxResizebar > .OxLine {
|
||||
|
|
|
@ -47,37 +47,58 @@ Bars
|
|||
}
|
||||
.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: -o-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%,
|
||||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 100%
|
||||
),
|
||||
-moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image:
|
||||
-o-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 100%
|
||||
),
|
||||
-o-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image:
|
||||
-webkit-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100%
|
||||
rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 100%
|
||||
),
|
||||
-webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-size: 32px 32px, 16px 16px;
|
||||
}
|
||||
.OxThemeModern .OxProgressbar .OxProgress.OxAnimate {
|
||||
background-image:
|
||||
-moz-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%
|
||||
),
|
||||
-moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image:
|
||||
-o-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%
|
||||
),
|
||||
-o-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
background-image:
|
||||
-webkit-repeating-linear-gradient(
|
||||
-45deg, transparent 0, transparent 25%,
|
||||
rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 50%, transparent 75%,
|
||||
rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%
|
||||
),
|
||||
-webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
|
||||
}
|
||||
|
||||
.OxThemeModern .OxResizebar > .OxLine {
|
||||
background-color: rgb(48, 48, 48);
|
||||
|
|
|
@ -133,7 +133,9 @@ Ox.localStorage <o> localStorage wrapper
|
|||
({key, val}) -> <f> localStorage object
|
||||
@*/
|
||||
Ox.localStorage = function(namespace) {
|
||||
window.localStorage = window.localStorage || {};
|
||||
if (!window.localStorage) {
|
||||
window.localStorage = {};
|
||||
}
|
||||
function storage(key, val) {
|
||||
var args, ret, value;
|
||||
if (arguments.length == 0) {
|
||||
|
|
Loading…
Reference in a new issue