added basic paging, still not aligning as we should, still untested with scaling...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-14 05:47:25 +04:00
parent 71d323fe3a
commit 6af37f65c1
2 changed files with 14 additions and 6 deletions

View File

@ -4,6 +4,7 @@
<head> <head>
<title>PortableMag</title> <title>PortableMag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="magazine.css"> <link rel="stylesheet" href="magazine.css">
<link rel="stylesheet" href="magazine-themes.css"> <link rel="stylesheet" href="magazine-themes.css">
@ -133,10 +134,14 @@ $(document).ready(function(){
snap: '.page', snap: '.page',
momentum: false, momentum: false,
hScrollbar: false, hScrollbar: false,
/*onScrollEnd: function () { onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = ''; var n = getPageNumber()
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; var page = $($('.page')[n])
}*/ $('.current.page').removeClass('current')
page.addClass('current')
// XXX need to calc the propper offset...
myScroll.scrollToElement(page.offset(), 40)
}
}) })

View File

@ -91,15 +91,18 @@ function getPageNumber(page){
// get the closest page to view... // get the closest page to view...
} else { } else {
// XXX this gets crazy when magazine is scaled... // XXX this gets crazy when magazine is scaled...
var s = $('.viewer').scrollLeft() //var s = $('.viewer').scrollLeft()
var o = -$($('.magazine')[0]).offset().left - $('.viewer').offset().left
var W = $('.viewer').width() var W = $('.viewer').width()
var scale = getMagazineScale() var scale = getMagazineScale()
var cur = -1 var cur = -1
var res = $('.page').map(function(i, e){ var res = $('.page').map(function(i, e){
e = $(e) e = $(e)
var l = e.position().left var l = e.position().left
//var l = e.offset().left
var w = e.width()*scale var w = e.width()*scale
return Math.abs((l+(w/2)) - (s+(W/2))) //return Math.abs((l+(w/2)) - (s+(W/2)))
return Math.abs((l+(w/2)) - (o+(W/2)))
}) })
cur = res.index(Math.min.apply(Math, res)) cur = res.index(Math.min.apply(Math, res))
return cur return cur