made the keyhandler mode-aware...

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

ui/TODO.otl

@@ -177,9 +177,9 @@ Priority work
 			[X] 100% actions
 				[X] bug: shifting up to new ribbon pushes the current row down...
 				| before starting on a fix, need to cleanup the code from old hacks and workarounds...
-	[_] 37% Preview II (optional features)
+	[_] 39% Preview II (optional features)
-		[_] 0% make things modular and reusable
+		[_] 14% make things modular and reusable
-			[_] make the keyboard handler local to selector (mode-aware)
+			[X] make the keyboard handler local to selector (mode-aware)
 			[_] prefix an ID to all selectors to make their actions "local"
 			[_] avoid use of id html attr
 			[_] avoid use of globals
@@ -204,7 +204,6 @@ Priority work
 			[_] .dblclick(...) does not work...
 			[_] .dragable(...) does not work...
 		[_] slideshow...
-		[_] make keyboard handler mode-aware...
 		| this is needed to disable navigation keys in setup-mode, for example...
 		[X] 100% serialization/deserialization
 			[X] JSON loader/unloader

ui/gallery-prototype.js

@@ -10,6 +10,7 @@
 // 	- are the benefits worth the code bloat?
 //
 
+
 var ImageGrid = {
 	// this can be serialized...
 	// NOTE: to load a serialized set of options use ImageGrid.set(options)...
@@ -524,6 +525,8 @@ function toKeyName(code){
 // XXX this must create it's own overlay...
 function showInOverlay(obj){
 	obj.click(function(){ return false })
+	// XXX 
+	$('.viewer').addClass('overlay-mode')
 	// clean things up...
 	$('.overlay .content').children().remove()
 	// put it in the overlay...
@@ -536,6 +539,7 @@ function showInOverlay(obj){
 					$('.overlay .content')
 						.children()
 							.remove()
+					$('.overlay-mode').removeClass('overlay-mode')
 				})
 		})
 		.fadeIn()
