refactored out the getPageTargetScale, now usable in both index and index2...

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

index2.html

@@ -209,8 +209,11 @@ $(document).ready(function(){
 			</div>
 			<div class="page">
 				<div class="content">
+					<div class="header">
 						<h1 name="navigation">PortableMag Navigation and Linking</h1>
-					<div style="float:left; width: 40%; height: 100%; margin: 10px;">
+					</div>
+					<div class="body two-column">
+						<div class="no-column-break">
 							<h2>Finger controls</h2>
 							<ul>
 								<li> Single finger swipe left/right &ndash; prev/next page.
@@ -231,7 +234,7 @@ $(document).ready(function(){
 							</p>
 						</div>
 
-					<div style="float:left; width: 40%; height: 100%; padding: 10px;">
+						<div class="no-column-break">
 							<h3>Special anchors</h3>
 							<p>These show up in the page URL</p>
 							<a href="#home">Magazine cover</a><br>
@@ -242,7 +245,6 @@ $(document).ready(function(){
 								<a href="#hideLayers">Hide all layers</a><br>
 							</span>
 							<a href="#bookmark">Toggle bookmark</a><br>
-
 							<h3>Relative special anchors</h3>
 							<p>These will get replaced by corresponding page numbers in the URL</p>
 							<a href="#next">Next page</a><br>
@@ -253,20 +255,23 @@ $(document).ready(function(){
 							<i>NOTE: this is still a bit flaky...</i><br>
 							<a href="#back">Go back</a><br>
 							<a href="#forward">Go forward</a><br>
-					</div>
-					<div style="position:absolute; right: 30px; bottom:10px;">
-						<a href="#config">configuration demo</a> <a href="#next">next page...</a><br>
-					</div>
-
 
 							<div name="example-layer" class="hidden" onclick="window.location='#example-layer'" style="position:absolute; left:450px; top:250px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: white; color: gray; cursor: hand; opacity: 0.8">
 								<h3>This is an example layer</h3>
 								<i>click or tap to hide</i>
 							</div>
 
+							<p>
+								<a href="#config">configuration demo</a>
+							</p>
+						</div>
+
+					</div>
+					<div class="footer">
 						<div class="page-number-text">[PAGE NUMBER]</div>
 					</div>
 				</div>
+			</div>
 
 			<!-- XXX do we need an Article Credits page??? -->
 
@@ -383,35 +388,92 @@ $(document).ready(function(){
 		<div class="article">
 			<div class="cover page">
 				<div class="content" name="ArticleAnchorExample">
+					<div class="header">
 						<h1>Page Templates</h1>
+					</div>
+					<div class="body">
 
+						<h2>Inline basic macros</h2>
 						<p>
-					This page contains several examples of template fields,
+						This page contains several examples of inline template/macro fields,
-					the first one is the simplest, the magazine name 
+						these are HTML elements whos content will get replaced depending on 
-					(<span class="magazine-title-text">[MAGAZINE NAME]</span>),
+						their class.
-					then we'll have the index (see next) and in the bottom-right
-					corner is the page number...
 						</p>
 
+						<h3>Magazine title</h3>
+						<p>
+						Any element with the class <i>"magazine-title-text"</i> 
+						will be replaced with the magazine title (example:
+						<span class="magazine-title-text">[MAGAZINE NAME]</span>)
+						</p>
+
+						<h3>Page Numer</h3>
+						<p>
+						Any element with a class <i>"page-number-text"</i> will 
+						get replaced with the page number (example: 
+						<span class="page-number-text">#</span>)
+						</p>
+						<p>
+						NOTE: the selector <i>div.page-number-text</i> will
+						put the number at the bottom of the page, this page 
+						number is a good example of this.
+						</p>
+
+						<h3>Article Index</h3>
+						<p>
+						Any element with the class <i>"article-index"</i> will
+						be replaced with the links to all the articles in the 
+						current magazine.
+						</p>
+						<p>
+						Example:<br>
 							<div class="article-index">[ARTICLE INDEX]</div>
+						</p>
 
+					</div>
+					<div class="footer">
 						<div class="page-number-text">[PAGE NUMBER]</div>
 					</div>
 				</div>
+			</div>
 
-			<div class="page" style="background: black; color: white;">
+			<div class="page dark">
 				<div class="content">
+					<div class="header">
 						<h1>Two column</h1>
-					<div style="float:left; width: 45%; height: 100%; margin: 10px;">
-						Column 1
-					</div>
-					<div style="float:left; width: 45%; height: 100%; padding: 10px;">
-						Column 2
 					</div>
+					<div class="body two-column">
 
+						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
+
+					</div>
+					<div class="footer">
 						<div class="page-number-text">[PAGE NUMBER]</div>
 					</div>
 				</div>
+			</div>
+
+			<div class="page light">
+				<div class="content">
+					<div class="header">
+						<h1>Three column</h1>
+					</div>
+					<div class="body three-column">
+
+						<p>
+							Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
+						</p>
+						<p>
+							NOTE: at this point, even and odd pages are aligned slightly to the right or left respectively, book-style.
+						</p>
+
+					</div>
+					<div class="footer">
+						<div class="page-number-text">[PAGE NUMBER]</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="page no-resize page-align-left">
 				<div class="content" style="background:gold">
 					Left-aligned page...

layout.js

@@ -44,16 +44,7 @@ var togglePageView = createCSSClassToggler(
 				var w = page.width()
 				var h = page.height()
 
-				// XXX this is not correct...
+				var scale = getPageTargetScale(1)
-				// 		...need to fit one rectangel (page) into another (viewer)
-				// 		...use the implementation in magazine.js
-				if(W >= H){
-					// fit to width...
-					var scale = W/w
-				} else {
-					// fit to height...
-					var scale = H/h
-				}
 				setMagazineScale(scale)
 				unanimated($('.magazine, .viewer'), togglePageFitMode)('on')
 			} else {
@@ -64,7 +55,7 @@ var togglePageView = createCSSClassToggler(
 				var w = page.width()
 				var h = page.height()
 
-				scale = W/(w*PAGES_IN_RIBBON)
+				var scale = W/(w*PAGES_IN_RIBBON)
 				setMagazineScale(scale)
 			}
 			// NOTE: can't disable transitions on this one because ScrollTo

lib/jli.js

@@ -834,21 +834,22 @@ function makeScrollHandler(root, config){
 	return scroller
 }
 
-
-
 // default callback...
 // This will provide support for the folowing events on the scroll root
 // element:
 // 		- scrollCancelled
+//
 // 		- shortClick
 // 		- doubleClick
 // 		- multiClick
 // 			this will store the number of clicks in data.clicks
 // 		- longClick
+//
 // 		- swipeLeft
 // 		- swipeRight
 // 		- swipeUp
 // 		- swipeDown
+//
 // 		- screenReleased
 //
 // NOTE: data.touches passed to the event is the number of touches 

magazine-themes.css

@@ -185,6 +185,12 @@
 	background: red;
 }
 
+.light.page {
+	background: white;
+	color: black;
+}
+
+
 
 /**************************************************** dark theme ****/
 
@@ -259,6 +265,10 @@
 	background: red;
 }
 
+.dark.page {
+	background: black;
+	color: white;
+}
 
 
 

magazine.css

@@ -502,7 +502,7 @@ body {
 
 /******************************************************* templates ***/
 
-.page-number-text {
+div.page-number-text {
 	position: absolute; 
 	bottom: 10px; 
 	right: 10px;
@@ -541,6 +541,85 @@ body {
 
 
 
+/************************************************** page templates ***/
+
+.page .content .header,
+.page .content .body,
+.page .content .footer {
+	position: relative;
+	width: 80%;
+	left: 13%
+}
+.page:nth-child(even) .content .header,
+.page:nth-child(even) .content .body,
+.page:nth-child(even) .content .footer {
+	left: 7%;
+}
+
+.page .content .header {
+	margin-top: 5%;
+	min-height: 5%;
+	max-height: 15%;
+	top: 0px;
+}
+.page .content .body {
+	max-height: 80%;
+	padding-top: 1%;
+	padding-bottom: 1%;
+}
+.page .content .body p:first-child {
+	margin-top: 0px;
+}
+.page .content .footer {
+	position: absolute;
+	min-height: 5%;
+	max-height: 15%;
+	bottom: 0px;
+	margin-bottom: 5%;
+}
+
+.body .no-column-break {
+	display: inline-block;
+	width: 100%;
+}
+
+.page .content .footer .page-number-text {
+	position: absolute; 
+	bottom: auto; 
+	right: 0px;
+	text-align: right;
+}
+.page:nth-child(even) .content .footer .page-number-text {
+	left: 0px;
+	text-align: left;
+}
+
+/* column layouts */
+.page .content .two-column {
+	column-count: 2;
+	-webkit-column-count: 2;
+	-moz-column-count: 2;
+
+	text-align: justify;
+}
+.page .content .three-column {
+	column-count: 3;
+	-webkit-column-count: 3;
+	-moz-column-count: 3;
+
+	text-align: justify;
+}
+.page .content .four-column {
+	column-count: 4;
+	-webkit-column-count: 4;
+	-moz-column-count: 4;
+
+	text-align: justify;
+}
+
+
+
+
 /*********************************************************************/
 
 body {

magazine.js

@@ -52,6 +52,7 @@ var UPDATE_HASH_URL_POSITION = false
 // NOTE: partial history navigation over links will still work.
 var FULL_HISTORY_ENABLED = false
 
+// if true, use CSS3 transforms to scroll, of false, use left.
 var USE_TRANSFORM = true
 
 
@@ -225,6 +226,69 @@ function getMagazineShift(){
 	return getElementShift($('.magazine')).left
 }
 
+function getPageTargetScale(n, fit_to_content){
+
+	var view = $('.viewer')
+	var content = $('.content')
+	var page = $('.page')
+
+	var W = view.width()
+	var H = view.height()
+	var cW = content.width()
+	var cH = content.height()
+
+	var scale = {
+		value: getPageScale(),
+		width: null,
+		height: null,
+		result_width: cW,
+
+		valueOf: function(){return this.value},
+	}
+
+	if(fit_to_content){
+		if(USE_REAL_PAGE_SIZES){
+			scale.width = 'auto'
+			scale.height = 'auto'
+		} else {
+			scale.width = cW
+			scale.height = cH
+		}
+		if(W/H > (cW*n)/cH){
+			scale.value = H/cH
+		} else {
+			scale.value = W/(cW*n)
+		}
+
+		// resulting page width...
+		scale.result_width = cW
+
+	} else {
+		// need to calc width only...
+		if(W/H > (cW*n)/cH){
+			scale.value = H/cH
+			scale.width = W/scale
+			scale.height = cH
+
+		// need to calc height only...
+		} else if(W/H > (cW*n)/cH){
+			scale.value = W/(cW*n)
+			scale.height = H/scale
+			scale.width = cW
+
+		// set both width and height to defaults (content and page ratios match)...
+		} else {
+			scale.value = W/(cW*n)
+			scale.height = cH
+			scale.width = cW
+		}
+
+		// resulting page width...
+		scale.result_width = W/scale
+	}
+
+	return scale
+}
 
 
 /************************************************** event handlers ***/
@@ -399,54 +463,14 @@ function fitNPages(n, fit_to_content){
 	var cW = content.width()
 	var cH = content.height()
 
-	var rW = cW
-	var scale = getPageScale()
-
-	var target_width
-	var target_height
-
-
 	// to compensate for transitions, no data sampling should be beyound
 	// this point, as we will start changing things next...
 	
-	if(fit_to_content){
+	var scale = getPageTargetScale(n, fit_to_content)
-		if(USE_REAL_PAGE_SIZES){
+	// cache some data...
-			target_width = 'auto'
+	var target_width = scale.width
-			target_height = 'auto'
+	var target_height = scale.height
-		} else {
+	var rW = scale.result_width
-			target_width = cW
-			target_height = cH
-		}
-		if(W/H > (cW*n)/cH){
-			scale = H/cH
-		} else {
-			scale = W/(cW*n)
-		}
-		// resulting page width...
-		var rW = cW
-
-	} else {
-		// need to calc width only...
-		if(W/H > (cW*n)/cH){
-			scale = H/cH
-			target_width = W/scale
-			target_height = cH
-
-		// need to calc height only...
-		} else if(W/H > (cW*n)/cH){
-			scale = W/(cW*n)
-			target_height = H/scale
-			target_width = cW
-
-		// set both width and height to defaults (content and page ratios match)...
-		} else {
-			scale = W/(cW*n)
-			target_height = cH
-			target_width = cW
-		}
-		// resulting page width...
-		var rW = W/scale
-	}
 
 	// NOTE: we need to calculate the offset as the actual widths during 
 	// 		the animation are not correct... so just looking at .position()