From 23b583098ecb3cf02ece6bb567dd175838874276 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 14 Apr 2012 13:49:58 +0200 Subject: [PATCH] add progress bar example --- demos/progress/index.html | 11 -- demos/progress/js/progress.js | 77 ------------- examples/mouse_events/js/example.js | 2 +- examples/progress/css/example.css | 37 ++++++ examples/progress/index.html | 13 +++ examples/progress/js/example.js | 167 ++++++++++++++++++++++++++++ 6 files changed, 218 insertions(+), 89 deletions(-) delete mode 100644 demos/progress/index.html delete mode 100644 demos/progress/js/progress.js create mode 100644 examples/progress/css/example.css create mode 100644 examples/progress/index.html create mode 100644 examples/progress/js/example.js diff --git a/demos/progress/index.html b/demos/progress/index.html deleted file mode 100644 index dc54d7d7..00000000 --- a/demos/progress/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - OxJS Progressbar Demo - - - - - - \ No newline at end of file diff --git a/demos/progress/js/progress.js b/demos/progress/js/progress.js deleted file mode 100644 index cf93fe95..00000000 --- a/demos/progress/js/progress.js +++ /dev/null @@ -1,77 +0,0 @@ -'use strict'; - -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; - } - }), - $status = Ox.Label({ - width: width - }) - .css({marginLeft: '16px'}) - .appendTo(Ox.UI.$body), - $percent = $('
') - .css({float: 'left', width: '64px', fontWeight: 'bold'}) - .appendTo($status), - $remaining = $('
') - .css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'}) - .appendTo($status), - progress = 0, - i = 0, - interval = setInterval(function() { - 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(); - setPercent(); - $remaining.html('Remaining: ' + ( - status.remaining == 0 ? 'done' - : status.remaining == Infinity ? 'unknown' - : Ox.formatDuration(status.remaining, 'long') - )); - } - if (progress >= 1) { - clearInterval(interval); - } - i++; - } - }, 25); - function setPercent() { - $percent.html( - Math.round($progressbar.options('progress') * 100) + '%' - ); - } -}); \ No newline at end of file diff --git a/examples/mouse_events/js/example.js b/examples/mouse_events/js/example.js index 23eb2d91..1e43eca3 100644 --- a/examples/mouse_events/js/example.js +++ b/examples/mouse_events/js/example.js @@ -6,7 +6,7 @@ Ox.load({UI: {theme: 'classic'}}, function() { var $target = Ox.Element() .attr({id: 'target'}) - .html('click/hold/drag here') + .html('click/hold/drag') .appendTo(Ox.$body), $log = Ox.Element() .attr({id: 'log'}) diff --git a/examples/progress/css/example.css b/examples/progress/css/example.css new file mode 100644 index 00000000..ce679eeb --- /dev/null +++ b/examples/progress/css/example.css @@ -0,0 +1,37 @@ +.OxLabel { + position: absolute; + left: 16px; +} +.OxProgressbar, #status { + position: absolute; + left: 224px; +} +#switch { + position: absolute; + left: 16px; + top: 144px; +} + +#label0, #progress0 { + top: 16px; +} +#label1, #progress1 { + top: 48px; +} +#label2, #status { + top: 80px; +} +#label3, #progress2 { + top: 112px; +} + +#status > div:first-child { + float: left; + width: 64px; + font-weight: bold; +} +#status > div:last-child { + float: right; + width: 256px; + text-align: right; +} \ No newline at end of file diff --git a/examples/progress/index.html b/examples/progress/index.html new file mode 100644 index 00000000..dba8cc45 --- /dev/null +++ b/examples/progress/index.html @@ -0,0 +1,13 @@ + + + + Progress + + + + + + + + + \ No newline at end of file diff --git a/examples/progress/js/example.js b/examples/progress/js/example.js new file mode 100644 index 00000000..dd33c299 --- /dev/null +++ b/examples/progress/js/example.js @@ -0,0 +1,167 @@ +/* +This example demonstrates the mouse events that any Ox.Element fires. +*/ + +Ox.load('UI', function() { + + var labelWidth = 192, + progressWidth = 384, + $labels = [ + Ox.Label({ + title: 'Indeterminate progress bar', + width: labelWidth + }) + .attr({id: 'label0'}) + .appendTo(Ox.$body), + Ox.Label({ + title: 'Progress bar with pause button', + width: labelWidth + }) + .attr({id: 'label1'}) + .appendTo(Ox.$body), + Ox.Label({ + title: 'The status of the bar above', + width: labelWidth + }) + .attr({id: 'label2'}) + .appendTo(Ox.$body), + Ox.Label({ + title: 'Progress bar with complete UI', + width: labelWidth + }) + .attr({id: 'label3'}) + .appendTo(Ox.$body), + + ], + $progress = [ + Ox.Progressbar({ + progress: -1, + width: progressWidth + }) + .attr({id: 'progress0'}) + .appendTo(Ox.$body), + Ox.Progressbar({ + showPauseButton: true, + width: progressWidth + }) + .attr({id: 'progress1'}) + .bindEvent({ + pause: function() { + paused = true; + $progress[0].options({paused: true}); + $progress[2].options({paused: true}); + setStatus(); + }, + resume: function() { + paused = false; + $progress[0].options({paused: false}); + $progress[2].options({paused: false}); + } + }) + .appendTo(Ox.$body), + Ox.Progressbar({ + showCancelButton: true, + showPauseButton: true, + showPercent: true, + showRestartButton: true, + showTime: true, + width: progressWidth + }) + .attr({id: 'progress2'}) + .bindEvent({ + cancel: function() { + cancelled = true; + $progress[0].options({cancelled: true}); + $progress[1].options({cancelled: true}); + setStatus(); + }, + complete: function() { + $progress[0].options({progress: 1}); + setStatus(); + }, + pause: function() { + paused = true; + $progress[0].options({paused: true}); + $progress[1].options({paused: true}); + setStatus(); + }, + restart: function() { + cancelled = false; + paused = false; + progress = 0; + $progress[0].options({ + cancelled: false, + paused: false + }); + $progress[1].options({ + cancelled: false, + paused: false, + progress: 0 + }); + }, + resume: function() { + paused = false; + $progress[0].options({paused: false}); + $progress[1].options({paused: false}); + } + }) + .appendTo(Ox.$body) + ], + $status = Ox.Label({ + width: progressWidth + }) + .attr({id: 'status'}) + .appendTo(Ox.$body), + $percent = Ox.$('
') + .appendTo($status), + $remaining = Ox.$('
') + .appendTo($status), + $button = Ox.Button({ + title: 'Switch Theme', + width: labelWidth + }) + .attr({id: 'switch'}) + .bindEvent({ + click: function() { + Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic'); + } + }) + .appendTo(Ox.$body); + cancelled = false, + paused = false, + progress = 0, + i = 0, + interval = setInterval(function() { + if (!cancelled && !paused) { + if (i > 20 && Math.random() < 1/3) { + progress += 0.01; + $progress[1].options({progress: progress}); + $progress[2].options({progress: progress}); + setStatus(); + } + if (progress >= 1) { + clearInterval(interval); + } + i++; + } + }, 50); + + setStatus(); + + function setStatus() { + var status = $progress[1].status(); + $percent.html( + Math.round($progress[1].options('progress') * 100) + '%' + ); + $remaining.html( + cancelled ? 'Cancelled' + : paused ? 'Paused' + : status.remaining == 0 ? 'Complete' + : 'Remaining: ' + ( + status.remaining == Infinity ? 'unknown' + : Ox.formatDuration(status.remaining, 'long') + ) + ); + } + +});