@@ -1113,10 +1117,10 @@ function setupEvents(){
 	// keyboard...
 	if(DEBUG){
 		$(document)
-			.keydown(makeKeyboardHandler(keybindings, ignorekeys, function(k){alert(k)}))
+			.keydown(makeKeyboardHandler(keybindings, function(k){alert(k)}))
 	} else {
 		$(document)
-			.keydown(makeKeyboardHandler(keybindings, ignorekeys))
+			.keydown(makeKeyboardHandler(keybindings))
 	}
 	// swipe...
 	$('.viewer')
@@ -1474,13 +1478,17 @@ var KEYBOARD_HANDLER_PROPAGATE = false
  *
  * XXX might need to add meta information to generate sensible help...
  */
-function makeKeyboardHandler(keybindings, ignore, unhandled){
+function makeKeyboardHandler(keybindings, unhandled){
 	if(unhandled == null){
 		unhandled = function(){return false}
 	}
 	return function(evt){
+		for(var mode in keybindings){
+			if($(mode).length > 0){
+				var bindings = keybindings[mode]
+
 				var key = evt.keyCode
-		if(ignore != null && ignore.indexOf(key) != -1){
+				if(bindings.ignore != null && bindings.ignore.indexOf(key) != -1){
 					return true
 				}
 				// XXX ugly...
@@ -1488,11 +1496,11 @@ function makeKeyboardHandler(keybindings, ignore, unhandled){
 				modifers += evt.altKey ? (modifers != '' ? '+alt' : 'alt') : ''
 				modifers += evt.shiftKey ? (modifers != '' ? '+shift' : 'shift') : ''
 
-		var handler = keybindings[key]
+				var handler = bindings[key]
 
 				// alias...
 				while (typeof(handler) == typeof(123)) {
-			handler = keybindings[handler]
+					handler = bindings[handler]
 				}
 				// no handler...
 				if(handler == null){
@@ -1521,6 +1529,8 @@ function makeKeyboardHandler(keybindings, ignore, unhandled){
 				}
 				return unhandled(key)
 			}
+		}
+	}
 }
 
 
@@ -1642,6 +1652,7 @@ ImageGrid.GROUP('Configuration and Help',
 					}, 
 					function(e){return e.click_handler})
 		}),
+	// XXX do not use global keybindings...
 	ImageGrid.ACTION({
 			title: 'Keyboard configuration',
 			doc: 'Show keyboard configuration interface.',
@@ -1649,13 +1660,24 @@ ImageGrid.GROUP('Configuration and Help',
 		function showKeyboardBindings(){
 			// build reverse key index...
 			var bindings = {}
-			for(var k in keybindings){
+			for(var m in keybindings){
+				var mode_bindings = keybindings[m]
+
+				// XXX do the doc for the mode...
+				// XXX
+
+				for(var k in mode_bindings){
+					// XXX skip doc attrs...
+					if(k == 'title' || k == 'doc' || k == 'ignore'){
+						continue
+					}
+
 					var id
-				var v = keybindings[k]
+					var v = mode_bindings[k]
 
 					// alias...
 					while (typeof(v) == typeof(123)) {
-					v = keybindings[v]
+						v = mode_bindings[v]
 					}
 					// Array, lisp style with docs...
 					if(typeof(v) == typeof([]) && v.constructor.name == 'Array'){
@@ -1683,6 +1705,8 @@ ImageGrid.GROUP('Configuration and Help',
 					} 
 					bindings[id].push(toKeyName(k))
 				}
+
+			}
 			showOptionsUI(ImageGrid.actions, 
 					function(e){ 
 						return (bindings[e.id]!=null?bindings[e.id]:'None')

ui/keybindings.js

@@ -1,13 +1,38 @@
 /*********************************************************************/
 // NOTE: use String.fromCharCode(code)...
 // list of keys to be ignored by handler but still handled by the browser...
-var ignorekeys = [
-	116,													//	F5
-	123,													//	F12
-]
 
 
 var keybindings = {
+	'.overlay-mode': {
+		title: 'Overlay mode',
+		doc: 'overlay mode key bindings.',
+
+		ignore: [
+			37,													//	Left
+			39,													//	Right
+			36,													//	Home
+			32,													//	Space
+			35,													//	End
+			38,													//	Up
+			40,													//	Down
+		],
+
+		27:		ImageGrid.closeOverlay,							//	Esc	
+	},
+
+
+	//'*': {
+	// everything except overlays...
+	'.viewer *:not(.overlay-mode *)': {
+		title: 'ALL',
+		doc: 'global key bindings.',
+
+		ignore: [
+			116,												//	F5
+			123,												//	F12
+		],
+
 		// togglable modes and options...
 		191: {
 			'default':	ImageGrid.showKeyboardBindings,			//	?
@@ -80,16 +105,16 @@ var keybindings = {
 
 
 		// combined navigation with actions..
-	40:	{
-		'default': ImageGrid.focusBelowRibbon,				//	Down
-		'shift': ImageGrid.shiftImageDown,					//	shift-Down
-		'ctrl+shift': ImageGrid.shiftImageDownNewRibbon		//	ctrl-shift-Down
-	},
 		38: {
 			'default': ImageGrid.focusAboveRibbon,				//	Up
 			'shift': ImageGrid.shiftImageUp,					//	shift-Up
 			'ctrl+shift': ImageGrid.shiftImageUpNewRibbon		//	ctrl-shift-Up
 		},
+		40:	{
+			'default': ImageGrid.focusBelowRibbon,				//	Down
+			'shift': ImageGrid.shiftImageDown,					//	shift-Down
+			'ctrl+shift': ImageGrid.shiftImageDownNewRibbon		//	ctrl-shift-Down
+		},
 
 		// misc actions...
 		82:		ImageGrid.reverseImageOrder,					//	r
@@ -105,6 +130,7 @@ var keybindings = {
 		// XXX make this into a real action...
 		116:	function(){ return DEBUG?true:false },			//	F5
 		112:	116,											//	F12
+	}
 }