added action canceling, and some refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

layout-iscroll2.html

@@ -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
 			}

lib/jli.js

@@ -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...