added action canceling, and some refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-20 07:15:17 +04:00
parent cf50545084
commit e10ae04aeb
2 changed files with 43 additions and 5 deletions

View File

@ -120,8 +120,17 @@ $(document).ready(function(){
window.MagazineScroller = makeScrollHandler($('.viewer'), {
hScroll: true,
vScroll: false,
callback: function(evt, speed, distance, touches){
// XXX the callback signature is a tad messy, revise...
callback: function(evt, speed, distance, touches, state){
// canceling a scroll...
if(state == 'canceling' && togglePageView('?') == 'on'){
setCurrentPage()
return
}
// ignore situations when the user is still touching...
// ...like when he/she lifted one finger of several...
if(touches > 0){
return
}

View File

@ -469,7 +469,8 @@ function makeKeyboardHandler(keybindings, unhandled){
// XXX pass the actual event target to the callback...
// XXX add a resonable cancel scheme...
// ... something similar to touch threshold but bigger...
// XXX handle multiple touches...
// - timeout on lift to count fingers...
// XXX setup basic styles for the contained element...
@ -482,6 +483,7 @@ function makeScrollHandler(root, config){
// local data...
var ignoring = false
var cancelThreshold
var scrolled
var scrolling = false
var touch = false
@ -500,6 +502,8 @@ function makeScrollHandler(root, config){
var dx
var dy
var dt
var max_dx = 0
var max_dy = 0
function startMoveHandler(evt, callback){
// ignore...
@ -513,6 +517,7 @@ function makeScrollHandler(root, config){
if(event.touches != null){
touch = true
}
cancelThreshold = scroller.options.scrollCancelThreshold
touches = touch ? event.touches.length : 1
// if we are already touching then just skip on this...
// XXX test this...
@ -530,6 +535,7 @@ function makeScrollHandler(root, config){
}
scrolled = $(root.children()[0])
setTransitionDuration(scrolled, 0)
// XXX these two are redundant...
scrolling = true
scroller.state = 'scrolling'
scroller.options.enabelStartEvent && root.trigger('userScrollStart')
@ -582,6 +588,8 @@ function makeScrollHandler(root, config){
// just while scrolling?
dx = x - prev_x
dy = y - prev_y
max_dx += Math.abs(dx)
max_dy += Math.abs(dy)
dt = t - prev_t
prev_x = x
prev_y = y
@ -601,6 +609,14 @@ function makeScrollHandler(root, config){
x = touch ? event.changedTouches[0].pageX : evt.clientX
y = touch ? event.changedTouches[0].pageY : evt.clientY
touches = touch ? event.touches.length : 0
// check if we are canceling...
if(cancelThreshold
&& Math.abs(start_x-x) < cancelThreshold
&& Math.abs(start_y-y) < cancelThreshold
&& (max_dx > cancelThreshold
|| max_dy > cancelThreshold)){
scroller.state = 'canceling'
}
// XXX stop only if no fingers are touching or let the callback decide...
//togglePageDragging('off')
@ -608,13 +624,15 @@ function makeScrollHandler(root, config){
if(scroller.options.callback
// XXX revise this....
// call the callback...
&& scroller.options.callback(evt, dx/dt, start_x-x, touches) === false
&& scroller.options.callback(evt, dx/dt, start_x-x, touches, scroller.state) === false
|| touches == 0){
// cleanup and stop...
touch = false
scrolling = false
scroller.state = 'waiting'
bounds = null
max_dx = 0
max_dy = 0
}
return false
@ -622,16 +640,27 @@ function makeScrollHandler(root, config){
var scroller = {
options: {
// if one of these is false, it will restrict scrolling in
// that direction. hScroll for horizontal and vScroll for
// vertical.
hScroll: true,
vScroll: true,
// items to be ignored by the scroller...
// this is a jQuery compatible selector.
ignoreElements: '.noSwipe',
// this is the side of the rectangle if the user movees out of
// and then returns back to the action will get cancelled.
// i.e. the callback will get called with the "cancelling" state.
scrollCancelThreshold: 100,
enabelStartEvent: false,
enableUserScrollEvent: false,
enableEndEvent: false,
// XXX
// XXX padding within the target element moving out of which
// will cancell the action...
// XXX needs testing...
autoCancelEvents: false,
eventBounds: 5,
@ -664,7 +693,6 @@ function makeScrollHandler(root, config){
return this
},
stop: function(){
this.state = 'stopped'
if('ontouchmove' in window){
root
.off('touchstart', startMoveHandler)
@ -676,6 +704,7 @@ function makeScrollHandler(root, config){
.off('mousemove', moveHandler)
.off('mouseup', endMoveHandler)
}
this.state = 'stopped'
return this
},
// XXX check...