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

6
source/Ox.UI/js/Bar/Ox.Bar.js
View file

@ -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;

127
source/Ox.UI/js/Bar/Ox.Progressbar.js
View file

@ -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);

5
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -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;