alert(...) and prompt(...) dialogs now working, still need styling...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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...
 	//

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...
+						SLIDESHOW_INTERVAL = isNaN(interval) ? 3000 : interval*1000
-				if(interval == null){
-					showStatus('Slideshow: cencelled...')
-					toggleSlideShowMode('off')
 
-					// XXX is this the correct way to go???
+						showStatus('Slideshow: starting', SLIDESHOW_LOOP ? 'looped...' : 'unlooped...')
-					$('.viewer').removeClass('overlay')
+					
+						// 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...')
+							// center and trigger load events...
-			
+							centerRibbon()
-				// XXX is this the correct way to go???
+						}, SLIDESHOW_INTERVAL)
-				$('.viewer').removeClass('overlay')
+					})
-
+					// user cancelled...
-				toggleSingleImageMode('on')
+					.fail(function(){
-				_slideshow_timer = setInterval(function(){
+						toggleSlideShowMode('off')
-					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)
 
 			} else {
 				window._slideshow_timer != null && clearInterval(_slideshow_timer)

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!!!
+	var res = $.Deferred()
-	return showInOverlay($('.viewer'), $('<span/>')
+	showInOverlay($('.viewer'), $('<span/>')
-		.text(Array.apply(null, arguments).join(' ')))
+			.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 = $('<div>'+
+				'<div class="text"/>'+
+				'<input type="text" tabindex=1/>'+
+				'<button tabindex=2>Done</button>'+
+			'</div>')
+	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 :