Page
diff --git a/magazine.css b/magazine.css
index ca8b4d4..cad0ea2 100755
--- a/magazine.css
+++ b/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 {
diff --git a/magazine.js b/magazine.js
index 7a833ce..76284ba 100755
--- a/magazine.js
+++ b/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){
-
- }
- })
}