some more refactoring, generalized the no-resize css class family (now there is no need to always explicitly include .no-resize), added a caption page template (still needs some tweeking)...

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

index.html

@@ -746,32 +746,30 @@ $(document).ready(function(){
 				</div>
 			</div>
 
-			<div class="page no-resize page-align-left">
+			<div class="page page-align-left">
 				<div class="content" style="background:gold">
 					Left-aligned page...
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize page-align-center">
+			<div class="page page-align-center">
 				<div class="content" style="background:yellow; width: 600px">
 					Center-aligned page...
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize page-align-right">
+			<div class="page page-align-right">
 				<div class="content" style="background:gold; width: 400px">
 					Right-aligned page...
 
 					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
-			<div class="page no-resize page-align-right">
+			<div class="page page-align-right caption-bottom-arrow light">
-				<div class="content" style="background:orange; width: 200px">
+				<div class="content" style="width: 200px">
 					Right-aligned page...
-
-					<div class="page-number-text">[PAGE NUMBER]</div>
 				</div>
 			</div>
 		</div>

layout.js

@@ -10,7 +10,6 @@ var DEFAULT_TRANSITION_DURATION = 200
 var INNERTIA_SCALE = 0.25
 
 
-
 /********************************************************** layout ***/
 
 var toggleThemes = createCSSClassToggler('.chrome', [
@@ -28,11 +27,11 @@ var togglePageFitMode = createCSSClassToggler(
 			if(action == 'on'){
 				var n = getPageNumber()
 				var scale = getMagazineScale()
-				$('.page:not(.no-resize)')
+				$(RESIZABLE_PAGES)
 					.width($('.viewer').width() / scale)
 			} else {
 				var n = getPageNumber()
-				$('.page:not(.no-resize)').width('')
+				$(RESIZABLE_PAGES).width('')
 			}
 			setCurrentPage(n)
 		})

magazine.css

@@ -617,6 +617,58 @@ div.page-number-text {
 
 
 
+.page.caption-top-arrow,
+.page.caption-bottom-arrow {
+	overflow: visible;
+}
+.page.caption-top-arrow .content,
+.page.caption-bottom-arrow .content {
+	background: white;
+}
+.page.caption-top-arrow:before,
+.page.caption-bottom-arrow:before {
+	position: absolute;
+	content: "";
+	font-size: 0px;
+	width: 50px;
+	height: 50px;
+
+	left:-25px;
+
+	background: white;
+
+	cursor: hand;
+
+	box-shadow: 20px -20px 50px 0px #000;
+
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+.page.caption-top-arrow:before {
+	/* this is for when we do not need to care about bookmarks...
+	top: 10px;*/
+	top: 50px;
+}
+.page.caption-bottom-arrow:before {
+	/*bottom: 10px;*/
+	bottom: 50px;
+	
+}
+
+.current.page.caption-top-arrow,
+.current.page.caption-bottom-arrow {
+	box-shadow: 30px 0px 100px 0px #000;
+}
+.current.page.caption-top-arrow:before,
+.current.page.caption-bottom-arrow:before {
+	box-shadow: 20px -20px 30px 10px #000;
+}
+
+
+
 
 /*********************************************************************/
 

magazine.js

@@ -12,8 +12,8 @@
 var PAGES_IN_RIBBON = 4.0
 
 // if true, expand a page to fit the whole view in single page mode...
-// NOTE: if .no-resize is set on a page then this will not have effect
+// NOTE: if one of the NO_RESIZE_CLASSES is set on a page then this 
-// 		on the that page...
+// 		will not have effect on the that page...
 var FIT_PAGE_TO_VIEW = true
 
 // if false, this will force all pages to be fit to screen size in full 
@@ -28,7 +28,7 @@ var USE_REAL_PAGE_SIZES = true
 // 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 and a page has 
-// 		no-resize class set.
+// 		one of the NO_RESIZE_CLASSES classes set.
 // 		also, USE_REAL_PAGE_SIZES if set to false will make this have 
 // 		no effect.
 var FULL_PAGE_ALIGN = 'center'
@@ -55,6 +55,25 @@ var FULL_HISTORY_ENABLED = false
 // if true, use CSS3 transforms to scroll, of false, use left.
 var USE_TRANSFORM = true
 
+// list of css classes of pages that will not allow page fitting.
+var NO_RESIZE_CLASSES = [
+	'no-resize',
+	'page-align-left',
+	'page-align-center',
+	'page-align-right',
+	'caption-top-arrow',
+	'caption-bottom-arrow'
+]
+// NOTE: to alter the following, just update the NO_RESIZE_CLASSES above...
+var RESIZABLE_PAGES = '.page' + ($(NO_RESIZE_CLASSES)
+							.map(function(_, e){ return ':not(.' + e + ')' })
+							.toArray()
+							.join(''))
+var NON_RESIZABLE_PAGES = $(NO_RESIZE_CLASSES)
+							.map(function(_, e){ return '.page.' + e + '' })
+							.toArray()
+							.join(', ')
+
 
 
 /*********************************************************** modes ***/
@@ -129,7 +148,10 @@ function isPageResizable(page){
 	var article = page.parents('.article').first()
 
 	// first check the page...
-	return (page.hasClass('no-resize') ? false 
+	// NOTE: check for all classes that make the page unresizable...
+	return ($(NO_RESIZE_CLASSES)
+				.filter(function(){ return page.hasClass(this) })
+				.length > 0 ? false 
 			// then the group...
 			: group.hasClass('no-resize') ? false
 			// then the article...
@@ -448,7 +470,7 @@ function fitNPages(n, fit_to_content){
 	}
 	var view = $('.viewer')
 	if(USE_REAL_PAGE_SIZES){
-		var page = $('.page:not(.no-resize)')
+		var page = $(RESIZABLE_PAGES)
 	} else {
 		var page = $('.page')
 	}
@@ -477,7 +499,7 @@ function fitNPages(n, fit_to_content){
 	} else {
 		// calculate the target offset...
 		if(USE_REAL_PAGE_SIZES){
-			var rpages = $('.page:not(.no-resize), .current.page')
+			var rpages = $(RESIZABLE_PAGES+', .current.page')
 		} else {
 			var rpages = page 
 		}
@@ -485,7 +507,7 @@ function fitNPages(n, fit_to_content){
 		var offset = rW * i-1
 		// now do the no-resize elements...
 		if(USE_REAL_PAGE_SIZES){
-			var nrpages = $('.page.no-resize, .current.page')
+			var nrpages = $(NON_RESIZABLE_PAGES+', .current.page')
 			i = nrpages.index(cur) 
 			nrpages.splice(i)
 			nrpages.each(function(_, e){
@@ -496,7 +518,7 @@ function fitNPages(n, fit_to_content){
 
 	// align the magazine...
 	if(USE_REAL_PAGE_SIZES){
-		if(cur.hasClass('no-resize')){
+		if(!isPageResizable(cur)){
 			var align = getPageAlign(cur)
 
 			// center align if explicitly required or if we are in a ribbon...
@@ -526,7 +548,7 @@ function fitNPages(n, fit_to_content){
 	//	.width(target_width)
 	//	.height(target_height)
 	//if(USE_REAL_PAGE_SIZES){
-	//	$('.page.no-resize').width('auto')
+	//	$(NON_RESIZABLE_PAGES).width('auto')
 	//}
 
 	// NOTE: we only need the .scaler animated, the rest just plays havoc with
@@ -548,8 +570,8 @@ function fitNPages(n, fit_to_content){
 			}
 		})
 		if(USE_REAL_PAGE_SIZES){
-			//$('.page.no-resize').width('auto')
+			//$(NON_RESIZABLE_PAGES).width('auto')
-			$('.page.no-resize').each(function(_, e){
+			$(NON_RESIZABLE_PAGES).each(function(_, e){
 				e.style.width = 'auto'
 			})
 		}