From 7812d0d40a74ac78d33ef540caa3b74c2c4b3e14 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 3 May 2013 04:18:47 +0400
Subject: [PATCH] added ribbon roll compensation...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/ImageGrid.js | 21 +++++++++++++++++++++
 ui/index.html   |  8 ++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js
index 047b341a..e2ee8825 100755
--- a/ui/ImageGrid.js
+++ b/ui/ImageGrid.js
@@ -22,6 +22,11 @@
 * Helpers
 */
 
+// XXX need ribbon end indicators...
+
+// XXX might need shift left/right indicators (later)...
+
+
 function flashIndicator(direction){
 	$(direction == 'prev' ? '.up-indicator' : '.down-indicator')
 		// NOTE: this needs to be visible in all cases and key press 
@@ -43,11 +48,13 @@ function getRelativeVisualPosition(outer, inner){
 }
 
 
+// Returns the image size (width) as viewed on screen...
 function getVisibleImageSize(){
 	return $('.image').outerWidth() * getElementScale($('.ribbon-set'))
 }
 
 
+// Return the number of images that can fit to viewer width...
 function getScreenWidthInImages(){
 	return $('.viewer').innerWidth() / getVisibleImageSize()
 }
@@ -316,6 +323,7 @@ function centerImage(image, mode){
 //		...this is to be done in the loader...
 
 // NOTE: negative left or right will contract the ribbon...
+// XXX need to adjust ribbon position to compensate for ribbon shift...
 function extendRibbon(left, right, ribbon){
 	ribbon = ribbon == null ? 
 				$('.current.image').closest('.ribbon') 
@@ -348,6 +356,19 @@ function extendRibbon(left, right, ribbon){
 		res.right = createImages(right, removed).appendTo(ribbon)
 	}
 
+	// compensate for the truncation...
+	// XXX do we need to split this into a separate function?
+	// 		...the rest of the function if pretty generic...
+	// XXX for some odd reason this breaks in an unstable way when page
+	// 		is zoomed...
+	if(left != 0){
+		var l = parseFloat(ribbon.css('left'))
+		l = isNaN(l) ? 0 : l
+		ribbon.css({
+			left: l + (-left * parseFloat(images.outerWidth()))
+		})
+	}
+
 	return res
 }
 
diff --git a/ui/index.html b/ui/index.html
index 1c3bdc22..9537e613 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -214,13 +214,13 @@ $(function(){
 		images.push(createImage().text(i)[0]) 
 	}
 	r.append($(images))
-	var rr = r.clone()
-	var rrr = r.clone()
+	//var rr = r.clone()
+	//var rrr = r.clone()
 
 	$('.ribbon-set')
 		.append(r)
-		.append(rr)
-		.append(rrr)
+		//.append(rr)
+		//.append(rrr)
 
 	// NOTE: this is global so as to not to add any extra complexity to 
 	//		the internal workings...