fixed a biggish align bug...

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

ui/TODO.otl

@@ -89,8 +89,8 @@ Roadmap
 	
 
 
-[_] 24% Gen 3 current todo
+[_] 25% Gen 3 current todo
-	[_] 49% High priority
+	[_] 51% High priority
 		[_] BUG: sometimes duplicate images get loaded...
 		| this happens when jumping back and forth on the mid ribbon until
 		| the last element shows up and then moving left until the frame
@@ -121,7 +121,7 @@ Roadmap
 		| 			prior sizing after recycling...
 		| 			...check if centerRibbon(...) and correctImageProportionsForRotation(...)
 		| 			are called in right sequence...
-		[_] BUG: changing window size (F11) in single image modes messes things up...
+		[X] BUG: changing window size (F11) in single image modes messes things up...
 		| some images are of different sizes (newly loaded) and aligned in a wrong way...
 		|
 		| appears not to affect square-fit view...
@@ -136,6 +136,7 @@ Roadmap
 		| appears to be a state leak, this affects:
 		| 	- correctImageProportionsForRotation(image) -- mis-alignes images
 		| 	  while after cycling single image mode, behaves correctly...
+		| 	- affects finNImages(...) -- uses old size of viewer...
 		[_] BUG: jumping screen images does not load the adjacent ribbons...
 		| positioning is OK but ribbons are not fully visible...
 		[_] ASAP: test on Android...

ui/base.js

@@ -924,26 +924,17 @@ function nextRibbon(mode){
 
 /******************************************************** Rotating ***/
 
+// Compensate for viewer proportioned and rotated images.
+//
+// NOTE: this is not neede for square image blocks.
 function correctImageProportionsForRotation(images){
 	var viewer = $('.viewer')
 	var W = viewer.innerWidth()
 	var H = viewer.innerHeight()
-	// NOTE: this is here because we are comparing proportions of two 
-	// 		very differently sized elements, and though the proportions 
-	// 		may be the same, the actual result may be vastly different
-	// 		due of pixel rounding...
-	// 			Real example:
-	// 				Viewer:	826x601
-	// 				Image: 413x300
-	// 					ratio 1:  W/H - w/h = -0.002290626733222556
-	// 					ratio 2: W/w - H/h = -0.0033333333333334103
-	// NOTE: this might get out of hand for close to square viewer...
-	// 		...one way to cheat out of this is to round any ratio
-	// 		close to 1 to 1.
-	// XXX find a better way out of this, avoiding floats...
-	var rounding_error = 0.007
 
-	$(images).each(function(i, e){
+	var viewer_p = W > H ? 'landscape' : 'portrait'
+
+	return $(images).each(function(i, e){
 		var image = $(this)
 		// orientation...
 		var o = image.attr('orientation')
@@ -953,11 +944,12 @@ function correctImageProportionsForRotation(images){
 
 		// non-square image...
 		if(w != h){
-			var proportions = W/H - w/h
+
+			var image_p = w > h ? 'landscape' : 'portrait'
 
 			// when the image is turned 90deg/270deg and its 
 			// proportions are the same as the screen...
-			if((o == 90 || o == 270) && Math.abs(proportions) < rounding_error ){
+			if((o == 90 || o == 270) && image_p == viewer_p){
 				image.css({
 					width: h,
 					height: w,
@@ -968,7 +960,8 @@ function correctImageProportionsForRotation(images){
 					'margin-left': (w - h)/2,
 					'margin-right': (w - h)/2,
 				})
-			} else if((o == 0 || o == 180) && Math.abs(proportions) > rounding_error ){
+
+			} else if((o == 0 || o == 180) && image_p != viewer_p){
 				image.css({
 					width: h,
 					height: w,
@@ -1053,13 +1046,16 @@ function fitNImages(n){
 	var W = viewer.innerWidth()
 	var H = viewer.innerHeight()
 
+	// XXX this may not work correctly for portrait proportioned viewers...
 	var scale = Math.min(W / (w * n), H / h)
 
 	// NOTE: if animating, the next two likes must be animated together...
 	setElementScale($('.ribbon-set'), scale)
 	centerView(image, 'css')
 
-	$('.viewer').trigger('fittingImages', [n])
+	viewer.trigger('fittingImages', [n])
+
+	return scale
 }
 
 

ui/index.html

@@ -54,7 +54,8 @@ $(function(){
 		// XXX in single image mode this still causes problems...
 		//		this can be resolved by cycling to ribbon mode and back...
 		.resize(function() {
-			correctImageProportionsForRotation('.images')
+
+			toggleImageProportions('!')
 			centerView()
 		})
 		

ui/lib/jli.js

@@ -33,11 +33,13 @@
 // 	- <index>		: 0 for 'off' and 1 for 'on' (see below)
 // 	- 'on'			: switch mode on -- add class
 // 	- 'off'			: switch mode off -- remove class
+// 	- '!'			: reload current state, same as toggler(toggler('?'))
 // 	- '?'			: return current state ('on'|'off')
 //
 // In forms 2 and 3, if class_list is a list of strings, the <action> can be:
 //  - <index>		: explicitly set the state to index in class_list
 //  - <class-name>	: explicitly set a class from the list
+// 	- '!'			: reload current state, same as toggler(toggler('?'))
 // 	- '?'			: return current state ('on'|'off')
 // 
 // In the third form the <target> is a jquery-compatible object.
@@ -122,7 +124,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 			}
 		}
 		// we need to get the current state...
-		if(action == null || action == '?'){
+		if(action == null || action == '?' || action == '!'){
 			// get current state...
 			var cur = 'none'
 			for(var i=0; i < class_list.length; i++){
@@ -136,6 +138,11 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 				return bool_action ? (cur == 'none' ? 'off' : 'on') : cur
 			}
 
+			// force reload of current state...
+			if(action == '!'){
+				action = bool_action ? (cur == 'none' ? 'off' : 'on') : cur
+			}
+
 		// invalid action...
 		} else if((bool_action && ['on', 'off'].indexOf(action) == -1)
 				|| (!bool_action && class_list.indexOf(action) == -1)){
@@ -163,7 +170,8 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 		if(callback_pre != null){
 			if(callback_pre.call(this, action) === false){
 				// XXX should we return action here???
-				return
+				//return
+				return action
 			}
 		}
 		// update the element...

ui/modes.js

@@ -159,7 +159,7 @@ var toggleSingleImageMode = createCSSClassToggler(
 				w = SETTINGS['screen-images-ribbon-mode']
 				w = w == null ? DEFAULT_SCREEN_IMAGES : w
 
-				toggleImageProportions('fit-square')
+				toggleImageProportions('none')
 				fitNImages(w)
 				var i = SETTINGS['image-info-ribbon-mode'] == 'on' ? 'on' : 'off'
 				toggleImageInfo(i)
@@ -260,7 +260,7 @@ var toggleInlineImageInfo = createCSSClassToggler(
 var toggleImageProportions = createCSSClassToggler(
 		'.viewer',
 		[
-			'fit-square',
+			'none',
 			'fit-viewer'
 		],
 		function(action){