more refactoring and cleanup...

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

ui/TODO.otl

@@ -58,21 +58,18 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 30% UI
+		[_] 33% UI
 			[X] fix single image mode
 			| need to center the image correctly...
-			[_] 46% add screen buttons for all actions...
+			[X] 100% add screen buttons for all actions...
 				[X] navigation
 				[X] actions
-				[_] zooming
+				[X] zooming
-				[_] 33% zoom presets
+				[X] 100% zoom presets
-					[_] single
+					[X] single
-					[_] three
+					[X] three
 					[X] wide
 					| toggle...
-				[_] return to current image / home (after drag)
-			[_] tap image to return from large magnification
-			[_] pinch to zoom
 			[_] stretch viewer to screen
 			[_] 0% layout
 				[_] tablet
@@ -89,6 +86,11 @@ Priority work
 				| @media screen {}
 				[_] web
 				| is this is the same as the above two? (with auto-select)
+			[_] 0% return to current image / home (after drag)
+				[_] button
+				[_] keyboard
+			[_] tap image to return from large magnification
+			[_] pinch to zoom
 			[_] 0% setting screen
 				[_] basic screen
 				[_] keyboard config (low priority)
@@ -134,6 +136,7 @@ Priority work
 			[_] cleanup legacy workarounds
 			[_] ui.js, gallery-prototype.js either merge or revise split logic
 	[_] 0% Preview III
+		[_] revise controls...
 		[_] dynamic image/preview swap for zooming
 		| important to make 1:1 previews for all main views and zoom levels...
 		| also need to make this as device-neutral as possible...

ui/controls.otl

@@ -17,23 +17,31 @@ Control scheme:
 		general
 			focus image
 				--				tap/click				-					-
+
 			left image
-				left			swipe right				+					-
+				left,bksp,<,p	swipe right				+					-
 			right image
-				right			swipe left				+					-
+				right,space,>,n	swipe left				+					-
 			up image
-				up				-- (via focus image)	??					-
+				up				- (via focus image)	??					-
 			down image
-				down			-- (via focus image)	??					-
+				down			- (via focus image)	??					-
+
+			skip 10 left
+				??				-						-					-
+			skip 10 right
+				??				-						-					-
+
 			first image
-				home			--						??					-
+				home			-						??					-
 			last image
-				end				--						??					-
+				end				-						??					-
 
 			shift up
 				s-up			swipe up				+					-
 			shift down
 				s-down			swipe down				+					-
+
 			shift up, new ribbon
 				c-s-up			??						??					??
 			shift down, new ribbon
@@ -42,36 +50,38 @@ Control scheme:
 			drag view
 				--				tap-drag				-					-
 			move view left
-				??				??						??					??
+				h				-						-					-
 			move view right
-				??				??						??					??
+				l				-						-					-
 			move view up
-				??				??						??					??
+				k				-						-					-
 			move view down
-				??				??						??					??
+				j				-						-					-
 
 			center current image
 				??				??						??					??
 
 			zoom in
-				+				pinch spread			-					-
+				+				pinch spread			+					-
 			zoom out
-				-				pinch closeup			-					-
+				-				pinch closeup			+					-
 			fit one
 				1				tap current image		-					-
 
 			toggle single image mode
-				??				??						-					-
+				Enter			??						+					-
 			toggle slideshow mode
 				??				??						-					-
 
 			keyboard help
+				??				??						-					-
 			settings
+				??				??						-					-
 		ribbon-specific
 			fit three
-				3				??						-					-
+				3				??						+					-
 			broad view
-				??				??						-					-
+				??				??						+					-
 		single-specific
 		
 .

ui/gallery-prototype.js

@@ -37,12 +37,20 @@ function setupControlElements(){
 	$(".image").click(setCurrentImage)
 
 	// buttons...
-	$('.next-image').click(nextImage)
+	$('.screen-button.next-image').click(nextImage)
-	$('.prev-image').click(prevImage)
+	$('.screen-button.prev-image').click(prevImage)
-	$('.demote').click(shiftImageUp)
+	$('.screen-button.demote').click(shiftImageUp)
-	$('.promote').click(shiftImageDown)
+	$('.screen-button.promote').click(shiftImageDown)
-	$('.toggle-wide').click(toggleWideView)
+
-	$('.toggle-single').click(toggleSingleImageMode)
+	$('.screen-button.zoom-in').click(function(){scaleContainerBy(ZOOM_FACTOR)})
+	$('.screen-button.zoom-out').click(function(){scaleContainerBy(1/ZOOM_FACTOR)})
+
+	$('.screen-button.toggle-wide').click(toggleWideView)
+	$('.screen-button.toggle-single').click(toggleSingleImageMode)
+
+	$('.screen-button.fit-three').click(fitThreeImages)
+
+	$('.screen-button.settings').click(function(){alert('not implemented yet...')})
 }
 
 
