added cover/end hints before and after the magazine...

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

TODO.otl

@@ -1,4 +1,4 @@
-[_] 29% Priority work
+[_] 35% Priority work
 	[_] 50% general todo
 		[_] make layer default state configurable...
 		| e.g. setting "shown"/"hidden" classes in HTML and adding 
@@ -45,7 +45,7 @@
 			[_] 0% issue download
 				[_] whole edition dowload and update (primary mode)
 				[_] seporate issue download (secondary)
-	[_] 0% stage 2 - templates and examples
+	[_] 25% stage 2 - templates and examples
 		[_] 0% default cover templates
 		[_] 0% default page templates
 		| a template is a class and predefined content...
@@ -70,8 +70,8 @@
 			[_] text with title
 			[_] text with image
 			[_] plain
-		[_] 0% default actions
+		[X] 100% default actions
-			[_] show in overlay
+			[X] show/hide layer
 	[_] 0% stage 3 - advanced features
 		[_] 0% edition editor / publisher
 			[_] create/delete edition

index.html

@@ -30,7 +30,7 @@ $(document).ready(function(){
 
 	$('.viewer')
 		.swipe({
-			swipeStatus: swipeUpdate,
+			swipeStatus: swipeHandler,
 			// XXX change this to pinch...
 			swipeUp: function(){
 				//togglePageView('off')
@@ -74,6 +74,8 @@ $(document).ready(function(){
 
 			fingers: $.fn.swipe.fingers.ALL
 		})
+
+	// XXX do we need these here??
 	$('.button.cover').swipe({click: goToMagazineCover})
 	$('.button.next-article').swipe({click: nextArticle})
 	$('.button.prev-article').swipe({click: prevArticle})
@@ -141,8 +143,8 @@ $(document).ready(function(){
 					<a href="#1">Page #1</a><br>
 					<a href="#ArticleAnchorExample">Named page</a><br>
 					<p>
-						<a href="#page-3-anchor">Anchor on page #3</a><br>
+						<a href="#page-3-anchor" style="pointer-events:none">Anchor on page #3</a><br>
-						<i>BUG: currently navigation via existing anchors
+						<i> currently navigation via existing anchors
 							will break the layout, so use the name attribute
 							on any other tags (see example).
 						</i>

magazine.css

@@ -125,6 +125,51 @@ body {
 	background: white;
 }
 
+.magazine:before {
+	position: absolute;
+	display: inline-block;
+	text-align: center;
+
+	height: 300px;
+	width: 600px;
+	left: -300px;
+	top: -50%;
+
+	content: 'COVER';
+	font-weight: bold;
+	font-size: 150px;
+
+	color: #888;
+
+	-webkit-transform: rotate(-90deg);
+	-moz-transform: rotate(-90deg);
+	-o-transform: rotate(-90deg);
+	-ms-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+}
+.magazine:after {
+	position: absolute;
+	display: inline-block;
+	text-align: center;
+
+	height: 300px;
+	width: 600px;
+	right: -450px;
+	top: -50%;
+
+	content: 'END';
+	font-weight: bold;
+	font-size: 150px;
+
+	color: #888;
+
+	-webkit-transform: rotate(-90deg);
+	-moz-transform: rotate(-90deg);
+	-o-transform: rotate(-90deg);
+	-ms-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+}
+
 .article {
 	width: auto;
 	overflow: visible;

magazine.js

@@ -314,7 +314,7 @@ function fitPagesToContent(n){
 }
 
 
-function swipeUpdate(evt, phase, direction, distance, duration, fingers){
+function swipeHandler(evt, phase, direction, distance, duration, fingers){
 	var pages = $('.page')
 	var cur = $('.current.page')
 	var n = pages.index(cur)
@@ -421,7 +421,7 @@ function goToArticleCover(){
 
 function nextArticle(){
 	var cur = $('.current.page').parents('.article')
-	// we are at the magazine cover cover...
+	// we are at the magazine cover...
 	if(cur.length == 0){
 		return setCurrentPage(
 			$('.article .page:first-child').first())
@@ -437,9 +437,10 @@ function nextArticle(){
 // XXX this is almost exactly the same as nextArticle...
 function prevArticle(){
 	var cur = $('.current.page').parents('.article')
-	// we are at the magazine cover cover...
+	// we are at the magazine cover...
 	if(cur.length == 0){
-		return $('.current.page')
+		//return $('.current.page')
+		return setCurrentPage()
 	}
 	// just find the prev one...
 	var articles = $('.article')