fixed centering though still not 100% on rotated images in single image mode...

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

ui (gen4)/features/ui-chrome.js

@@ -247,6 +247,7 @@ var CurrentImageIndicatorActions = actions.Actions({
 				}
 			}
 
+			// XXX need to account for image margins....
 			//css.left = cur[0].offsetLeft
 			this.ribbons.dom.setOffset(marker, cur[0].offsetLeft, 0)
 

ui (gen4)/features/ui-single-image.js

@@ -70,9 +70,6 @@ var core = require('features/core')
 //
 //
 // XXX should this be an action???
-// XXX .ribbons.correctImageProportionsForRotation(..) might be working 
-// 		incorrectly...
-// 		...when scaling a horizontal image, the thing starts jumping around....
 // XXX alignment issues in some orientations...
 function updateImageProportions(){
 	var that = this
@@ -80,31 +77,42 @@ function updateImageProportions(){
 	var viewer = this.ribbons.viewer
 
 	var img = this.ribbons.getImage()
-	// XXX check if this accounts for margins...
+
 	var w = img.outerWidth()
 	var h = img.outerHeight()
 
+	// inner diameter
+	var di = Math.min(h, w)
+	// outer diameter -- (m)ax
+	var dm = Math.max(h, w)
+	
 	var c = Math.min(this.screenwidth, this.screenheight)
 
 	// change proportions...
 	if(c < threshold){
+		var images = viewer.find('.ribbon .image')
 		var W = viewer.width()
 		var H = viewer.height()
 
+		// inner diameter
+		var Di = Math.min(W, H)
+		// outer diameter -- (m)ax
+		var Dm = Math.max(W, H)
+
 
 		// get dimensional scale....
-		var s = Math.min(W, H) / Math.min(w, h)
+		var s = Di / di 
 		// image dimension delta...
 		var d = 
 			// the maximum difference between image and screen proportions...
-			(Math.max(W, H) / s - Math.min(w, h)) 
+			(Dm / s - di) 
-				// coefficient: 0 @ c == threshold -> 1 @ c == 1
+				// coefficient: 0 : c == threshold  ->  1 : c == 1
 				* (threshold/c - 1)
 		// total size...
-		var n = Math.min(w, h) + d
+		var n = di + d
 
 
-		if(n == Math.max(w, h)){
+		if(n == dm){
 			return
 		}
 
@@ -112,41 +120,41 @@ function updateImageProportions(){
 			that.ribbons.preventTransitions()
 
 			// horizontal viewer...
-			if(Math.min(W, H) == H){
+			if(Di == H){
-				// XXX
+				images
-				viewer.find('.ribbon .image')
+					.each(function(_, img){
-					.css({
+						img.style.width = n + 'px'
-						width: n,
+						img.style.height = ''
-						height: '',
 					})
 
 			// vertical viewer...
 			} else {
-				// XXX
+				images
-				viewer.find('.ribbon .image')
+					.each(function(_, img){
-					.css({
+						img.style.width = ''
-						width: '',
+						img.style.height = n + 'px'
-						height: n,
 					})
 			}
 		
-			that.centerImage()
+			that.ribbons.centerImage()
 
 			that.ribbons.restoreTransitions(true)
 		})
 
 	// reset proportions to square...
 	} else if(w != h) {
+		var images = viewer.find('.ribbon .image')
+
 		getAnimationFrame(function(){
 			that.ribbons.preventTransitions()
 
-			viewer.find('.ribbon .image')
+			images
-				.css({
+				.each(function(_, img){
-					width: '',
+					img.style.width = ''
-					height: '',
+					img.style.height = ''
 				})
 
-			that.centerImage()
+			that.ribbons.centerImage()
 
 			that.ribbons.restoreTransitions(true)
 		})

ui (gen4)/ribbons.js

@@ -2168,6 +2168,8 @@ var RibbonsPrototype = {
 		var W = this.viewer.innerWidth()
 		var H = this.viewer.innerHeight()
 
+		var images = images || this.viewer.find(IMAGE)
+
 		var viewer_p = W > H ? 'landscape' : 'portrait'
 
 		return $(images).each(function(i, e){
@@ -2221,8 +2223,10 @@ var RibbonsPrototype = {
 	// XXX offset and scale are not used...
 	// XXX custom align point woud also be nice... 
 	// 		(top, bottom, center, %, px)
+	// XXX need to account for margins...
 	centerRibbon: function(target, offset, scale){
 		target = this.getImage(target)
+		scale = scale || this.scale()
 		var ribbon_set = this.getRibbonSet() 
 
 		if(ribbon_set.length == 0 || target.length == 0){
@@ -2231,12 +2235,14 @@ var RibbonsPrototype = {
 
 		//this.origin(target)
 		
-		var s = this.scale()
+		var ro = ribbon_set.offset().top
-		var ro = ribbon_set.offset()
+		// NOTE: this appears to account for margins...
-		var io = target.offset()
+		var io = target.offset().top 
-		var h = target.height()
+		var h = target.outerHeight() 
+			+ parseFloat(target.css('margin-top'))
+			+ parseFloat(target.css('margin-bottom'))
 
-		var t = (io.top - ro.top)/s + h/2
+		var t = (io - ro)/scale + h/2
 
 		var offset = this.dom.relativeOffset(this.viewer, ribbon_set, {
 			top: t,
@@ -2253,6 +2259,7 @@ var RibbonsPrototype = {
 	// XXX offset is not used...
 	// XXX custom align point would also be nice... 
 	// 		(top, bottom, center, %, px)
+	// XXX need to account for margins...
 	centerImage: function(target, mode, offset, scale){
 		target = this.getImage(target)
 		scale = scale || this.scale()
@@ -2263,10 +2270,12 @@ var RibbonsPrototype = {
 		}
 
 		var rl = ribbon.offset().left
-		var il = target.offset().left
+		// NOTE: this appears to account for margins...
-		//var rsl = this.getRibbonSet().offset().left
+		var il = target.offset().left 
 		var W = this.viewer.width() * scale
-		var w = target.width() * scale
+		var w = (target.outerWidth()
+			+ parseFloat(target.css('margin-left'))
+			+ parseFloat(target.css('margin-right'))) * scale
 
 		var image_offset = mode == 'before' ? w/2
 			: mode == 'after' ? -w/2