diff --git a/layout-iscroll2.html b/layout-iscroll2.html
index a0ccdb6..0823e2d 100755
--- a/layout-iscroll2.html
+++ b/layout-iscroll2.html
@@ -20,8 +20,11 @@
}
.current.page {
+ /*
z-index: 9000;
box-shadow: 10px 10px 150px -50px black;
+ border-bottom: solid yellow 10px;
+ */
}
/*
.page:hover {
@@ -31,6 +34,9 @@
*/
.page {
+
+ vertical-align:top;
+
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 ease;
@@ -104,102 +110,138 @@ $(document).ready(function(){
function(k){console.log(k)}))
- //logger = Logger()
- var scrolling = false
- var _x = null
- var _t = null
- var _s = null
- var _scale = null
-
- // XXX this is a stub, but need to keep the two types of events
- // seporated as mouse events sometimes interfere with touch events...
- if('ontouchmove' in window){
- // XXX STUB...
- togglePageDragging('on')
- $('.viewer')
- .on('touchstart', function(){
- //logger.log('[touchstart]')
- //_t = evt.timeStamp || Date.now();
- scrolling = true
- //togglePageDragging('on')
- _s = getMagazineShift()
- _scale = getMagazineScale()
- })
- .on('touchmove', function(evt){
- evt.preventDefault()
- var pos_x = event.touches[0].pageX
-
- if(_x == null){
- _x = pos_x
- }
- var x = pos_x
- if(scrolling){
- //logger.log('>>>' + s)
- _s += x - _x
- shiftMagazineTo(_s, _scale)
- }
- _x = x
- })
- .on('touchend', function(){
- //logger.log('[touchend]')
- scrolling = false
- //togglePageDragging('off')
- _x = null
- _s = null
- _scale = null
- })
-
- } else {
- // XXX stub...
- togglePageDragging('on')
- $('.viewer')
- .on('mousedown', function(){
- //logger.log('[touchstart]')
- //_t = evt.timeStamp || Date.now();
- scrolling = true
- //togglePageDragging('on')
- _s = getMagazineShift()
- _scale = getMagazineScale()
- })
- .on('mousemove', function(evt){
- //var t = evt.timeStamp || Date.now();
- evt.preventDefault()
- var pos_x = evt.clientX
-
- if(_x == null){
- _x = pos_x
- }
- var x = pos_x
- if(scrolling){
- _s += x - _x
- shiftMagazineTo(_s, _scale)
- }
- _x = x
- })
- .on('mouseup', function(){
- //logger.log('[touchend]')
- scrolling = false
- //togglePageDragging('off')
- _x = null
- _s = null
- _scale = null
- })
- }
-
- setMagazineScale(0.5)
+ window.THRESHOLD = 10
+ var scroller = makeScrollHandler($('.viewer'), function(speed, distance){
+ // XXX this is not too correct...
+ // ...make this mode specific...
+ if(getMagazineScale() >= 1){
+ var cur = $('.current.page')
+ if(distance > THRESHOLD){
+ return nextPage(cur)
+ } else if(distance < -THRESHOLD){
+ return prevPage(cur)
+ }
+ }
+ setCurrentPage()
+ }).start()
+ //setMagazineScale(0.5)
// XXX need to setup style for android to work...
$('.viewer').css({overflow: 'hidden'})
-
// expand the templates...
runMagazineTemplates()
- //setCurrentPage(0)
+ setCurrentPage(0)
//limit_scroll()
})
+function makeScrollHandler(root, callback){
+
+ // local data...
+ var scrolling = false
+ var touch = false
+ var touches = 0
+ var start
+ var prev_x
+ var prev_t
+ var shift
+ var scale
+ var x
+ var t
+ var dx
+ var dt
+
+ function startMoveHandler(evt, callback){
+ prev_t = event.timeStamp || Date.now();
+ if(event.touches != null){
+ touch = true
+ }
+ scrolling = true
+ scroller.state = 'scrolling'
+ //root.trigger('userScrollStart')
+ //togglePageDragging('on')
+ shift = getMagazineShift()
+ scale = getMagazineScale()
+ // get the user coords...
+ prev_x = touch ? event.touches[0].pageX : evt.clientX
+ start = prev_x
+ }
+ // XXX add limits to this...
+ // XXX try and make this adaptive to stay ahead of the lags...
+ function moveHandler(evt){
+ evt.preventDefault()
+ t = event.timeStamp || Date.now();
+ // get the user coords...
+ x = touch ? event.touches[0].pageX : evt.clientX
+ touches = touch ? event.touches.length : 0
+ if(scrolling){
+ shift += x - prev_x
+ shiftMagazineTo(shift, scale)
+ }
+ dx = x - prev_x
+ dt = t - prev_t
+ prev_t = t
+ prev_x = x
+ //root.trigger('userScroll')
+ }
+ function endMoveHandler(evt){
+ x = touch ? event.touches[0].pageX : evt.clientX
+ touch = false
+ scrolling = false
+ scroller.state = 'waiting'
+ touches = 0
+ //togglePageDragging('off')
+ // XXX add speed to this...
+ //root.trigger('userScrollEnd')
+ callback && callback(dx/dt, start - x)
+ }
+
+ var scroller = {
+ start: function(){
+ this.state = 'waiting'
+ // XXX STUB: this makes starting the scroll a bit sluggish,
+ // find a faster way...
+ togglePageDragging('on')
+
+ // NOTE: if we bind both touch and mouse events, on touch devices they
+ // might start interfering with each other...
+ if('ontouchmove' in window){
+ root
+ .on('touchstart', startMoveHandler)
+ .on('touchmove', moveHandler)
+ .on('touchend', endMoveHandler)
+ } else {
+ root
+ .on('mousedown', startMoveHandler)
+ .on('mousemove', moveHandler)
+ .on('mouseup', endMoveHandler)
+ }
+ return this
+ },
+ stop: function(){
+ this.state = 'stopped'
+ if('ontouchmove' in window){
+ root
+ .off('touchstart', startMoveHandler)
+ .off('touchmove', moveHandler)
+ .off('touchend', endMoveHandler)
+ } else {
+ root
+ .off('mousedown', startMoveHandler)
+ .off('mousemove', moveHandler)
+ .off('mouseup', endMoveHandler)
+ }
+ return this
+ },
+ // NOTE: this is updated live but not used by the system in any way...
+ state: 'stopped'
+ }
+ return scroller
+}
+
+
var SCROLL_LIMIT = 800 * 1.5
function setup_scroll_limiter(){
diff --git a/layout.js b/layout.js
index efc87e1..dc6a448 100755
--- a/layout.js
+++ b/layout.js
@@ -78,6 +78,7 @@ var togglePageView = createCSSClassToggler(
/********************************************************* helpers ***/
+// XXX make this work for narrow and left/right alligned pages...
function getPageNumber(page){
// a page is given...
if(page != null){
@@ -124,7 +125,7 @@ function setMagazineScale(scale){
// XXX also add margins at top and bottom for vertical elements...
})
setElementScale(mag, scale)
- setCurrentPage()
+ //setCurrentPage()
}
@@ -164,11 +165,11 @@ function setCurrentPage(n){
}
-function nextPage(){
- setCurrentPage(getPageNumber()+1)
+function nextPage(page){
+ setCurrentPage(getPageNumber(page)+1)
}
-function prevPage(){
- var n = getPageNumber()-1
+function prevPage(page){
+ var n = getPageNumber(page)-1
n = n < 0 ? 0 : n
setCurrentPage(n)
}
diff --git a/magazine.js b/magazine.js
index 8a1ab51..a4f12ec 100755
--- a/magazine.js
+++ b/magazine.js
@@ -216,6 +216,7 @@ function getPageAt(n){
return $(page[n])
}
+// NOTE: at this point this works only on the X axis...
function shiftMagazineTo(offset, scale){
var mag = $('.magazine')
if(scale == null){
@@ -368,7 +369,7 @@ function makeSwipeHandler(){
var scale
var mag
var pos
- var viewer
+ var viewer = $('.viewer')
return function(evt, phase, direction, distance, duration, fingers){
@@ -384,7 +385,6 @@ function makeSwipeHandler(){
scale = getPageScale()
mag = $('.magazine')
pos = $('.navigator .bar .indicator')
- viewer = $('.viewer')
// XXX make this drag pages that are larger than view before dragging outside...
} else if(phase=='move'