some code cleanup...

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

ui/TODO.otl

@@ -1,5 +1,5 @@
 Priority work
-	[_] 45% Preview II
+	[_] 39% Preview II
 		[_] 55% sorted images in ribbons
 			[X] 100% stage I: position the promoted/demoted image correctly
 			| and correct positioning on promote/demote
@@ -42,9 +42,8 @@ Priority work
 					[X] basic actions
 					[X] zooming
 				[_] position other ribbons...
-		[_] 60% correct zooming and modes
+		[_] 75% correct zooming and modes
 			[X] zooming in ribbon view
-			[_] dragging wile zoomed to more than screen width/height...
 			[X] 100% zoom presets for ribbon view
 			| other possible presets:
 			| 	- five
@@ -58,6 +57,11 @@ Priority work
 				[X] one (with zooming)
 			[_] single image mode with zooming
 			| ribbons are hidden
+		[_] 0% drag action...
+			[_] basic infrastructure
+			[_] center current action
+			[_] while zoomed more than the screen
+			[_] while zoomed out (ribbon view)
 		[_] 66% fix layout and animations
 			[X] zooming
 			[X] navigation

ui/experiment-ribbon-navigation-n-zoom.html

@@ -65,8 +65,8 @@ function imageClick(){
 }
 .origin-marker-2 {
 	position: relative;
-	top: -6px;
+	top: -7px;
-	left: -6px;
+	left: -7px;
 	width: 5px;
 	height: 5px;
 
@@ -167,6 +167,10 @@ Size:
 <button onclick="fieldSize(600, 400)">600x400</button>
 <br>
 <br>
+<button onclick="centerCurrentImage()">center current</button>
+<button onclick="centerOrigin()">center origin</button>
+<br>
+<br>
 
 <div class="container animated">
 	<div class="field">

ui/gallery-prototype.js

@@ -134,25 +134,35 @@ function handleImageClick(e) {
 
 
 
+var ZOOM_FACTOR = 2
+
 // key configuration...
 // XXX need to make this handle modifiers gracefully...
 var keys = {
-	toggleHelpKeys: [72],
+	toggleHelp: [72],
 	toggleRibbonView: [70],
-	closeKeys: [27, 88, 67],
+	close: [27, 88, 67],
 
-	firstKeys: [36],
+	// zooming...
-	lastKeys: [35],
+	zoomIn: [187],
-	previousKeys: [37, 80, 188, 8],
+	zoomOut: [189],
-	nextKeys: [39, 78, 190, 32],
+	// zoom presets...
+	zoomOriginal: [48],
+	fitOne: [49],
+	fitThree: [51],
+
+	first: [36],
+	last: [35],
+	previous: [37, 80, 188, 8],
+	next: [39, 78, 190, 32],
 	// these work with ctrl and shift modifiers...
-	downKeys: [40],
+	down: [40],
-	upKeys: [38],
+	up: [38],
 	// these work with ctrl modifier...
-	promoteKeys: [45],
+	promote: [45],
-	demoteKeys: [46],
+	demote: [46],
 
-	ignoreKeys: [16, 17, 18],
+	ignore: [16, 17, 18],
 
 	helpShowOnUnknownKey: true
 }
@@ -160,24 +170,24 @@ var keys = {
 // XXX revise...
 function handleKeys(event){
 	var code = event.keyCode, fn = $.inArray;
-	var _ = (fn(code, keys.closeKeys) >= 0) ? function(){}()
+	var _ = (fn(code, keys.close) >= 0) ? function(){}()
-		: (fn(code, keys.firstKeys) >= 0) ? firstImage()
+		: (fn(code, keys.first) >= 0) ? firstImage()
-		: (fn(code, keys.nextKeys) >= 0) ? nextImage()
+		: (fn(code, keys.next) >= 0) ? nextImage()
-		: (fn(code, keys.previousKeys) >= 0) ? prevImage()
+		: (fn(code, keys.previous) >= 0) ? prevImage()
-		: (fn(code, keys.lastKeys) >= 0) ? lastImage()
+		: (fn(code, keys.last) >= 0) ? lastImage()
-		: (fn(code, keys.promoteKeys) >= 0) ? function(){
+		: (fn(code, keys.promote) >= 0) ? function(){
 			if(event.ctrlKey){
 				createRibbon('next')
 			}
 			shiftImageDown()
 		}()
-		: (fn(code, keys.demoteKeys) >= 0) ? function(){
+		: (fn(code, keys.demote) >= 0) ? function(){
 			if(event.ctrlKey){
 				createRibbon('prev')
 			}
 			shiftImageUp()
 		}()
-		: (fn(code, keys.downKeys) >= 0) ? function(){
+		: (fn(code, keys.down) >= 0) ? function(){
 			if(event.shiftKey){
 				if(event.ctrlKey){
 					createRibbon('next')
@@ -187,7 +197,7 @@ function handleKeys(event){
 				focusBelowRibbon()
 			}
 		}()
-		: (fn(code, keys.upKeys) >= 0) ? function(){
+		: (fn(code, keys.up) >= 0) ? function(){
 			if(event.shiftKey){
 				if(event.ctrlKey){
 					createRibbon('prev')
@@ -197,8 +207,16 @@ function handleKeys(event){
 				focusAboveRibbon()
 			}
 		}()
+		// zooming...
+		: (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR)
+		: (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR)
+		// zoom presets...
+		: (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1)
+		: (fn(code, keys.fitOne) >= 0) ? fitImage()
+		: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
+
 		: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
-		: (fn(code, keys.ignoreKeys) >= 0) ? false
+		: (fn(code, keys.ignore) >= 0) ? false
 		// XXX
 		: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
 		: false;

ui/gallery.html

@@ -100,11 +100,11 @@ $(document).ready(setup);
 
 	<br><br>
 
-	<button onclick="zoomContainerBy(2)">Zoom in</button>
+	<button onclick="zoomContainerBy(2)">Zoom in (+)</button>
-	<button onclick="zoomContainerBy(0.5)">Zoom out</button>
+	<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
-	<button onclick="setContainerZoom(1)">Original</button>
+	<button onclick="setContainerZoom(1)">Original (0)</button>
-	<button onclick="fitImage()">Image</button>
+	<button onclick="fitImage()">Image (1)</button>
-	<button onclick="fitThreeImages()">Three</button>
+	<button onclick="fitThreeImages()">Three (3)</button>
 
 	<br><br>
 

ui/ui.js

@@ -95,7 +95,7 @@ function centerSquare(){
 	// horizontal...
 	alignRibbon()
 
-	centerOrigin()
+	centerCurrentImage()
 }
 
 function alignRibbon(image, position){
@@ -175,6 +175,7 @@ function centerOrigin(){
 
 // XXX need to make this work for % values...
 // XXX make this usable as an event handler for .resize(...) event...
+// XXX this does not account for zoom correctly...
 function fieldSize(W, H){
 	var oW = $('.container').width()
 	var oH = $('.container').height()
@@ -189,15 +190,25 @@ function fieldSize(W, H){
 
 	// shift the field...
 	$('.field').css({
-		// compensate top/left that get changed while zooming....
-		'top': H/2 * 1/zoom - H/2, 
-		'left': W/2 * 1/zoom - W/2, 
-
 		'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2), 
 		'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2)
 	})
 }
 
+function centerCurrentImage(){
+	$('.field')
+		.css({
+			'top': 0,
+			'left': 0
+		})
+		// do this after animations are done...
+		.one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", centerOrigin)
+	// this is repeated intentionally...
+	// ...needed for small shifts, while the after-animation event 
+	// is for large moves.
+	centerOrigin()
+}
+
 
 /*********************************************************************/