From b4e7de0f5bfb84788421055145eff7021713e47a Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 25 Jan 2014 00:50:21 +0400 Subject: [PATCH] refactored progress bars out... Signed-off-by: Alex A. Naanou --- ui/ui.js | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++ ui/workers.js | 99 ++++++------------------------------ 2 files changed, 153 insertions(+), 83 deletions(-) diff --git a/ui/ui.js b/ui/ui.js index 442df3e5..c4b855b5 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -14,6 +14,10 @@ var STATUS_QUEUE_TIME = 200 var CONTEXT_INDICATOR_UPDATERS = [] +// this can be: +// - 'floating' +// - 'panel' +var PROGRESS_WIDGET_CONTAINER = 'floating' @@ -428,6 +432,139 @@ function showContextIndicator(cls, text){ +/********************************************************************** +* Progress bar... +*/ + +// Make or get progress bar container... +// mode can be: +// - null - default +// - 'floating' +// - 'panel' +function getProgressContainer(mode, parent){ + parent = parent == null ? $('.viewer') : parent + mode = mode == null ? PROGRESS_WIDGET_CONTAINER : mode + + if(mode == 'floating'){ + // widget container... + var container = parent.find('.progress-container') + if(container.length == 0){ + container = $('
') + .appendTo(parent) + } + } else { + var container = getPanel('Progress') + if(container.length == 0){ + container = makeSubPanel('Progress') + .addClass('.progress-container') + } + + container = container.find('.content') + } + + return container +} + + +// Make or get progress bar by name... +// +function progressBar(name, container){ + container = container == null + ? getProgressContainer() + : container + + var widget = getProgressBar(name) + + // a progress bar already exists, reset it and return... + // XXX should we re-bind the event handlers here??? + if(widget.length > 0){ + return widget.trigger('progressReset') + } + + // fields we'll need to update... + var state = $('') + var bar = $('') + + // the progress bar widget... + var widget = $('
'+name+'
') + // progress state... + .append(state) + // the close button... + .append($('×') + .click(function(){ + $(this).trigger('progressClose') + })) + .append(bar) + .appendTo(container) + .on('progressUpdate', function(evt, done, total){ + done = done == null ? bar.attr('value') : done + total = total == null ? bar.attr('max') : total + bar.attr({ + value: done, + max: total + }) + state.text(' ('+done+' of '+total+')') + }) + .on('progressDone', function(evt, done){ + done = done == null ? bar.attr('value') : done + bar.attr('value', done) + state.text(' (done)') + widget.find('.close').hide() + + setTimeout(function(){ + widget.hide() + }, 1500) + }) + .on('progressReset', function(){ + widget + .css('display', '') + .find('.close') + .css('display', '') + state.text('') + bar.attr({ + value: '', + max: '', + }) + }) + + bar = $(bar[0]) + state = $(state[0]) + widget = $(widget[0]) + + return widget +} + + +function getProgressBar(name){ + return $('.progress-bar[name="'+name+'"]') +} + + +function resetProgressBar(name){ + var widget = typeof(name) == typeof('str') + ? getProgressBar(name) + : name + return widget.trigger('progressReset') +} + + +function updateProgressBar(name, done, total){ + var widget = typeof(name) == typeof('str') + ? getProgressBar(name) + : name + return widget.trigger('progressUpdate', [done, total]) +} + + +function closeProgressBar(name){ + var widget = typeof(name) == typeof('str') + ? getProgressBar(name) + : name + return widget.trigger('progressClose') +} + + + /********************************************************************** * Modal dialogs... */ diff --git a/ui/workers.js b/ui/workers.js index dc9b0836..0729110a 100755 --- a/ui/workers.js +++ b/ui/workers.js @@ -10,40 +10,10 @@ // object to register all the worker queues... var WORKERS = {} -var PROGRESS_WIDGET_CONTAINER = 'floating' - /**************************************************** Progress bar ***/ -// mode can be: -// - null - default -// - 'floating' -// - 'panel' -function getWorkerProgressFloatingContainer(mode, parent){ - parent = parent == null ? $('.viewer') : parent - mode = mode == null ? PROGRESS_WIDGET_CONTAINER : mode - - if(mode == 'floating'){ - // widget container... - var container = parent.find('.progress-container') - if(container.length == 0){ - container = $('
') - .appendTo(parent) - } - } else { - var container = getPanel('Progress') - if(container.length == 0){ - container = makeSubPanel('Progress') - .addClass('.progress-container') - } - - container = container.find('.content') - } - - return container -} - // NOTE: if the progress widget gets removed without removing the worker // this will result in dangling handlers for the previous widget... // i.e. handlers that still reverence the original widget... @@ -53,65 +23,28 @@ function getWorkerProgressFloatingContainer(mode, parent){ // XXX make this understand deferred workers... function getWorkerProgressBar(name, worker, container){ container = container == null - ? getWorkerProgressFloatingContainer() + ? getProgressContainer() : container - var widget = $('.progress-bar[name="'+name+'"]') + var widget = getProgressBar(name) - // a progress bar already exists, reset it and return... - // XXX should we re-bind the event handlers here??? - if(widget.length > 0){ - widget - .css('display', '') - .find('.close') - .css('display', '') - widget.find('progress') - .attr({ - value: '', - max: '', + if(widget.length == 0){ + widget = progressBar(name, container) + .on('progressClose', function(){ + WORKERS[name].dropQueue() }) - return worker + + worker + .progress(function(done, total){ + widget.trigger('progressUpdate', [done, total]) + }) + .depleted(function(done){ + widget.trigger('progressDone', [done]) + }) + } else { + resetProgressBar(widget) } - // fields we'll need to update... - var state = $('') - var bar = $('') - - // the progress bar widget... - var widget = $('
'+name+'
') - // progress state... - .append(state) - // the close button... - .append($('×') - .click(function(){ - $(this).hide() - WORKERS[name] - .dropQueue() - })) - .append(bar) - .appendTo(container) - - // re get the fields... - bar = $(bar[0]) - state = $(state[0]) - - worker - .progress(function(done, total){ - bar.attr({ - value: done, - max: total - }) - state.text(' ('+done+' of '+total+')') - }) - .depleted(function(done){ - bar.attr('value', done) - state.text(' (done)') - - setTimeout(function(){ - widget.hide() - }, 1500) - }) - return worker }