@@ -111,7 +119,7 @@ var ZOOM_FACTOR = 2
 // XXX need to make this handle modifiers gracefully...
 var keys = {
 	toggleHelp: [72],
-	toggleSingleImageMode: [70],
+	toggleSingleImageMode: [70, 13],	// ???, Enter
 	close: [27, 88, 67],
 
 	// zooming...
@@ -256,9 +264,10 @@ function toggleSingleImageMode(){
 // wide view mode toggle...
 function toggleWideView(){
 	if($('.wide-view-mode').length > 0){
-		setContainerScale(1)
+		setContainerScale(ORIGINAL_FIELD_SCALE)
 		$('.viewer').removeClass('wide-view-mode')
 	} else {
+		ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
 		setContainerScale(0.1)
 		$('.viewer').addClass('wide-view-mode')
 	}

ui/gallery.css

@@ -65,12 +65,15 @@
 }
 
 
-.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
+.screen-button {
 	text-align: center;
 	vertical-align: middle;
 	width: 100%;
-	height: 150px; 
+	height: 125px; 
+
+	/* coloring is temporary... */
 	background: gray;
+	color: silver;
 
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -80,15 +83,20 @@
 }
 
 
-.next-image, .prev-image, .toggle-wide, .toggle-single {
+.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide {
+	/* coloring is temporary... */
 	background: silver;
+	color: gray;
 }
 
 
-.toggle-wide, .toggle-single {
+.toggle-single, .fit-three, .zoom-in, .zoom-out {
-	height:50px
+	height: 50px;
 }
 
+.settings, .toggle-wide {
+	height: 25px;
+}
 
 .promote {
 }

ui/gallery.html

@@ -12,11 +12,6 @@
 <script src="jquery-ui-1.8.22.custom.min.js"></script>
 
 <script src="jquery.touchSwipe.js"></script>
-<!-- script src="jquery.wipetouch.js"></script-->
-<!-- XXX this does not work on android... --> 
-<!-- script src="jquery.gestures.js"></script-->
-<!-- XXX need to figure out how to disable all the bling -->
-<!-- script src="jquery.mobile.js"></script-->
 
 <!-- XXX STUB -->
 <script src="images.js"></script>
@@ -68,10 +63,12 @@ $(document).ready(setup);
 
 <div class="viewer">
 	<div class="controller">
-		<div class="demote">^</div>
+		<div class="screen-button demote">^</div>
-		<div class="prev-image">&lt;</div>
+		<div class="screen-button prev-image">&lt;</div>
-		<div class="promote">v</div>
+		<div class="screen-button promote">v</div>
-		<div class="toggle-single">[ ]</div>
+		<div class="screen-button toggle-single">[ ]</div>
+		<div class="screen-button fit-three">ooo</div>
+		<div class="screen-button settings">settings</div>
 	</div>
 	<div class="container">
 		<div class="field">
@@ -85,10 +82,12 @@ $(document).ready(setup);
 		<div class="v-marker"></div>
 	</div>
 	<div class="controller">
-		<div class="demote">^</div>
+		<div class="screen-button demote">^</div>
-		<div class="next-image">&gt;</div>
+		<div class="screen-button next-image">&gt;</div>
-		<div class="promote">v</div>
+		<div class="screen-button promote">v</div>
-		<div class="toggle-wide">+/-</div>
+		<div class="screen-button zoom-in">+</div>
+		<div class="screen-button zoom-out">-</div>
+		<div class="screen-button toggle-wide">...</div>
 	</div>
 </div>
 

ui/ui.js

@@ -67,8 +67,6 @@ function getCurrentHorizontalOffset(image){
 		image = $('.image.current')
 	}
 
-	var scale = getElementScale($('.field'))
-
 	var ribbon = image.parents('.ribbon')
 	var images = ribbon.children('.image')