diff --git a/ui/keybindings.js b/ui/keybindings.js index 9c1d26d2..50d997f7 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -69,6 +69,23 @@ var KEYBOARD_CONFIG = { } }, + // dialogs... + // + '.viewer.overlay .overlay-block.dialog': { + title: 'Dialog', + + Enter: doc('Accept dialog', + function(){ + getOverlay($('.viewer')).trigger('accept') + }), + Esc: doc('Close dialog', + function(){ + hideOverlay($('.viewer')) + return false + }), + }, + + // help mode... // diff --git a/ui/modes.js b/ui/modes.js index adcd4767..0c886b1d 100755 --- a/ui/modes.js +++ b/ui/modes.js @@ -39,7 +39,7 @@ function makeDrawerToggler(contentRenderer, root){ // prepare and cleanup... $(element_class).remove() - $(root).addClass('overlay') + showInOverlay($(root)) // build the help... var doc = contentRenderer() @@ -83,7 +83,7 @@ function makeDrawerToggler(contentRenderer, root){ // things to cleanup... var _cleanup = function(){ $(element_class).remove() - $(root).removeClass('overlay') + hideOverlay($(root)) // XXX depends on body... body.click() win.off('scroll', scroll_handler) @@ -179,50 +179,43 @@ var toggleSlideShowMode = createCSSClassToggler( if(action == 'on'){ updateStatus('Slideshow...').show() - // XXX is this the correct way to go??? - $('.viewer').addClass('overlay') - // interval from user... - // XXX make this a real UI... - var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000) + //var interval = prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000) + prompt('Slideshow interval (sec):', SLIDESHOW_INTERVAL/1000) + .done(function(interval){ + interval = parseFloat(interval) - // user cancelled... - if(interval == null){ - showStatus('Slideshow: cencelled...') - toggleSlideShowMode('off') + SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000 - // XXX is this the correct way to go??? - $('.viewer').removeClass('overlay') + showStatus('Slideshow: starting', SLIDESHOW_LOOP ? 'looped...' : 'unlooped...') + + // XXX is this the correct way to go??? + hideOverlay($('.viewer')) - return - } + toggleSingleImageMode('on') + _slideshow_timer = setInterval(function(){ + var cur = getImage() + // advance the image... + var next = SLIDESHOW_DIRECTION == 'next' ? nextImage() : prevImage() - SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000 + // handle slideshow end... + if(getImageGID(cur) == getImageGID(next)){ + if(SLIDESHOW_LOOP){ + SLIDESHOW_DIRECTION == 'next' ? firstImage() : lastImage() + } else { + toggleSlideShowMode('off') + return + } + } - showStatus('Slideshow: starting', SLIDESHOW_LOOP ? 'looped...' : 'unlooped...') - - // XXX is this the correct way to go??? - $('.viewer').removeClass('overlay') - - toggleSingleImageMode('on') - _slideshow_timer = setInterval(function(){ - var cur = getImage() - // advance the image... - var next = SLIDESHOW_DIRECTION == 'next' ? nextImage() : prevImage() - - // handle slideshow end... - if(getImageGID(cur) == getImageGID(next)){ - if(SLIDESHOW_LOOP){ - SLIDESHOW_DIRECTION == 'next' ? firstImage() : lastImage() - } else { - toggleSlideShowMode('off') - return - } - } - - // center and trigger load events... - centerRibbon() - }, SLIDESHOW_INTERVAL) + // center and trigger load events... + centerRibbon() + }, SLIDESHOW_INTERVAL) + }) + // user cancelled... + .fail(function(){ + toggleSlideShowMode('off') + }) } else { window._slideshow_timer != null && clearInterval(_slideshow_timer) diff --git a/ui/ui.js b/ui/ui.js index 3277bb72..1ed231b8 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -315,6 +315,11 @@ function showContextIndicator(cls, text){ } + +/********************************************************************** +* Modal dialogs... +*/ + function getOverlay(root){ root = $(root) var overlay = root.find('.overlay-block') @@ -345,9 +350,14 @@ function showInOverlay(root, data){ dialog .append(data) - .click(function(){ event.stopPropagation() }) + .one('click', function(){ + event.stopPropagation() + }) overlay.find('.content') - .click(function(){ hideOverlay(root) }) + .on('click', function(){ + overlay.trigger('close') + hideOverlay(root) + }) .append(container) } @@ -359,24 +369,71 @@ function showInOverlay(root, data){ function hideOverlay(root){ root.removeClass('overlay') - root.find('.overlay-block').remove() + root.find('.overlay-block') + .trigger('close') + .remove() } + +/************************************************ Standard dialogs ***/ + function alert(){ - // XXX use CSS!!! - return showInOverlay($('.viewer'), $('') - .text(Array.apply(null, arguments).join(' '))) + var res = $.Deferred() + showInOverlay($('.viewer'), $('') + .text(Array.apply(null, arguments).join(' '))) + .addClass('alert dialog') + .on('close accept', function(){ + res.resolve() + }) + return res } + +function prompt(message, dfl){ + var root = $('.viewer') + var res = $.Deferred() + + var form = $('
'+ + '
'+ + ''+ + ''+ + '
') + form.find('.text') + .text(message) + var overlay = showInOverlay(root, form) + .addClass('prompt dialog') + .on('close', function(){ + res.reject() + }) + .on('accept', function(){ + res.resolve(form.find('input').attr('value')) + hideOverlay(root) + }) + + form.find('button') + .click(function(){ + overlay.trigger('accept') + }) + + var input = form.find('input') + + input + .focus() + setTimeout(function(){ + input.attr('value', dfl == null ? '' : dfl) + }, 100) + + return res +} + + /* -function prompt(){ -} - function confirm(){ } */ + /*********************************************************************/ // vim:set ts=4 sw=4 nowrap :