added page align control in full view via CSS classes + defaults...

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

TODO.otl

@@ -8,8 +8,6 @@
 	[_] 67% general todo
 		[_] move some of the current configuration options to the magazine...
 		| same idea as .no-resize class...
-		[_] add option to align page to right or left screen border
-		| now only centering is possible...
 		[_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
 		| will help tuning the system,,,
 		[_] Editor: add toggleEditiorMode to all editables in all versions...
@@ -73,6 +71,8 @@
 		[_] BUG: href to existing anchors will mess up layout...
 		| need to find out how can we disable anchor links from actually
 		| going to the anchor...
+		[X] add option to align page to right or left screen border
+		| now only centering is possible...
 		[X] make #URL updates optional...
 		[X] add click current page to full page view...
 		[X] 100% templates

index.html

@@ -512,28 +512,28 @@ $(document).ready(function(){
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize">
+			<div class="page no-resize page-align-left">
 				<div class="content" style="background:gold">
 					Page
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize">
+			<div class="page no-resize page-align-center">
 				<div class="content" style="background:yellow; width: 600px">
 					Page
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize">
+			<div class="page no-resize page-align-right">
 				<div class="content" style="background:gold; width: 400px">
 					Page
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize">
+			<div class="page no-resize page-align-right">
 				<div class="content" style="background:orange; width: 200px">
 					Page
 
@@ -629,6 +629,14 @@ $(document).ready(function(){
 								<button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
 							</td>
 						</tr>
+						<tr>
+							<td>
+								Enable different size pages (still flaky): 
+							</td>
+							<td>
+								<button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
+							</td>
+						</tr>
 						<tr>
 							<td>
 								Animate window resize: 
@@ -653,14 +661,6 @@ $(document).ready(function(){
 								<button id="viewer_transition_state" onclick="toggleViewerAnimation()"></button>
 							</td>
 						</tr>
-						<tr>
-							<td>
-								Enable different size pages (still flaky): 
-							</td>
-							<td>
-								<button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
-							</td>
-						</tr>
 						<tr>
 							<td>
 								Enable #URL updating on page flip: 

magazine.js

@@ -14,6 +14,16 @@ var PAGES_IN_RIBBON = 4.0
 // if true, expand a page to fit the whole view in single page mode...
 var FIT_PAGE_TO_VIEW = true
 
+// default page alignment in full view...
+// supported values:
+// 	- 'center'
+// 	- 'left'
+// 	- 'right'
+// NOTE: page local align values take priority over this.
+// NOTE: this has no effect on thumbnail view.
+// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true.
+var FULL_PAGE_ALIGN = 'center'
+
 // if true will make page resizes after window resize animated...
 var ANIMATE_WINDOW_RESIZE = true
 
@@ -87,6 +97,17 @@ function updateView(){
 
 /********************************************************* helpers ***/
 
+function getPageAlign(page){
+	if(page == null){
+		page = $('.current.page')
+	}
+	return (page.hasClass('page-align-center') ? 'center' 
+					: page.hasClass('page-align-left') ? 'left' 
+					: page.hasClass('page-align-right') ? 'right' 
+					: FULL_PAGE_ALIGN)
+}
+
+
 function getPageScale(){
 	return getElementScale($('.scaler'))
 }
@@ -326,6 +347,7 @@ function fitNPages(n, fit_to_content){
 	// 		the animation are not correct... so just looking at .position()
 	// 		will be counterproductive...
 	// XXX still there is some error (rounding, page zoom?)...
+	// calculate offset...
 	if(!USE_REAL_PAGE_SIZES && fit_to_content){
 		var offset = rW * getPageNumber()-1
 	} else {
@@ -350,7 +372,21 @@ function fitNPages(n, fit_to_content){
 
 	if(USE_REAL_PAGE_SIZES){
 		if(cur.hasClass('no-resize')){
-			rW = cur.children('.content').width()
+			var align = getPageAlign(cur)
+
+			// center align if explicitly required or if we are in a ribbon...
+			if(n > 1 || align == 'center'){
+				rW = cur.children('.content').width()
+
+			// align left...
+			} else if(align == 'left'){
+				rW = $('.viewer').width()/scale
+
+			// align right...
+			} else if(align == 'right'){
+				var v = $('.viewer')
+				rW = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2 
+			}
 		}
 	}
 
@@ -412,11 +448,26 @@ function setCurrentPage(n, offset, width){
 	} else {
 		var cur = $(n)
 		n = $('.page').index(cur) 
+		//n = page.index(cur) 
 	}
 
 	// default width...
 	if(width == null){
 		width = cur.width()
+		if(USE_REAL_PAGE_SIZES && togglePageView('?') == 'on'){
+			var align = getPageAlign(cur)
+			var scale = getPageScale()
+			if(align == 'center'){
+				width = cur.width()
+
+			} else if(align == 'left'){
+				width = $('.viewer').width()/scale
+
+			} else if(align == 'right'){
+				var v = $('.viewer')
+				width = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2 
+			}
+		}
 	}
 
 	$('.current.page').removeClass('current')
@@ -634,6 +685,7 @@ function prevBookmark(){
 // URL state managers...
 // NOTE: loadURLState will have no side-effects on the URL, it will just 
 // 		get the state from the URL and return it.
+// NOTE: this will also do the apropriate action depending on #URL...
 function loadURLState(){
 	if(window.location.hash == ''){
 		return null