From 16ef28d260be208a5d7f953d6ad35249085d1146 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 1 Sep 2011 23:38:57 +0200 Subject: [PATCH] add progress bar demo --- demos/progress/index.html | 11 +++++ demos/progress/js/progress.js | 36 ++++++++++++++++ source/Ox.UI/css/Ox.UI.css | 22 ++++++++-- source/Ox.UI/js/Bar/Ox.Progressbar.js | 42 ++++++++++++++++--- source/Ox.UI/themes/classic/css/classic.css | 21 +++++++++- .../Ox.UI/themes/classic/svg/symbolDelete.svg | 6 ++- source/Ox.UI/themes/modern/css/modern.css | 21 +++++++++- .../Ox.UI/themes/modern/svg/symbolDelete.svg | 6 ++- 8 files changed, 148 insertions(+), 17 deletions(-) create mode 100644 demos/progress/index.html create mode 100644 demos/progress/js/progress.js diff --git a/demos/progress/index.html b/demos/progress/index.html new file mode 100644 index 00000000..4c50718b --- /dev/null +++ b/demos/progress/index.html @@ -0,0 +1,11 @@ + + + + OxJS Progressbar Demo + + + + + + \ No newline at end of file diff --git a/demos/progress/js/progress.js b/demos/progress/js/progress.js new file mode 100644 index 00000000..90b717d9 --- /dev/null +++ b/demos/progress/js/progress.js @@ -0,0 +1,36 @@ +Ox.load('UI', {debug: true, theme: 'modern'}, function() { + + var $progressbar = Ox.Progressbar() + .css({margin: '16px'}) + .appendTo(Ox.UI.$body) + .start(), + $status = Ox.Label({ + width: 256 + }) + .css({marginLeft: '16px'}) + .appendTo(Ox.UI.$body); + $percent = $('
') + .css({float: 'left', width: '60px', fontWeight: 'bold'}) + .appendTo($status); + $remaining = $('
') + .css({float: 'left', width: '180px', textAlign: 'right'}) + .appendTo($status); + progress = 0, + i = 0, + interval = setInterval(function() { + if (Math.random() < 0.25) { + progress += 0.01; + $progressbar.options({progress: progress}); + } + 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); + +}); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 4dc1459c..92a543a5 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -70,13 +70,29 @@ Bars } .OxProgressbar { - height: 16px; + height: 14px; + border-width: 1px; + border-style: solid; border-radius: 8px; } .OxProgressbar > div { - width: 16px; - height: 16px; + width: 14px; + height: 14px; + border-width: 1px; + border-style: solid; border-radius: 8px; + margin: -1px; +} +.OxProgressbar > div.OxAnimate { + -webkit-animation: move 1s linear infinite; +} +@-webkit-keyframes move { + 0% { + background-position: 0 0; + } + 100% { + background-position: -32px 0; + } } .OxResizebar { diff --git a/source/Ox.UI/js/Bar/Ox.Progressbar.js b/source/Ox.UI/js/Bar/Ox.Progressbar.js index 0147b46d..e16f94d4 100644 --- a/source/Ox.UI/js/Bar/Ox.Progressbar.js +++ b/source/Ox.UI/js/Bar/Ox.Progressbar.js @@ -8,23 +8,53 @@ Ox.Progressbar = function(options, self) { }) .options(options || {}) .addClass('OxProgressbar') - .css({width: self.options.width}); + .css({width: self.options.width - 2 + 'px'}); self.$progress = $('
').appendTo(that); - setProgress(); + //setProgress(); function setProgress() { - self.$progress.css({ - width: Math.round(16 + self.options.progress * (self.options.width - 16)) + 'px' - }); + self.$progress.stop().animate({ + width: Math.round(14 + self.options.progress * (self.options.width - 16)) + 'px' + }, 250); + if (self.options.progress == 1) { + self.$progress.removeClass('OxAnimate'); + $.browser.mozilla && clearInterval(self.interval); + } } self.setOption = function(key, value) { if (key == 'progress') { + self.options.progress = Ox.limit(self.options.progress, 0, 1); setProgress(); } - } + }; + + that.start = function() { + self.startTime = +new Date(); + self.$progress.addClass('OxAnimate'); + if ($.browser.mozilla) { + self.offset = 0; + self.interval = setInterval(function() { + self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'}) + }, 1000 / 32); + } + return that; + }; + + that.status = function() { + var elapsed = +new Date() - self.startTime; + return { + elapsed: Ox.formatDuration(Math.floor( + elapsed / 1000 + ), 'long'), + percent: Math.round(self.options.progress * 100) + '%', + remaining: progress ? Ox.formatDuration(Math.ceil( + elapsed / progress * (1 - progress) / 1000 + ), 'long') : 'unknown' + }; + }; return that; diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 24706031..56aab993 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -30,12 +30,29 @@ Bars } .OxThemeClassic .OxProgressbar { + border-color: rgb(176, 176, 176); 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)); } .OxThemeClassic .OxProgressbar > div { - background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); - background: -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); + border-color: rgb(176, 176, 176); + 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: + -webkit-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% + ), + -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192)); + background-size: 32px 32px, 16px 16px; } .OxThemeClassic .OxResizebar > .OxLine { diff --git a/source/Ox.UI/themes/classic/svg/symbolDelete.svg b/source/Ox.UI/themes/classic/svg/symbolDelete.svg index 13cd469c..8b92bd21 100644 --- a/source/Ox.UI/themes/classic/svg/symbolDelete.svg +++ b/source/Ox.UI/themes/classic/svg/symbolDelete.svg @@ -1,4 +1,6 @@ - - + + + + \ No newline at end of file diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 2511aad0..16508b7a 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -31,12 +31,29 @@ Bars } .OxThemeModern .OxProgressbar { + border-color: rgb(48, 48, 48); 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)); } .OxThemeModern .OxProgressbar > div { - background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64)); - background: -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64)); + border-color: rgb(48, 48, 48); + 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%, + transparent 50%, transparent 75%, + rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100% + ), + -moz-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%, + transparent 50%, transparent 75%, + rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.1) 100% + ), + -webkit-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64)); + background-size: 32px 32px, 16px 16px; } .OxThemeModern .OxResizebar > .OxLine { diff --git a/source/Ox.UI/themes/modern/svg/symbolDelete.svg b/source/Ox.UI/themes/modern/svg/symbolDelete.svg index 22c19ff4..86c6929f 100644 --- a/source/Ox.UI/themes/modern/svg/symbolDelete.svg +++ b/source/Ox.UI/themes/modern/svg/symbolDelete.svg @@ -1,4 +1,6 @@ - - + + + + \ No newline at end of file