mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 03:00:09 +00:00
added swipeUp/Down events...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
cd9ca4995a
commit
2762c87366
@ -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...
|
||||
|
||||
143
lib/jli.js
143
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)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user