added keyboard moving of view, oddly behaves non-linerely...

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

ui/controls.otl

@@ -14,8 +14,7 @@ Control scheme:
 |   		action
 |   			keyboard		gesture					button (tablet)		button (desktop)
 	tablet / phone / desktop
-		single
+		general
-		ribbon
 			focus image
 				--				tap/click				-					-
 			left image
@@ -23,13 +22,13 @@ Control scheme:
 			right image
 				right			swipe left				+					-
 			up image
-				up				-- (via focus image)	-					-
+				up				-- (via focus image)	??					-
 			down image
-				down			-- (via focus image)	-					-
+				down			-- (via focus image)	??					-
 			first image
-				home			--						-					-
+				home			--						??					-
 			last image
-				end				--						-					-
+				end				--						??					-
 
 			shift up
 				s-up			swipe up				+					-
@@ -41,7 +40,16 @@ Control scheme:
 				c-s-down		??						??					??
 
 			drag view
-				??				tap-drag				-					-
+				--				tap-drag				-					-
+			move view left
+				??				??						??					??
+			move view right
+				??				??						??					??
+			move view up
+				??				??						??					??
+			move view down
+				??				??						??					??
+
 			center current image
 				??				??						??					??
 
@@ -51,15 +59,20 @@ Control scheme:
 				-				pinch closeup			-					-
 			fit one
 				1				tap current image		-					-
-			fit three
-				3				??						-					-
-			broad view
-				??				??						-					-
 
 			toggle single image mode
 				??				??						-					-
 			toggle slideshow mode
 				??				??						-					-
+
+			keyboard help
+			settings
+		ribbon-specific
+			fit three
+				3				??						-					-
+			broad view
+				??				??						-					-
+		single-specific
 		
 .
 | vim:set spell :

ui/gallery-prototype.js

@@ -118,9 +118,10 @@ var keys = {
 	zoomIn: [187],
 	zoomOut: [189],
 	// zoom presets...
-	zoomOriginal: [48],
 	fitOne: [49],
 	fitThree: [51],
+	// XXX is this relivant?
+	zoomOriginal: [48],
 
 	first: [36],
 	last: [35],
@@ -133,6 +134,12 @@ var keys = {
 	promote: [45],
 	demote: [46],
 
+	moveViewUp: [75],				//	k
+	moveViewDown: [74],				//	j
+	moveViewLeft: [72],				//	h
+	moveViewRight: [76],			//	l
+
+	// keys to be ignored...
 	ignore: [16, 17, 18],
 
 	helpShowOnUnknownKey: true
@@ -186,6 +193,12 @@ function handleKeys(event){
 		: (fn(code, keys.fitOne) >= 0) ? fitImage()
 		: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
 
+		// moving view...
+		: (fn(code, keys.moveViewUp) >= 0) ? moveViewUp()
+		: (fn(code, keys.moveViewDown) >= 0) ? moveViewDown()
+		: (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft()
+		: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
+
 		: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
 		: (fn(code, keys.ignore) >= 0) ? false
 		// XXX
@@ -247,6 +260,30 @@ function toggleWideView(){
 
 
 
+/********************************************************* Movement **/
+
+var MOVE_DELTA = 50
+
+// XXX for some odd reason these are not liner... something to do with origin?
+function moveViewUp(){
+	var t = parseInt($('.field').css('top'))
+	$('.field').css({'top': t-(MOVE_DELTA)})
+}
+function moveViewDown(){
+	var t = parseInt($('.field').css('top'))
+	$('.field').css({'top': t+(MOVE_DELTA)})
+}
+function moveViewLeft(){
+	var l = parseInt($('.field').css('left'))
+	$('.field').css({'left': l-(MOVE_DELTA)})
+}
+function moveViewRight(){
+	var l = parseInt($('.field').css('left'))
+	$('.field').css({'left': l+(MOVE_DELTA)})
+}
+
+
+
 /******************************************************* Navigation **/
 
 // basic navigation...
@@ -263,6 +300,7 @@ function lastImage(){
 	$('.current.ribbon').children('.image').last().click()
 }
 
+
 // XXX for the above two functions to be stable we will need to jump up 
 // 		to the next and down to the prev element...
 function focusRibbon(direction){

ui/gallery.html

@@ -103,6 +103,13 @@ $(document).ready(setup);
 	<button onclick="nextImage()">next (right)</button>
 	<button onclick="lastImage()">last (end)</button>
 
+	<br><br>
+
+	<button onclick="moveViewLeft()">left</button>
+	<button onclick="moveViewUp()">Up</button>
+	<button onclick="moveViewDown()">Down</button>
+	<button onclick="moveViewRight()">right</button>
+
 	<!--br><br>
 	LEGACY:
 	<button onclick="showSingle()">single</button>