From 7ca9a4a9e7bff6150437a29888b0bf5e80612c79 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 2 Jan 2012 13:55:34 +0530 Subject: [PATCH] update progress bar --- demos/progress/index.html | 2 +- demos/progress/js/progress.js | 46 +++++-- source/Ox.UI/js/Bar/Ox.Bar.js | 6 +- source/Ox.UI/js/Bar/Ox.Progressbar.js | 127 +++++++++++++++----- source/Ox.UI/js/Form/Ox.Button.js | 5 +- source/Ox.UI/themes/classic/css/classic.css | 39 ++++-- source/Ox.UI/themes/modern/css/modern.css | 43 +++++-- source/Ox/js/Core.js | 4 +- 8 files changed, 202 insertions(+), 70 deletions(-) diff --git a/demos/progress/index.html b/demos/progress/index.html index 4c50718b..dc54d7d7 100644 --- a/demos/progress/index.html +++ b/demos/progress/index.html @@ -3,7 +3,7 @@ OxJS Progressbar Demo - + diff --git a/demos/progress/js/progress.js b/demos/progress/js/progress.js index da9bfc93..cf93fe95 100644 --- a/demos/progress/js/progress.js +++ b/demos/progress/js/progress.js @@ -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 = $('
') .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) {