0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update progress bar

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

2
demos/progress/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<title>OxJS Progressbar Demo</title <title>OxJS Progressbar Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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> <script type="text/javascript" src="js/progress.js"></script>
</head> </head>
<body> <body>

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

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) var that = Ox.Element({}, self)
.defaults({ .defaults({
orientation: 'horizontal', orientation: 'horizontal',
size: 'medium' // can be int size: 'medium'
}) })
.options(options || {}) .options(options || {})
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)), .addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)),
dimensions = Ox.UI.DIMENSIONS[self.options.orientation]; dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
self.options.size = Ox.isString(self.options.size) ? self.options.size = Ox.isString(self.options.size)
Ox.UI.getBarSize(self.options.size) : self.options.size; ? Ox.UI.getBarSize(self.options.size) : self.options.size;
that.css(dimensions[0], '100%') that.css(dimensions[0], '100%')
.css(dimensions[1], self.options.size + 'px'); .css(dimensions[1], self.options.size + 'px');
return that; return that;

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

@ -1,15 +1,39 @@
'use strict'; '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) { Ox.Progressbar = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
cancelled: false,
paused: false, paused: false,
progress: 0, progress: 0,
showCancelButton: false, showCancelButton: false,
showPauseButton: false, showPauseButton: false,
showPercent: false, showPercent: false,
showRestartButton: false,
showTime: false, showTime: false,
width: 256 width: 256
}) })
@ -53,8 +77,8 @@ Ox.Progressbar = function(options, self) {
style: 'symbol', style: 'symbol',
tooltip: ['Pause', 'Resume'], tooltip: ['Pause', 'Resume'],
type: 'image', type: 'image',
value: !self.options.paused ? 'pause' : 'resume', value: !self.options.paused ? 'pause' : 'redo',
values: ['pause', 'resume'] values: ['pause', 'redo']
}) })
.bindEvent({ .bindEvent({
click: togglePaused click: togglePaused
@ -62,15 +86,21 @@ Ox.Progressbar = function(options, self) {
.appendTo(that); .appendTo(that);
} }
if (self.options.showCancelButton) { if (self.options.showCancelButton) {
self.$cancelButton = Ox.Button({ self.$cancelButton = Ox.Button(Ox.extend({
style: 'symbol', style: 'symbol',
title: 'close', tooltip: self.options.showRestartButton
tooltip: 'Cancel', ? ['Cancel', 'Restart'] : 'Cancel',
type: 'image' type: 'image'
}) }, self.options.showRestartButton ? {
value: 'close',
values: ['close', 'redo']
} : {
title: 'close'
}))
.bindEvent({ .bindEvent({
click: cancel click: toggleCancelled
}) })
.appendTo(that); .appendTo(that);
} }
@ -78,18 +108,39 @@ Ox.Progressbar = function(options, self) {
!self.options.paused && resume(); !self.options.paused && resume();
function cancel() { function cancel() {
self.cancelled = true; self.options.cancelled = true;
if (self.options.paused) {
self.options.paused = false;
self.$pauseButton && self.$pauseButton.toggle();
}
stop(); stop();
that.triggerEvent('cancel'); that.triggerEvent('cancel');
} }
function complete() {
self.complete = true;
stop();
self.paused = false;
that.triggerEvent('complete');
}
function pause() { function pause() {
self.pauseTime = +new Date(); self.pauseTime = +new Date();
self.$progress.removeClass('OxAnimate'); self.$progress.removeClass('OxAnimate');
($.browser.mozilla || $.browser.opera) && clearInterval(self.interval); ($.browser.mozilla || $.browser.opera) && clearInterval(self.interval);
self.$time && self.$time self.$time && self.$time.html(
.addClass('OxSmall') self.options.cancelled ? 'Cancelled' : 'Paused'
.html(self.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() { function resume() {
@ -103,12 +154,12 @@ Ox.Progressbar = function(options, self) {
self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'}) self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
}, 1000 / 32); }, 1000 / 32);
} }
self.$time && self.$time self.$time && self.$time.html(
.removeClass('OxSmall') self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown'
.html(self.options.progress ? Ox.formatDuration(that.status().remaining) : 'unknown'); );
} }
function setProgress() { function setProgress(animate) {
self.$percent && self.$percent.html( self.$percent && self.$percent.html(
Math.floor(self.options.progress * 100) + '%' Math.floor(self.options.progress * 100) + '%'
); );
@ -117,39 +168,55 @@ Ox.Progressbar = function(options, self) {
); );
self.$progress.stop().animate({ self.$progress.stop().animate({
width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px' width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px'
}, 250, function() { }, animate ? 250 : 0, function() {
self.options.progress == 1 && stop(); self.options.progress == 1 && complete();
}); });
} }
function stop() { function stop() {
pause(); pause();
self.$time && self.$time self.$time && self.$time.html(
.addClass('OxSmall') self.options.cancelled ? 'Cancelled' : 'Complete'
.html(self.cancelled ? 'Cancelled' : 'Complete'); );
if (self.$pauseButton && (self.options.cancelled || self.complete)) {
self.$pauseButton.options({disabled: true}); self.$pauseButton.options({disabled: true});
}
if (self.$cancelButton && (self.complete || !self.options.showRestartButton)) {
self.$cancelButton.options({disabled: true}); 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'); that.triggerEvent(self.options.paused ? 'pause' : 'resume');
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'paused') { if (key == 'cancelled') {
toggleCancelled();
} if (key == 'paused') {
togglePaused(); togglePaused();
} if (key == 'progress') { } if (key == 'progress') {
self.options.progress = Ox.limit(self.options.progress, 0, 1); 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() { that.status = function() {
var elapsed = +new Date() - self.startTime, var elapsed = +new Date() - self.startTime,
remaining = elapsed / self.options.progress * (1 - self.options.progress); 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)) { if (Ox.isArray(options.tooltip)) {
self.options.tooltip = options.tooltip; self.options.tooltip = options.tooltip;
//Ox.print('TOOLTIP', self.options.tooltip);
that.$tooltip.options({ that.$tooltip.options({
title: self.options.tooltip[self.value] title: self.options.tooltip[self.value]
}); });
@ -127,6 +126,7 @@ Ox.Button = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'disabled') { if (key == 'disabled') {
that.attr({disabled: value}).toggleClass('OxDisabled'); that.attr({disabled: value}).toggleClass('OxDisabled');
value && that.$tooltip && that.$tooltip.hide();
} else if (key == 'tooltip') { } else if (key == 'tooltip') {
that.$tooltip.options({title: value}); that.$tooltip.options({title: value});
} else if (key == 'title') { } else if (key == 'title') {
@ -145,7 +145,7 @@ Ox.Button = function(options, self) {
that.toggle = function() { that.toggle = function() {
if (self.options.values.length) { if (self.options.values.length) {
self.value = 1 - Ox.getPositionById(self.options.values, self.options.value); 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.title = self.options.values[self.value].title;
self.options.value = self.options.values[self.value].id; self.options.value = self.options.values[self.value].id;
setTitle(); setTitle();
@ -158,6 +158,7 @@ Ox.Button = function(options, self) {
self.options.value = !self.options.value; self.options.value = !self.options.value;
} }
self.options.selectable && that.toggleClass('OxSelected'); self.options.selectable && that.toggleClass('OxSelected');
return that;
} }
return that; return that;

33
source/Ox.UI/themes/classic/css/classic.css
View file

@ -48,11 +48,6 @@ Bars
} }
.OxThemeClassic .OxProgressbar .OxProgress { .OxThemeClassic .OxProgressbar .OxProgress {
border-color: rgb(176, 176, 176); 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: background-image:
-moz-repeating-linear-gradient( -moz-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -45deg, transparent 0, transparent 25%,
@ -78,7 +73,33 @@ Bars
), ),
-webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); -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 .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;
} }
.OxThemeClassic .OxResizebar > .OxLine { .OxThemeClassic .OxResizebar > .OxLine {

43
source/Ox.UI/themes/modern/css/modern.css
View file

@ -47,37 +47,58 @@ Bars
} }
.OxThemeModern .OxProgressbar .OxProgress { .OxThemeModern .OxProgressbar .OxProgress {
border-color: rgb(48, 48, 48); 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: background-image:
-moz-repeating-linear-gradient( -moz-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -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%, 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)); -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
background-image: background-image:
-o-repeating-linear-gradient( -o-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -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%, 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)); -o-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
background-image: background-image:
-webkit-repeating-linear-gradient( -webkit-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -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%, 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)); -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
background-size: 32px 32px, 16px 16px; 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 { .OxThemeModern .OxResizebar > .OxLine {
background-color: rgb(48, 48, 48); background-color: rgb(48, 48, 48);

4
source/Ox/js/Core.js
View file

@ -133,7 +133,9 @@ Ox.localStorage <o> localStorage wrapper
({key, val}) -> <f> localStorage object ({key, val}) -> <f> localStorage object
@*/ @*/
Ox.localStorage = function(namespace) { Ox.localStorage = function(namespace) {
window.localStorage = window.localStorage || {}; if (!window.localStorage) {
window.localStorage = {};
}
function storage(key, val) { function storage(key, val) {
var args, ret, value; var args, ret, value;
if (arguments.length == 0) { if (arguments.length == 0) {