From 436fd8044035c99cf23e0b3bcf5253a7ba39d768 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sat, 2 Apr 2016 22:53:56 +0300
Subject: [PATCH] refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/features/ui-single-image.js | 50 ++++++++++++++++++++++++++-
 ui (gen4)/ribbons.js                  | 33 ++++--------------
 2 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js
index 9f3600bf..82785cfd 100755
--- a/ui (gen4)/features/ui-single-image.js	
+++ b/ui (gen4)/features/ui-single-image.js	
@@ -86,7 +86,55 @@ var core = require('features/core')
 //
 // XXX should this be an action???
 function updateImageProportions(){
-	// XXX
+	var viewer = this.ribbons.viewer
+	var image = viewer.find('.image')
+
+	var W = viewer.width()
+	var H = viewer.height()
+	var w = image.width()
+	var h = image.height()
+
+	var R = W/H
+	var r = w/h
+
+	var threshold = 3
+	var scale = Math.min(this.screenwidth, this.screenheight)
+
+	// XXX the idea is that:
+	// 		- up until a specific threshold:
+	// 			r is 1 
+	// 			we do not care about R
+	// 			XXX how do we define the threshold???
+	// 		- above that threshold:
+	// 			r tends to R relative to ???
+	// 		- when W == w && H == h
+	// 			r == R
+	// 		- beyond 
+	// 			r tends to actual image proportions
+	// 		- when (W == w || H == h) && r == actual image proportions
+	// 			we change nothing...
+	
+	// reset image proportions to square...
+	if(scale > threshold){
+		image.css({
+			width: '',
+			height: '',
+		})
+
+	// shift image container proportions between 1 and R, from threshold
+	// scale to 1...
+	} else if(scale >= 1){
+		// XXX
+	
+	// shift image container proportions between R and actual image 
+	// proportions...
+	} else if(W != w || H != h){
+		// XXX
+
+	// image container proportions are the same as image proportions...
+	} else {
+		// XXX
+	}
 }
 
 
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 0abb9f68..7f306b14 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -1277,9 +1277,12 @@ var RibbonsPrototype = {
 		// NOTE: this will make images load without a blackout...
 		var img = new Image()
 		img.onload = function(){
-			image.css({
-					'background-image': 'url("'+ url +'")',
-				})
+			var i = image[0]
+			i.style.backgroundImage = 'url("'+ url +'")',
+
+			// NOTE: these do not account for rotation...
+			i.setAttribute('preview-width', img.width)
+			i.setAttribute('preview-height', img.height)
 		}
 		img.src = url
 		return img
@@ -1379,7 +1382,7 @@ var RibbonsPrototype = {
 				// error, recursive group...
 				if(seen.indexOf(img_data.id) >= 0){
 					img_data = images.IMAGE_DATA
-					console.error('Recursice group:', gid)
+					console.error('Recursive group:', gid)
 					break
 				}
 				seen.push(img_data.id)
@@ -1387,28 +1390,6 @@ var RibbonsPrototype = {
 				img_data = that.images[img_data.cover]
 			}
 
-			/* XXX does not seem to be needing this...
-			// set the current class...
-			if(gid == DATA.current){
-				image.addClass('current')
-			} else {
-				image.removeClass('current')
-			}
-			*/
-
-			/*
-			// main attrs...
-			image
-				.attr({
-					orientation: [null, 0].indexOf(img_data.orientation) < 0 
-						? img_data.orientation,
-						: null 
-					flipped: img_data.flipped != null 
-						? img_data.flipped.join(', '),
-						: null 
-				})
-			*/
-
 			// image state...
 			that.rotateImage(image, img_data.orientation == null ? 0 : img_data.orientation)
 			that.flipImage(image, img_data.flipped == null ? [] : img_data.flipped)