several fixes and tweaks...

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

ui/TODO.otl

@@ -74,8 +74,8 @@ Roadmap
 	
 
 
-[_] 23% Gen 3 current todo
+[_] 22% Gen 3 current todo
-	[_] 46% High priority
+	[_] 45% High priority
 		[_] BUG: aligning still sometimes gets off...
 		| ...after rotating a number of images
 		|
@@ -111,17 +111,12 @@ Roadmap
 		[_] ASAP: test on Android...
 		[_] empty view (no data) usable...
 		[_] propper system init (start w.o. any data)
-		[_] default STUB image...
+		[_] revise reporting scheme...
-		| or a loading animation..
+		| showStatus(...) should be called uniformly, either at the source 
-		|
+		| or a specific reporting layer...
-		| ...would be good to make something pixilated so as to look nise 
-		| on various magnifications.
-		|
-		| keep always cached.
 		[_] tweak image pre-caching size -- keep as many images cached as possible.
 		| might be good to always cache the smaller previews so as to make things
 		| look faster...
-		[_] slideshow mode...
 		[_] single ribbon mode
 		| should this have up/down navigation?
 		|
@@ -177,6 +172,14 @@ Roadmap
 			[_] thresholds and frame size
 			[_] remove extra and repetitive actions
 			[_] caching config
+		[X] slideshow mode...
+		[X] default STUB image...
+		| or a loading animation..
+		|
+		| ...would be good to make something pixilated so as to look nise 
+		| on various magnifications.
+		|
+		| keep always cached.
 		[X] import fav dirs (wo. index)...
 		[X] ASAP: load/view un-cached directories...
 		[X] ASAP: support relative paths in cache...

ui/keybindings.js

