almost finished the navigator (only dragging is not done)...

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

index.html

@@ -118,13 +118,8 @@ $(document).ready(function(){
 		<div class="button next-article">Next Article</div>
 	</div>
 	<div class="bottom-toolbar">
-		<!-- position indicator -->
-		<div class="navigator">
-			<div class="bar">
-				<div class="indicator"></div>
-			</div>
-		</div>
 		<!-- this is just an example-->
+		<div class="controls">
 			<a href="#home">Cover</a> |
 			<a href="#prevArticle">Previous article</a> |
 			<a href="#prev">Previous page</a> |
@@ -132,6 +127,13 @@ $(document).ready(function(){
 			<a href="#nextArticle">Next article</a> |
 			<a href="#end">End</a>
 		</div>
+		<!-- position indicator -->
+		<div class="navigator">
+			<div class="bar">
+				<div class="indicator"></div>
+			</div>
+		</div>
+	</div>
 
 <div class="scaler">
 <div class="aligner">
@@ -314,21 +316,6 @@ $(document).ready(function(){
 				</div>
 			</div>
 
-			<div class="page">
-				<div class="content">
-					Page
-				</div>
-			</div>
-			<div class="page">
-				<div class="content">
-					Page
-				</div>
-			</div>
-			<div class="page">
-				<div class="content">
-					Page
-				</div>
-			</div>
 			<div class="page">
 				<div class="content">
 					Page

magazine.css

@@ -139,6 +139,13 @@ body {
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
 }
+.dragging .magazine {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	-ms-transition: none;	
+	transition: none;
+}
 /* user hints, visible when user draggs past the cover or the last page
  * of the mag... */
 .magazine:before, .magazine:after {
@@ -203,7 +210,7 @@ body {
 	background: black;
 	opacity: 0.4;
 
-	height: 70px;
+	height: 50px;
 	left: 0px;
 
 	font-size: 14px;
@@ -213,6 +220,10 @@ body {
 	color: white;
 	text-decoration: none;
 }
+.top-toolbar .controls, .bottom-toolbar .controls {
+	margin-top: 10px;
+	font-size: small;
+}
 .top-toolbar {
 	top: 0px;
 	width: 100%;
@@ -241,6 +252,8 @@ body {
 	height: 0px;
 }
 
+
+
 /* navigator... */
 .navigator {
 }
@@ -248,12 +261,10 @@ body {
 	position: relative;
 	display: inline-block;
 	margin: 10px;
-	width: 50%;
-	height: 5px;
+	width: 400px;
+	height: 2px;
 	background: silver;
 	overflow: visible;
-
-	cursor: hand;
 }
 .navigator .bar .article,
 .navigator .bar .indicator {
@@ -265,14 +276,30 @@ body {
 }
 .navigator .bar .article {
 	background: white;
+	height: 300%;
+	cursor: hand;
 }
 .navigator .bar .indicator {
 	background: yellow;
-	height: 200%;
+	height: 500%;
+	top:-50%;
 
 	opacity: 0.7;
+
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;	
+	transition: all 0.2s ease;
 }
 
+.dragging .navigator .bar .indicator {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	-ms-transition: none;	
+	transition: none;
+}
 
 /* splash screen. used to hide loading and aligning elements */
 .splash {

magazine.js

@@ -120,6 +120,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
 	var n = pages.index(cur)
 	var scale = getPageScale()
 	var mag = $('.magazine')
+	var pos = $('.navigator .bar .indicator')
 
 	if(phase=='move' 
 			// see if wee need to drag the page and allways drag the ribbon...
@@ -136,16 +137,13 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
 
 	} else if(phase == 'start'){
 		togglePageDragging('on')
-		mag.addClass('unanimated')
 
 	} else if(phase == 'cancel'){
 		togglePageDragging('off')
 		setCurrentPage()
-		mag.removeClass('unanimated')
 
 	} else if(phase =='end' ){
 		togglePageDragging('off')
-		mag.removeClass('unanimated')
 		// see which page is closer to the middle of the screen and set it...
 		// do this based on how much we dragged...
 		var p = Math.ceil((distance/scale)/cur.width())
@@ -461,6 +459,9 @@ function makeArticleIndicator(i, article, width){
 			width: width,
 			left: width*n
 		})
+		.click(function(){
+			setCurrentPage(n)
+		})
 	return article
 }
 
@@ -493,11 +494,6 @@ function setupNavigator(){
 	
 	// setup event handlers...
 	mag.on('pageChanged', function(e, n){updateNavigator(n)})
-	bar.swipe({
-		click: function(evt){
-			
-		}
-	})
 }