diff --git a/index2.html b/index2.html
index ea89e49..3ab6fde 100755
--- a/index2.html
+++ b/index2.html
@@ -158,6 +158,7 @@ $(document).ready(function(){
*/
.on('swipeLeft', function(evt, data){
// ribbon mode...
+ // XXX make this in a better, more event-oriented way...
if(isNavigationViewRelative()){
setTimeout(function(){
data.scroller.root.trigger('screenReleased', data)}, 2)
@@ -172,6 +173,7 @@ $(document).ready(function(){
})
.on('swipeRight', function(evt, data){
// ribbon mode...
+ // XXX make this in a better, more event-oriented way...
if(isNavigationViewRelative()){
setTimeout(function(){
data.scroller.root.trigger('screenReleased', data)}, 2)
@@ -186,14 +188,16 @@ $(document).ready(function(){
})
// do snap and innertia...
+ // NOTE: this will also handle swipeUp/swopeDown as we do not
+ // explicitly bind them...
.on('screenReleased', function(evt, data){
// this makes things snap...
- if(SNAP_TO_PAGES_IN_RIBBON){
+ if(SNAP_TO_PAGES_IN_RIBBON || !isNavigationViewRelative()){
setCurrentPage()
return
}
- var speed = data.speed
+ var speed = data.speed.x
var pages = $('.page')
var mag = $('.magazine')
// innertial scroll...
diff --git a/lib/jli.js b/lib/jli.js
index 0b7b17d..6d12ae1 100755
--- a/lib/jli.js
+++ b/lib/jli.js
@@ -509,7 +509,7 @@ var MULTITOUCH_RELEASE_THRESHOLD = 100
// XXX test on other devices...
// XXX BUG: on landing a second finger while scrolling the things goes
// haywhire...
-// XXX BUG: after long click the mouse is tracked and the view is scrolled...
+// ...check if this is gone...
// XXX split this into a seporate lib...
function makeScrollHandler(root, config){
root = $(root)
@@ -541,9 +541,10 @@ function makeScrollHandler(root, config){
var max_dy = 0
function startMoveHandler(evt, callback){
+ var options = scroller.options
// ignore...
- if(scroller.options.ignoreElements
- && $(evt.target).closest(scroller.options.ignoreElements).length > 0){
+ if(options.ignoreElements
+ && $(evt.target).closest(options.ignoreElements).length > 0){
ignoring = true
return
} else {
@@ -552,7 +553,7 @@ function makeScrollHandler(root, config){
if(event.touches != null){
touch = true
}
- cancelThreshold = scroller.options.scrollCancelThreshold
+ cancelThreshold = options.scrollCancelThreshold
touches = touch ? event.touches.length : 1
// if we are already touching then just skip on this...
// XXX test this...
@@ -561,12 +562,12 @@ function makeScrollHandler(root, config){
}
prev_t = event.timeStamp || Date.now();
start_t = prev_t
- if(scroller.options.autoCancelEvents){
+ if(options.autoCancelEvents){
bounds = {
- left: scroller.options.eventBounds,
- right: root.width() - scroller.options.eventBounds,
- top: scroller.options.eventBounds,
- bottom: root.height() - scroller.options.eventBounds
+ left: options.eventBounds,
+ right: root.width() - options.eventBounds,
+ top: options.eventBounds,
+ bottom: root.height() - options.eventBounds
}
}
//togglePageDragging('on')
@@ -575,7 +576,7 @@ function makeScrollHandler(root, config){
// XXX these two are redundant...
scrolling = true
scroller.state = 'scrolling'
- scroller.options.enabelStartEvent && root.trigger('userScrollStart')
+ options.enabelStartEvent && root.trigger('userScrollStart')
shift = getElementShift(scrolled)
scale = getElementScale(scrolled)
@@ -597,6 +598,7 @@ function makeScrollHandler(root, config){
if(ignoring){
return
}
+ var options = scroller.options
evt.preventDefault()
t = event.timeStamp || Date.now();
// get the user coords...
@@ -605,21 +607,22 @@ function makeScrollHandler(root, config){
touches = touch ? event.touches.length : 1
// XXX needs testing...
+ // XXX do we need to account for scrollDisabled here???
// check scroll bounds...
if(bounds != null){
- if(scroller.options.hScroll && (x <= bounds.left || x >= bounds.right)
- || scroller.options.vScroll && (y <= bounds.top || y >= bounds.bottom)){
+ if(options.hScroll && (x <= bounds.left || x >= bounds.right)
+ || options.vScroll && (y <= bounds.top || y >= bounds.bottom)){
// XXX cancel the touch event and trigger the end handler...
return endMoveHandler(evt)
}
}
// do the actual scroll...
- if(scrolling){
- if(scroller.options.hScroll){
+ if(!options.scrollDisabled && scrolling){
+ if(options.hScroll){
shift.left += x - prev_x
}
- if(scroller.options.vScroll){
+ if(options.vScroll){
shift.top += y - prev_y
}
setElementTransform(scrolled, shift, scale)
@@ -635,7 +638,7 @@ function makeScrollHandler(root, config){
prev_y = y
prev_t = t
- scroller.options.enableUserScrollEvent && root.trigger('userScroll')
+ options.enableUserScrollEvent && root.trigger('userScroll')
}
return false
}
@@ -649,10 +652,11 @@ function makeScrollHandler(root, config){
}
return
}
+ var options = scroller.options
// XXX get real transition duration...
scroller.resetTransitions()
- //setTransitionDuration(scrolled, scroller.options.transitionDuration)
+ //setTransitionDuration(scrolled, options.transitionDuration)
x = touch ? event.changedTouches[0].pageX : evt.clientX
y = touch ? event.changedTouches[0].pageY : evt.clientY
@@ -665,22 +669,29 @@ function makeScrollHandler(root, config){
scroller.state = 'canceling'
}
+ var data = {
+ orig_event: evt,
+ scroller: scroller,
+ speed: {
+ x: dx/dt,
+ y: dy/dt
+ },
+ distance: {
+ x: start_x-x,
+ y: start_y-y
+ },
+ duration: t-start_t,
+ // current touches...
+ touches: touches,
+ clicks: null,
+ }
// XXX stop only if no fingers are touching or let the callback decide...
//togglePageDragging('off')
- scroller.options.enableEndEvent && root.trigger('userScrollEnd', dx, dy, dt, start_x, start_y)
- if(scroller.options.callback
+ // XXX update this with the new data model!!! (see below)
+ options.enableEndEvent && root.trigger('userScrollEnd', data)
+ if(options.callback
// XXX revise this....
- // call the callback...
- && scroller.options.callback({
- orig_event: evt,
- scroller: scroller,
- speed: dx/dt,
- distance: start_x-x,
- duration: t-start_t,
- // current touches...
- touches: touches,
- clicks: null,
- }) === false
+ && options.callback(data) === false
|| touches == 0){
// cleanup and stop...
touch = false
@@ -705,6 +716,13 @@ function makeScrollHandler(root, config){
hScroll: true,
vScroll: true,
+ // this will disable scroll.
+ // NOTE: this is the same as setting both vScroll and hScroll
+ // to false, but can be set and reset without affecting
+ // the actual settings individually...
+ // NOTE: this takes priority over hScroll/vScroll.
+ scrollDisabled: false,
+
// sets the default transition settings while not scrolling...
transitionDuration: 200,
transitionEasing: 'ease',
@@ -730,8 +748,11 @@ function makeScrollHandler(root, config){
// NOTE: if this returns false explicitly, this will stop scrolling.
callback: postScrollCallback,
+
// These are used by the default callback...
enableMultiClicks: false,
+ // NOTE: if these are null, respective values from the env will
+ // be used.
clickThreshold: null,
longClickThreshold: null,
multiClickTimeout: null,
@@ -792,6 +813,8 @@ function makeScrollHandler(root, config){
return scroller
}
+
+
// default callback...
// This will provide support for the folowing events on the scroll root
// element:
@@ -803,26 +826,25 @@ function makeScrollHandler(root, config){
// - longClick
// - swipeLeft
// - swipeRight
+// - swipeUp
+// - swipeDown
// - screenReleased
//
// NOTE: data.touches passed to the event is the number of touches
// released within the multitouchTimeout.
// this differs from what postScrollCallback actually gets in the
// same field when it recieves the object.
-//
-// XXX add up/down swipes
-// XXX add double clicks
// XXX add generic snap
// XXX add generic innertial scroll
function postScrollCallback(data){
var scroller = data.scroller
+ var options = scroller.options
var root = scroller.root
- var clickThreshold = scroller.options.clickThreshold || CLICK_THRESHOLD
- var longClickThreshold = scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD
- var multitouchTimeout = scroller.options.multitouchTimeout || MULTITOUCH_RELEASE_THRESHOLD
-
- var enableMultiClicks = scroller.options.enableMultiClicks
- var multiClickTimeout = scroller.options.multiClickTimeout || MULTI_CLICK_TIMEOUT
+ var clickThreshold = options.clickThreshold || CLICK_THRESHOLD
+ var longClickThreshold = options.longClickThreshold || LONG_CLICK_THRESHOLD
+ var multitouchTimeout = options.multitouchTimeout || MULTITOUCH_RELEASE_THRESHOLD
+ var enableMultiClicks = options.enableMultiClicks
+ var multiClickTimeout = options.multiClickTimeout || MULTI_CLICK_TIMEOUT
var now = Date.now();
@@ -831,8 +853,7 @@ function postScrollCallback(data){
return root.trigger('scrollCancelled', data)
}
- // ignore situations when the user is still touching...
- // ...like when he/she lifted one finger of several...
+ // handle multiple touches...
// XXX needs testing...
if(data.touches > 0){
var then = scroller._last_touch_release
@@ -848,15 +869,18 @@ function postScrollCallback(data){
// wait for the next touch release...
scroller._last_touch_release = now
return
+
// calculate how many touches did participate...
} else {
- data.touches = scroller._touches + 1
+ data.touches = scroller._touches ? scroller._touches + 1 : 1
scroller._last_touch_release = null
scroller._touches = null
}
- // clicks, double clicks and long clicks...
- if(Math.abs(data.distance) < clickThreshold){
+ // clicks, double-clicks, multi-clicks and long-clicks...
+ if(Math.max(
+ Math.abs(data.distance.x),
+ Math.abs(data.distance.y)) < clickThreshold){
if(data.duration > longClickThreshold){
return root.trigger('longClick', data)
}
@@ -890,23 +914,30 @@ function postScrollCallback(data){
scroller._clicks = null
scroller._click_timeout_id = null
}, multiClickTimeout)
+
+ return
}
}
- // left/right swipes...
- // XXX add up/down support...
- // XXX check if these are bound...
- if(data.distance <= -clickThreshold){
- return root.trigger('swipeLeft', data)
- }
- if(data.distance >= clickThreshold){
- return root.trigger('swipeRight', data)
+ // swipes...
+ // XXX make these less brain dead...
+ // ...when all is OK also call screenReleased (chain events)
+ // also would be nice to add a generic swipe event...
+ if(Math.abs(data.distance.x) > Math.abs(data.distance.y)){
+ if(data.distance.x <= -clickThreshold && root.data('events').swipeLeft){
+ return root.trigger('swipeLeft', data)
+ } else if(data.distance.x >= clickThreshold && root.data('events').swipeRight){
+ return root.trigger('swipeRight', data)
+ }
+ } else {
+ if(data.distance.y <= -clickThreshold && root.data('events').swipeUp){
+ return root.trigger('swipeUp', data)
+ } else if(data.distance.y >= clickThreshold && root.data('events').swipeDown){
+ return root.trigger('swipeDown', data)
+ }
}
- // XXX snap...
- // XXX innertial scroll...
-
- // XXX this may never get called directly....
+ // this is triggered of no swipes were handled...
return root.trigger('screenReleased', data)
}