@@ -22,10 +22,16 @@ var KEYBOARD_CONFIG = {
 	// 		select info text...
 	'.overlay-info:hover': {
 		title: 'Info overlay',
-		doc: 'NOTE: when the cursor is over the info overlay one can use '+
+		doc: 'Displayed on bottom of the screen if enabled (toggle with '+
+			'<b>I</b>) and/or inline, at bottom of and image when cursor '+
+			'is over it (only in ribbon mode, toggle with <b>alt-I</b>)<p>'+
+
+			'<p>NOTE: when the cursor is over the info overlay one can use '+
 			'Ctrl-A and Ctrl-D for info text selection, without affecting '+
 			'image selection/marks.',
+
 		ignore: [ 'A' ],
+
 		A: {
 			// NOTE: this is here only for documentation...
 			ctrl: doc('Select all'),
@@ -46,9 +52,11 @@ var KEYBOARD_CONFIG = {
 	// 		their bindings priority...
 	'.help-mode': {
 		title: 'Help',
-		doc: 'To enter this mode press <b>H</b> or <b>?</b>.<br>'+
+		doc: 'To enter this mode press <b>H</b> or <b>?</b>.'+
-			'NOTE: In this mode all other key bindings are disabled, '+
+
+			'<p>NOTE: In this mode all other key bindings are disabled, '+
 			'except the ones explicitly defined here.',
+
 		ignore: '*',
 
 		Esc: doc('Close help',
@@ -74,17 +82,22 @@ var KEYBOARD_CONFIG = {
 			],
 
 		L: doc('Toggle slideshow looping',
-				function(){
+			function(){
-					SLIDESHOW_LOOP = SLIDESHOW_LOOP ? false : true
+				SLIDESHOW_LOOP = SLIDESHOW_LOOP ? false : true
-					showStatus('Slideshow: looping', SLIDESHOW_LOOP ? 'enabled...' : 'disabled...')
+				showStatus('Slideshow: looping', SLIDESHOW_LOOP ? 'enabled...' : 'disabled...')
-					return false
+				return false
-				}),
+			}),
-
+		R: doc('Reverse slideshow direction',
+			function(){
+				SLIDESHOW_DIRECTION = SLIDESHOW_DIRECTION == 'next' ? 'prev' : 'next'
+				showStatus('Slideshow: direction:', SLIDESHOW_DIRECTION + '...')
+				return false
+			}),
 		Esc: doc('Exit/stop slideshow', 
-				function(){ 
+			function(){ 
-					toggleSlideShowMode('off') 
+				toggleSlideShowMode('off') 
-					return false
+				return false
-				}),
+			}),
 		S: 'Esc',
 		Q: 'Esc',
 	},
@@ -99,7 +112,8 @@ var KEYBOARD_CONFIG = {
 		// XXX this should only work on single image mode...
 		F: doc('Toggle view proportions', 
 			function(){ 
-				toggleImageProportions() 
+				var mode = toggleImageProportions() 
+				showStatus('Fitting image to:', mode + '...')
 				centerRibbons()
 			}),
 		Esc: doc('Exit single image mode', 
@@ -132,6 +146,20 @@ var KEYBOARD_CONFIG = {
 		title: 'Global',
 		doc: 'These key bindings work in most other modes.',
 
+		// Aliases...
+		'.next-screen': doc('Next screen',
+				function(){ 
+					event.preventDefault()
+					nextScreenImages()
+					centerRibbons()
+				}),
+		'.prev-screen': doc('Previous screen',
+				function(){ 
+					event.preventDefault()
+					prevScreenImages()
+					centerRibbons()
+				}),
+
 		// Navigation...
 		// XXX need to cancel the animation of the prev action...
 		Left: {
@@ -151,12 +179,7 @@ var KEYBOARD_CONFIG = {
 						prevImage() 
 						centerRibbons()
 					}),
-				ctrl: doc('Previous screen',
+				ctrl: '.prev-screen',
-					function(){ 
-						event.preventDefault()
-						prevScreenImages()
-						centerRibbons()
-					}),
 			},
 		Right: {
 				default: doc('Next image',
@@ -175,23 +198,23 @@ var KEYBOARD_CONFIG = {
 						nextImage() 
 						centerRibbons()
 					}),
-				ctrl: doc('Previous screen',
+				ctrl: '.next-screen',
-					function(){ 
-						event.preventDefault()
-						nextScreenImages()
-						centerRibbons()
-					}),
 			},
+
 		Space: {
 				default: 'Right',
 				shift: 'Left',
 				// screen-oriented movement...
 				ctrl: 'Right',
-				'ctrl+shift': 'Left',
+				'ctrl+shift': '.prev-screen',
 			},
 		Backspace: {
 				default: 'Left',
 				shift: 'Right',
+				// screen-oriented movement...
+				ctrl: 'Left',
+				// XXX this does not work...
+				'ctrl+shift': '.next-screen',
 			},
 		Home: doc('First image', 
 			function(){

ui/modes.js

@@ -121,6 +121,7 @@ var toggleTheme = createCSSClassToggler('.viewer',
 			'dark',
 			'light'
 		],
+		// XXX does this get called for default state (gray)???
 		function(action){
 			SETTINGS['theme'] = action
 		})
@@ -165,6 +166,7 @@ function toggleImageProportions(mode){
 
 	// square...
 	} else if(h != w || mode == 'square'){
+		mode = 'square'
 		var size = Math.min(w, h)
 		image.css({
 			width: size,
@@ -175,10 +177,10 @@ function toggleImageProportions(mode){
 		correctImageProportionsForRotation(image)
 
 		centerView(null, 'css')
-		return 'square'
 
 	// viewer size...
 	} else {
+		mode = 'viewer'
 		var viewer = $('.viewer')
 		var W = viewer.innerWidth()
 		var H = viewer.innerHeight()
@@ -193,8 +195,9 @@ function toggleImageProportions(mode){
 		correctImageProportionsForRotation(image)
 
 		centerView(null, 'css')
-		return 'viewer'
 	}
+
+	return 'mode'
 }