mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
refactored progress bars out...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
67ac8968ce
commit
b4e7de0f5b
137
ui/ui.js
137
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 = $('<div class="progress-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 = $('<span class="progress-details"/>')
|
||||
var bar = $('<progress/>')
|
||||
|
||||
// the progress bar widget...
|
||||
var widget = $('<div class="progress-bar" name="'+name+'">'+name+'</div>')
|
||||
// progress state...
|
||||
.append(state)
|
||||
// the close button...
|
||||
.append($('<span class="close">×</span>')
|
||||
.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...
|
||||
*/
|
||||
|
||||
@ -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 = $('<div class="progress-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,64 +23,27 @@ 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
|
||||
}
|
||||
|
||||
// fields we'll need to update...
|
||||
var state = $('<span class="state"/>')
|
||||
var bar = $('<progress/>')
|
||||
|
||||
// the progress bar widget...
|
||||
var widget = $('<div class="progress-bar" name="'+name+'">'+name+'</div>')
|
||||
// progress state...
|
||||
.append(state)
|
||||
// the close button...
|
||||
.append($('<span class="close">×</span>')
|
||||
.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+')')
|
||||
widget.trigger('progressUpdate', [done, total])
|
||||
})
|
||||
.depleted(function(done){
|
||||
bar.attr('value', done)
|
||||
state.text(' (done)')
|
||||
|
||||
setTimeout(function(){
|
||||
widget.hide()
|
||||
}, 1500)
|
||||
widget.trigger('progressDone', [done])
|
||||
})
|
||||
} else {
|
||||
resetProgressBar(widget)
|
||||
}
|
||||
|
||||
return worker
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user