diff --git a/magazine.html b/magazine.html
index 6500490..a834fec 100755
--- a/magazine.html
+++ b/magazine.html
@@ -10,8 +10,9 @@ $(document).ready(function(){
$('.viewer')
.swipe({
/* for some reason these do not work within pages... */
- swipeLeft: nextPage,
- swipeRight: prevPage,
+ //swipeLeft: nextPage,
+ //swipeRight: prevPage,
+ swipeStatus: swipeUpdate,
swipeUp: function(){fitNPages(6)},
swipeDown: function(){fitNPages(1)},
click: function(evt, elem){
@@ -22,8 +23,45 @@ $(document).ready(function(){
return true
}
})
+
+ // XXX add splash screen...
+
+ fitNPages(1)
})
+function swipeUpdate(evt, phase, direction, distance){
+ var pages = $('.page')
+ var cur = $('.current.page')
+ var n = pages.index(cur)
+ var scale = getElementScale($('.scaler'))
+
+ if( phase=="move" && (direction=="left" || direction=="right") ){
+ // XXX set the transition time to 0...
+ // XXX
+ if (direction == "left"){
+ //$('.magazine').css({left: -n*cur.width()-distance/scale})
+ $('.magazine').css({left: -n*800-distance/scale})
+ } else if (direction == "right") {
+ //$('.magazine').css({left: -n*cur.width()+distance/scale})
+ $('.magazine').css({left: -n*800+distance/scale})
+ }
+ } else if ( phase == "cancel") {
+ setCurrentPage(pages.index($('.current.page')))
+ } else if ( phase =="end" ) {
+ // see which page is closer to the middle of the screen and set it...
+ var p = Math.ceil((distance/scale)/cur.width())
+
+ if(direction == "right") {
+ //prevPage()
+ setCurrentPage(Math.max(n-p, 0))
+ } else if (direction == "left"){
+ //nextPage()
+ setCurrentPage(Math.min(n+p, pages.length-1))
+ }
+ }
+
+
+}
function setCurrentPage(n){
@@ -89,6 +127,31 @@ function prevArticle(){
+// Return a scale value for the given element(s).
+// NOTE: this will only return a single scale value...
+function getElementScale(elem){
+ //var transform = elem.css('transform')
+ var vendors = ['o', 'moz', 'ms', 'webkit']
+ var transform = elem.css('transform')
+ var res
+
+ // go through vendor prefixes... (hate this!)
+ if(!transform || transform == 'none'){
+ for(var i in vendors){
+ transform = elem.css('-' + vendors[i] + '-transform')
+ if(transform && transform != 'none'){
+ break
+ }
+ }
+ }
+ // no transform is set...
+ if(!transform || transform == 'none'){
+ return 1
+ }
+ // get the scale value -- first argument of scale/matrix...
+ return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
+}
+
function setElementScale(elem, scale){
return elem.css({
'transform': 'scale('+scale+')',
@@ -99,6 +162,8 @@ function setElementScale(elem, scale){
})
}
+
+
function fitNPages(n){
if(n==null){
n = 1