flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-28 18:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-27 18:24:30 +04:00
parent 99bb48b2d1
commit 78de7900f0
3 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -118,19 +118,21 @@ $(document).ready(function(){
<div class="button next-article">Next Article</div>
</div>
<div class="bottom-toolbar">
<!-- 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> |
<a href="#next">Next page</a> |
<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>
<!-- this is just an example-->
<a href="#home">Cover</a> |
<a href="#prevArticle">Previous article</a> |
<a href="#prev">Previous page</a> |
<a href="#next">Next page</a> |
<a href="#nextArticle">Next article</a> |
<a href="#end">End</a>
</div>
<div class="scaler">
@ -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

39
magazine.css
View File

@ -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 {

12
magazine.js
View File

@ -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){
}
})
}