rewritten page sizing and scaling, appears to be bug-free...

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

magazine.css

@@ -17,15 +17,15 @@ body {
 	/* XXX make this browser-sized... */
 	display: inline-block;
 	vertical-align: bottom;
-	text-align: center;
+	text-align: left;
 	overflow: hidden;
 
 	/* XXX need these to be the same as the magazine, for some reason does not work...
 	 *	one way to go is to use a fixed page layout and scale things manually.
 	 */
 	
-	width: 800px;
+	width: auto;
-	height: 600px;
+	height: auto;
 	/* change to relative units... */
 	margin-top: -300px;
 
@@ -49,11 +49,6 @@ body {
 	width: 800px;
 	height: 600px;
 
-	top: 50%;
-	/* change to relative units... */
-	margin-top: -300px;
-
-
 	-webkit-transition: all 0.2s ease;
 	-moz-transition: all 0.2s ease;
 	-o-transition: all 0.2s ease;
@@ -61,6 +56,15 @@ body {
 	transition: all 0.2s ease;
 }
 
+.page-view-mode .page {
+	text-align: center;
+
+	width: 800px;
+}
+
+.page-view-mode .page .content {
+}
+
 /* general layout */
 
 .viewer {
@@ -110,7 +114,8 @@ body {
 	vertical-align: bottom;
 	top: 50%;
 
-	/* change to relative units... */
+	/* XXX change to relative units... */
+	/* this is minus half the page width */
 	margin-left: -400px;
 
 	-webkit-transition: all 0.2s ease;

magazine.js

@@ -15,7 +15,7 @@ togglePageDragging = createCSSClassToggler(
 	'dragging')
 
 
-var FIT_PAGE_TO_VIEW = true
+var FIT_PAGE_TO_VIEW = false
 
 togglePageView = createCSSClassToggler(
 	'.viewer', 
@@ -25,24 +25,10 @@ togglePageView = createCSSClassToggler(
 	function(){
 		if(togglePageView('?') == 'on'){
 			PAGES_VISIBLE = 1
-			if(FIT_PAGE_TO_VIEW){
+			fitNPages(PAGES_VISIBLE)
-				fitPagesToViewer(PAGES_VISIBLE)
-			} else {
-				fitNPages(PAGES_VISIBLE)
-				// to prevent drag while zooming to affect
-				// the resulting position set it to current 
-				// page...
-				// XXX now this is done by fitNPages
-				setCurrentPage()
-			}
 		} else {
 			PAGES_VISIBLE = PAGES_IN_RIBBON
-			if(FIT_PAGE_TO_VIEW){
+			fitNPages(PAGES_VISIBLE)
-				// XXX this needs to be done before transitions...
-				fitPagesToContent(PAGES_VISIBLE)
-			} else {
-				fitNPages(PAGES_VISIBLE)
-			}
 		}
 	})
 
@@ -50,110 +36,70 @@ function getPageScale(){
 	return getElementScale($('.scaler'))
 }
 
-function fitNPages(n){
+
-	if(n==null){
+// XXX for some magical reason this is not called...
+function fitNPages(n, fit_to_content){
+	if(n == null){
 		n = 1
 	}
-	var pages = $('.page')
+	if(n > 1 && fit_to_content == null){
+		fit_to_content = true
+	}
 	var view = $('.viewer')
+	var page = $('.page')
+	var content = $('.content')
+
 	var W = view.width()
 	var H = view.height()
-	var w = pages.width()
-	var h = pages.height()
-
-	var scale = W/(w*n)
-
-	// fit vertically if needed...
-	if(h*scale > H){
-		scale = H/h
-	}
-
-	setElementScale($('.scaler'), scale)
-
-	/* XXX
-	fitPagesTo(null, n)
-	*/
-}
-
-// NOTE: this is a single big function because we need to thread data 
-//		through to avoid sampling while animating...
-// XXX try and do the fitting with pure CSS...
-// XXX BUG: changing width when content is constrained only horizontally
-//		breaks this...
-function fitPagesTo(elem, n){
-	if(n==null){
-		n = 1
-	}
-	var pages = $('.page')
-	var view = $('.viewer')
-	var content = $('.content')
-	if(elem == null){
-		elem = view
-	} else {
-		elem = $(elem)
-	}
-
-	// sample data...
-	var vW = view.width()
-	var vH = view.height()
 	var cW = content.width()
 	var cH = content.height()
-	var W = elem.width()
-	var H = elem.height()
-	var w = pages.width()
-	var h = pages.height()
-	var rW = w
-	var rH = h
 
-	// NOTE: there must be no data sampling after this point...
+	var rW = cW
-	//		this is due to the fact that we will start changing stuff next
+	var scale = getPageScale()
-	//		and if CSS transitions are at play new samples will be off...
 
-
+	if(fit_to_content){
-	// XXX fitting works ONLY in one direction, if both sides need 
+		// resulting page width...
-	//		to be adjusted the this breaks everything...
+		page.width(cW)
-
+		page.height(cH)
-	// do the fitting...
+		if(W/H > (cW*n)/cH){
-	if(W-cW/H-cH > 1){
+			scale = H/cH
-		rW = W * (cH/H) 
+		} else {
-		pages.width(rW)
+			scale = W/(cW*n)
-		pages.height(cH)
+		}
-		$('.magazine').css({
+		var rW = cW
-			'margin-left': -rW/2
+	} else {
-		})
+		// need to calc width only...
-	} 
+		if(W/H > (cW*n)/cH){
-	if(W-cW/H-cH < 1){
+			scale = H/cH
-		rH = H * (cW/W)
+			page.width(W/scale)
-		pages.height(rH)
+			page.height(cH)
-		pages.width(cW)
+		// need to calc height only...
-		$('.page').css({
+		} else if(W/H > (cW*n)/cH){
-			'margin-top': -rH/2
+			scale = W/(cW*n)
-		})
+			page.height(H/scale)
+			page.width(cW)
+		// set both width and height to defaults (content and page ratios match)...
+		} else {
+			scale = W/(cW*n)
+			page.height(cH)
+			page.width(cW)
+		}
+		// resulting page width...
+		var rW = W/scale
 	}
 
-	// scale horizontally...
+	// position the pages correctly...
-	// NOTE: this is done so as to keep the scale within the content constant...
+	$('.magazine').css({
-	var scale = vW/(rW*n)
+		'margin-left': -rW/2
-	// or scale vertically if needed...
+	})
-	// XXX broken
-	//if(rH*scale > vH){
-	//	scale = vH/rH
-	//}
 
+	// do the scaling... 
 	setElementScale($('.scaler'), scale)
-	// update position using the new width...
+	// fix position...
 	setCurrentPage(null, rW)
 }
 
 
-function fitPagesToViewer(n){
-	fitPagesTo('.viewer', n)
-}
-function fitPagesToContent(n){
-	fitPagesTo('.page .content', n)
-}
-
-
 function swipeHandler(evt, phase, direction, distance, duration, fingers){
 	var pages = $('.page')
 	var cur = $('.current.page')