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

more progress on progress bar

Browse source
This commit is contained in:
rlx 2011-09-01 13:13:47 +00:00
commit 12423e7b03
5 changed files with 220 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

57
demos/progress/js/progress.js
View file

@ -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'}) .css({margin: '16px'})
.appendTo(Ox.UI.$body) .appendTo(Ox.UI.$body)
.start(), .bindEvent({
pause: function() {
paused = true;
},
resume: function() {
paused = false;
},
cancel: function() {
clearInterval(interval);
}
}),
$status = Ox.Label({ $status = Ox.Label({
width: 256 width: width
}) })
.css({marginLeft: '16px'}) .css({marginLeft: '16px'})
.appendTo(Ox.UI.$body); .appendTo(Ox.UI.$body);
$percent = $('<div>') $percent = $('<div>')
.css({float: 'left', width: '60px', fontWeight: 'bold'}) .css({float: 'left', width: '64px', fontWeight: 'bold'})
.appendTo($status); .appendTo($status);
$remaining = $('<div>') $remaining = $('<div>')
.css({float: 'left', width: '180px', 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 (Math.random() < 0.25) { if (!paused) {
progress += 0.01; if (Math.random() < 0.25) {
$progressbar.options({progress: progress}); 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); }, 25);
}); });

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

@ -75,7 +75,8 @@ Bars
border-style: solid; border-style: solid;
border-radius: 8px; border-radius: 8px;
} }
.OxProgressbar > div { .OxProgressbar .OxTrack {
float: left;
width: 14px; width: 14px;
height: 14px; height: 14px;
border-width: 1px; border-width: 1px;
@ -83,10 +84,18 @@ Bars
border-radius: 8px; border-radius: 8px;
margin: -1px; margin: -1px;
} }
.OxProgressbar > div.OxAnimate { .OxProgressbar .OxProgress {
-webkit-animation: move 1s linear infinite; 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% { 0% {
background-position: 0 0; background-position: 0 0;
} }
@ -94,6 +103,22 @@ Bars
background-position: -32px 0; 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 { .OxResizebar {
z-index: 2; z-index: 2;

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

@ -3,36 +3,100 @@ Ox.Progressbar = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
paused: false,
progress: 0, progress: 0,
showCancelButton: false,
showPauseButton: false,
showPercent: false,
showTime: false,
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.addClass('OxProgressbar') .addClass('OxProgressbar')
.css({width: self.options.width - 2 + 'px'}); .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 = $('<div>')
self.$progress.stop().animate({ .addClass('OxProgress')
width: Math.round(14 + self.options.progress * (self.options.width - 16)) + 'px' .appendTo(self.$track);
}, 250);
if (self.options.progress == 1) { if (self.options.showPercent) {
self.$progress.removeClass('OxAnimate'); self.$percent = $('<div>')
$.browser.mozilla && clearInterval(self.interval); .addClass('OxText')
} .css({width: '36px'})
.appendTo(that);
} }
self.setOption = function(key, value) { if (self.options.showTime) {
if (key == 'progress') { self.$time = $('<div>')
self.options.progress = Ox.limit(self.options.progress, 0, 1); .addClass('OxText')
setProgress(); .css({width: '60px'})
} .appendTo(that);
}; }
that.start = function() { if (self.options.showPauseButton) {
self.startTime = +new Date(); 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'); self.$progress.addClass('OxAnimate');
if ($.browser.mozilla) { if ($.browser.mozilla) {
self.offset = 0; self.offset = 0;
@ -40,19 +104,59 @@ 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);
} }
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() { 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 { return {
elapsed: Ox.formatDuration(Math.floor( elapsed: Math.floor(elapsed / 1000),
elapsed / 1000 remaining: self.options.progress
), 'long'), ? Math.ceil(remaining / 1000)
percent: Math.round(self.options.progress * 100) + '%', : Infinity
remaining: progress ? Ox.formatDuration(Math.ceil(
elapsed / progress * (1 - progress) / 1000
), 'long') : 'unknown'
}; };
}; };

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

@ -30,12 +30,21 @@ Bars
} }
.OxThemeClassic .OxProgressbar { .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); border-color: rgb(176, 176, 176);
background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255)); 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)); 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); 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: background-image:
-moz-repeating-linear-gradient( -moz-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -45deg, transparent 0, transparent 25%,
@ -53,6 +62,7 @@ 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 .OxResizebar > .OxLine { .OxThemeClassic .OxResizebar > .OxLine {

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

@ -31,12 +31,21 @@ Bars
} }
.OxThemeModern .OxProgressbar { .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); border-color: rgb(48, 48, 48);
background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32)); 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)); 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); 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: background-image:
-moz-repeating-linear-gradient( -moz-repeating-linear-gradient(
-45deg, transparent 0, transparent 25%, -45deg, transparent 0, transparent 25%,