added help generator to ui/lib/keyboard.js, added docs to key bindings...

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

ui/keybindings3.js

@@ -16,13 +16,28 @@ var DIRECTION = 'next'
 /*********************************************************************/
 
 var KEYBOARD_CONFIG = {
+	// single image mode only...
+	'.single-image-mode': {
+		title: 'Single image mode',
+
+		// XXX this should only work on single image mode...
+		F: doc('Toggle view proportions', 
+			function(){ 
+				toggleImageProportions() 
+				centerRibbons()
+			}),
+	},
+
 	// general setup...
 	'.viewer': {
-		ignore: [ ],
+		title: 'Global',
+
 		// Navigation...
 		// XXX need to cancel the animation of the prev action...
 		Left: {
-				default: function(){ 
+				default: doc('Previous image',
+					function(){ 
+						event.preventDefault()
 						// update direction...
 						if(DIRECTION != 'prev'){
 							_STEPS_LEFT_TO_CHANGE_DIRECTION--
@@ -35,14 +50,18 @@ var KEYBOARD_CONFIG = {
 						}
 						prevImage() 
 						centerRibbons()
-				},
+					}),
-				ctrl: function(){ 
+				ctrl: doc('Previous screen',
+					function(){ 
+						event.preventDefault()
 						prevScreenImages()
 						centerRibbons()
-				},
+					}),
 			},
 		Right: {
-				default: function(){ 
+				default: doc('Next image',
+					function(){ 
+						event.preventDefault()
 						// update direction...
 						if(DIRECTION != 'next'){
 							_STEPS_LEFT_TO_CHANGE_DIRECTION--
@@ -55,11 +74,13 @@ var KEYBOARD_CONFIG = {
 						}
 						nextImage() 
 						centerRibbons()
-				},
+					}),
-				ctrl: function(){ 
+				ctrl: doc('Previous screen',
+					function(){ 
+						event.preventDefault()
 						nextScreenImages()
 						centerRibbons()
-				},
+					}),
 			},
 		Space: {
 				default: 'Right',
@@ -72,92 +93,97 @@ var KEYBOARD_CONFIG = {
 				default: 'Left',
 				shift: 'Right',
 			},
-		Home: function(){
+		Home: doc('First image', 
+			function(){
 				event.preventDefault()
 				firstImage()
 				centerRibbons()
-			},
+			}),
-		End: function(){
+		End: doc('Last image',
+			function(){
 				event.preventDefault()
 				lastImage()
 				centerRibbons()
-			},
+			}),
 
 
 		// combined navigation and editor actions...
 		Up: {
-				default: function(){ 
+				default: doc('Go to ribbon above', 
+					function(){ 
 						event.preventDefault()
 						prevRibbon() 
 						centerRibbons()
-				},
+					}),
-				shift: function(){ 
+				shift: doc('Shift image up',
+					function(){ 
 						event.preventDefault()
 						shiftImageUp(null, DIRECTION) 
 						centerRibbons()
-				},
+					}),
-				'ctrl+shift': function(){
+				'ctrl+shift': doc('Shift image up to empty ribbon',
+					function(){
 						event.preventDefault()
 						shiftImageUpNewRibbon(null, DIRECTION) 
 						centerRibbons()
-				},
+					}),
 			},
 		Down: {
-				default: function(){
+				default: doc('Go to ribbon below', 
+					function(){
 						event.preventDefault()
 						nextRibbon() 
 						centerRibbons()
-				},
+					}),
-				shift: function(){
+				shift: doc('Shift image down',
+					function(){ 
 						event.preventDefault()
 						shiftImageDown(null, DIRECTION) 
 						centerRibbons()
-				},
+					}),
-				'ctrl+shift': function(){
+				'ctrl+shift': doc('Shift image up to empty ribbon',
+					function(){
 						event.preventDefault()
 						shiftImageDownNewRibbon(null, DIRECTION) 
 						centerRibbons()
-				},
+					}),
 			},
 
 
 		// zooming...
-		'#1': function(){ fitNImages(1) },
+		'#1': doc('Fit one image', function(){ fitNImages(1) }),
-		'#2': function(){ fitNImages(2) },
+		'#2': doc('Fit two images', function(){ fitNImages(2) }),
-		'#3': function(){ fitNImages(3) },
+		'#3': doc('Fit three images', function(){ fitNImages(3) }),
-		'#4': function(){ fitNImages(4) },
+		'#4': doc('Fit four images', function(){ fitNImages(4) }),
-		'#5': function(){ fitNImages(5) },
+		'#5': doc('Fit five images', function(){ fitNImages(5) }),
-		'#6': function(){ fitNImages(6) },
+		'#6': doc('Fit six images', function(){ fitNImages(6) }),
-		'#7': function(){ fitNImages(7) },
+		'#7': doc('Fit seven images', function(){ fitNImages(7) }),
-		'#8': function(){ fitNImages(8) },
+		'#8': doc('Fit eight images', function(){ fitNImages(8) }),
-		'#9': function(){ fitNImages(9) },
+		'#9': doc('Fit nine images', function(){ fitNImages(9) }),
 
-		'-': function(){ zoomOut() },
+		'-': doc('Zoom in', function(){ zoomOut() }),
-		'=': function(){ zoomIn() },
+		'=': doc('Zoom out', function(){ zoomIn() }),
 
 
-		Enter: function(){ toggleSingleImageMode() },
+		Enter: doc('Toggle single image view', 
+				function(){ toggleSingleImageMode() }),
 
-		// XXX this should only work on single image mode...
+		B: doc('Toggle theme', function(){ toggleTheme() }),
-		F: function(){ 
-				toggleImageProportions() 
-				centerRibbons()
-			},
-
-		B: function(){ toggleTheme() },
 
 		S: {
-				ctrl: function(){
+				ctrl: doc('Save current state', 
+					function(){
 						//saveLocalStorage()
 						saveLocalStorageData()
 						saveLocalStorageMarks()
-				}
+					})
 			},
 		Z: {
-				ctrl: function(){
+				ctrl: doc('Restore to last saved state', 
+					function(){
 						loadLocalStorage()
 						loadLocalStorageMarks()
-				}
+					})
 			},
 
 
@@ -174,7 +200,8 @@ var KEYBOARD_CONFIG = {
 				//		i.e. marking can change direction depending on where
 				//		we moved last...
 				// NOTE: marking does not change move direction...
-				default: function(){ 
+				default: doc('Mark current image and advance',
+					function(){ 
 						toggleImageMark()
 						if(DIRECTION == 'next'){
 							nextImage()
@@ -185,9 +212,10 @@ var KEYBOARD_CONFIG = {
 							centerView(focusImage(getImageBefore()))
 						}
 						centerRibbons()
-				},
+					}),
 				// same as default but in reverse direction...
-				shift: function(){
+				shift: doc('Mark current image and return',
+					function(){
 						toggleImageMark()
 						if(DIRECTION == 'prev'){
 							nextImage()
@@ -198,14 +226,16 @@ var KEYBOARD_CONFIG = {
 							centerView(focusImage(getImageBefore()))
 						} 
 						centerRibbons()
-				},
+					}),
-				ctrl: function(){ 
+				ctrl: doc('Mark current image',
+					function(){ 
 						var action = toggleImageMark() 
-				},
+					}),
 			},
 		I: {
 				// XXX STUB -- replace with a real info window...
-				default: function(){
+				default: doc('Show current image info',
+					function(){
 						var gid = getImageGID($('.current.image'))
 						var r = getRibbonIndex(getRibbon())
 						var data = IMAGES[gid]
@@ -219,25 +249,42 @@ var KEYBOARD_CONFIG = {
 									'/'+ DATA.ribbons[r].length +'\n'+
 								'Position (global): '+ order +'/'+ DATA.order.length +'\n'+
 								'')
-				},
+					}),
-				ctrl: function(){ invertImageMarks() },
+				ctrl: doc('Invert image marks', 
+					function(){ invertImageMarks() }),
 			},
 		A: {
-				shift: function(){ toggleImageMarkBlock() },
+				shift: doc('Toggle marks in current contagious block', 
-				ctrl: function(){ markAll('ribbon') },
+					function(){ toggleImageMarkBlock() }),
+				ctrl: doc('Mark current ribbon', 
+					function(){ markAll('ribbon') }),
 			},
 		U: {
-				ctrl: function(){ removeImageMarks('ribbon') },
+				ctrl: doc('Unmark current ribbon', 
-				shift: function(){ removeImageMarks('all') },
+					function(){ removeImageMarks('ribbon') }),
+				shift: doc('Unamrk all', 
+					function(){ removeImageMarks('all') }),
 			},
 		F2: {
-				default: function(){ toggleMarkesView() },
+				default: doc('Toggle mark visibility', 
-				shift: function(){
+					function(){ toggleMarkesView() }),
+				shift: doc('Toggle marked only images view', 
+					function(){
 						toggleMarkedOnlyView()
-				}
+					})
 			},
 
-		F4: openImage,
+		F4: doc('Open image in external software', openImage),
+
+		// XXX print this in an overlay...
+		// '?'
+		'/': {
+				shift: doc('Show keyboard bindings',
+					function(){
+						var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
+						alert(doc.text())
+					}),
+			}
 	}
 }
 

ui/lib/keyboard.js

@@ -131,6 +131,9 @@ function doc(text, func){
  *
  * XXX need an explicit way to prioritize modes...
  * XXX check do we need did_handling here...
+ *
+ * XXX BUG explicitly given modes do ton yield results if the pattern 
+ * 		does not match...
  */
 function getKeyHandlers(key, modifiers, keybindings, modes){
 	var chr = null
@@ -151,6 +154,7 @@ function getKeyHandlers(key, modifiers, keybindings, modes){
 	for(var mode in keybindings){
 
 		// test for mode compatibility...
+		// XXX this fails for explicitly given mode...
 		if(modes != 'all' 
 				&& (modes != 'any' 
 					&& modes != mode 
@@ -401,19 +405,90 @@ function buildKeybindingsHelp(keybindings){
 	var mode, title
 
 	for(var pattern in keybindings){
-		mode = modes[pattern]
+		mode = keybindings[pattern]
 
+		// titles and docs...
 		title = mode.title == null ? pattern : mode.title
 		res[title] = {
 			doc: mode.doc == null ? '' : mode.doc
 		}
+		section = res[title]
 
-		// XXX handlers...
+		// handlers...
+		for(var key in mode){
+			if(key == 'doc' || key == 'title' || key == 'ignore'){
+				continue
+			}
+			//var modifiers = getKeyHandlers(key, '?', keybindings, pattern)[pattern]
+			var modifiers = getKeyHandlers(key, '?', keybindings, 'all')[pattern]
+			modifiers = modifiers == 'none' || modifiers == undefined ? [''] : modifiers
+
+			for(var i=0; i < modifiers.length; i++){
+				var mod = modifiers[i]
+
+				//var handler = getKeyHandlers(key, mod, keybindings, pattern)[pattern]
+				var handler = getKeyHandlers(key, mod, keybindings, 'all')[pattern]
+
+				// standard object doc...
+				if('doc' in handler){
+					var doc = handler.doc
+
+				// lisp style...
+				} else if(typeof(handler) == typeof([]) && handler.constructor.name == 'Array'){
+					var doc = handler[1]
+
+				// no doc...
+				} else {
+					if('name' in handler && handler.name != ''){
+						var doc = handler.name
+					} else {
+						// XXX is this the right way to do this?
+						var doc = handler
+					}
+				}
+
+				// populate the section...
+				// NOTE: we need a list of keys per action...
+				if(doc in section){
+					var keys = section[doc]
+				} else {
+					var keys = []
+					section[doc] = keys
+				}
+				keys.push((mod == '' || mod == 'default') ? key : (mod +'+'+ key))
+			}
+
+		}
 	}
 
 	return res
 }
 
+function buildKeybindingsHelpHTML(keybindings){
+	var doc = buildKeybindingsHelp(keybindings)
+
+	var res = '<table class="keyboard-help">'
+	
+	for(var mode in doc){
+		if(mode == 'doc'){
+			continue
+		}
+		res += '  <tr class="section-title"><th colspan=2>' + mode + '</th></tr>\n' 
+		mode = doc[mode]
+		res += '  <tr class="section-doc"><th colspan=2>'+ mode.doc + '</th></tr>\n'
+		for(var action in mode){
+			if(action == 'doc'){
+				continue
+			}
+			res += '  <tr><td>' + mode[action].join(', ') +'</td><td>'+ action + '</td></tr>\n'
+		}
+	}
+	res += '</table>'
+
+	return $(res)
+}
+
+
 
 
 /**********************************************************************