')
.css({float: 'left', width: '64px', fontWeight: 'bold'})
- .appendTo($status);
+ .appendTo($status),
$remaining = $('
')
.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) + '%'
+ );
+ }
});
\ No newline at end of file
diff --git a/source/Ox.UI/js/Bar/Ox.Bar.js b/source/Ox.UI/js/Bar/Ox.Bar.js
index 795770da..57d04d65 100644
--- a/source/Ox.UI/js/Bar/Ox.Bar.js
+++ b/source/Ox.UI/js/Bar/Ox.Bar.js
@@ -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;
diff --git a/source/Ox.UI/js/Bar/Ox.Progressbar.js b/source/Ox.UI/js/Bar/Ox.Progressbar.js
index 8be09755..276442cf 100644
--- a/source/Ox.UI/js/Bar/Ox.Progressbar.js
+++ b/source/Ox.UI/js/Bar/Ox.Progressbar.js
@@ -1,15 +1,39 @@
'use strict';
+/*@
+Ox.Progressbar Progress Bar
+ () -> Progress Bar
+ (options) -> Progress Bar
+ (options, self) -> Progress Bar
+ options Options object
+ cancelled If true, progress bar is cancelled
+ paused If true, progress bar is paused
+ progress Progress, float between 0 and 1
+ showCancelButton If true, show cancel button
+ showPauseButton If true, show pause button
+ showPercent If true, show progress in percent
+ showRestartButton If true, show restart button
+ showTime If true, show remaining time
+ width Width in px
+ self 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 Returns time elapsed / remaining
+ () -> status
+ @*/
that.status = function() {
var elapsed = +new Date() - self.startTime,
remaining = elapsed / self.options.progress * (1 - self.options.progress);
diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js
index 30add1fb..d9b30ec5 100644
--- a/source/Ox.UI/js/Form/Ox.Button.js
+++ b/source/Ox.UI/js/Form/Ox.Button.js
@@ -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;
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index 71d2d5b0..6ed42abd 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -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 {
diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css
index a6119700..f4f2ed1b 100644
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@@ -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);
diff --git a/source/Ox/js/Core.js b/source/Ox/js/Core.js
index a52cec5f..1ece5e38 100644
--- a/source/Ox/js/Core.js
+++ b/source/Ox/js/Core.js
@@ -133,7 +133,9 @@ Ox.localStorage localStorage wrapper
({key, val}) -> 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) {