refactored the post-scroll callback into a seporate generic entity...

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

layout-iscroll2.html

@@ -113,22 +113,31 @@ $(document).ready(function(){
 		function(k){console.log(k)}))
 
 
-	window.CLICK_THRESHOLD = 10
 	window.SNAP_TO_PAGES_IN_RIBBON = false
 	window.INITIAL_TIME = 200
-	window.LONG_CLICK_THRESHOLD = 400
+	window.INNERTIA_SCALE = 1
 
 	// XXX make this a default setup in the lib...
 	window.MagazineScroller = makeScrollHandler($('.viewer'), {
 		hScroll: true,
 		vScroll: false,
 
+		/*
 		// XXX the callback signature is a tad messy, revise...
 		// XXX need ability to dampen innertia, add some kind of resistance...
-		callback: function(evt, speed, distance, duration, touches, state){
+		callback: function(data){
-			console.log(duration)
+			var evt = data.orig_event
+			var scroller = data.scroller
+			var root = scroller.root
+			var speed = data.speed
+			var distance = data.distance
+			var duration = data.duration
+			var touches = data.touches
+			var state = data.state
+
 			// canceling a scroll...
 			if(state == 'canceling' && togglePageView('?') == 'on'){
+				//root.trigger('userScrollCancelled')
 				setCurrentPage()
 				return
 			}
@@ -142,9 +151,12 @@ $(document).ready(function(){
 			// click/tap...
 			if(Math.abs(distance) < CLICK_THRESHOLD){
 				if(duration > LONG_CLICK_THRESHOLD){
-					return alert('long click...')
+					//root.trigger('userLongClick')
 				}
 				// click...
+				//root.trigger('userClick')
+
+				// get page target and select it if it's within a page...
 				var target = $(evt.target)
 				target = getPageNumber(
 							target.hasClass('page') ? target 
@@ -164,9 +176,13 @@ $(document).ready(function(){
 			if(!isNavigationViewRelative()){
 				var cur = $('.current.page')
 				if(distance >= CLICK_THRESHOLD){
+					//root.trigger('userSwipeRight')
+
 					setTransitionDuration(mag, INITIAL_TIME)
 					return nextPage(cur)
 				} else if(distance <= -CLICK_THRESHOLD){
+					//root.trigger('userSwipeLeft')
+
 					setTransitionDuration(mag, INITIAL_TIME)
 					return prevPage(cur)
 				}
@@ -178,6 +194,7 @@ $(document).ready(function(){
 			}
 
 			// innertial scroll...
+			// XXX make this generic...
 			var t = INITIAL_TIME * (1+Math.abs(speed))
 			// XXX this is only horisontal at this point...
 			var at = getElementShift(mag).left
@@ -188,18 +205,18 @@ $(document).ready(function(){
 			// filter out really small speeds...
 			if(Math.abs(speed) > 0.5){
 				// check bounds...
+				// NOTE: need to cut the distance and time if we are going the 
+				//		hit the bounds...
 				if(to > first){
 					// trim the time proportionally...
 					var _t = t
 					t = Math.abs(t * ((at-first)/(at-to)))
-					console.log(_t, t)
 					to = first
 					setTransitionEasing(mag, 'linear')
 				} else if(to < last){
 					// trim the time proportionally...
 					var _t = t
 					t = Math.abs(t * ((at-last)/(at-to)))
-					console.log(_t, t)
 					to = last
 					setTransitionEasing(mag, 'linear')
 
@@ -218,6 +235,7 @@ $(document).ready(function(){
 					setTransitionDuration(mag, INITIAL_TIME)
 				}, t+10)
 
+			// check scroll bounds...
 			// do not let the user scroll out of view...
 			} else {
 				if(at > first){
@@ -234,8 +252,127 @@ $(document).ready(function(){
 				}
 			}
 		},
+		*/
 	}).start()
 
+	$('.viewer')
+		.on('scrollCancelled', function(){
+			setCurrentPage()
+		})
+		.on('shortClick', function(evt, data){
+			// get page target and select it if it's within a page...
+			var target = $(data.orig_event.target)
+			target = getPageNumber(
+						target.hasClass('page') ? target 
+							: target.parents('.page'))
+			if(target != -1){
+				togglePageView()
+				setCurrentPage(target)
+			}
+		})
+		.on('longClick', function(evt, data){
+		})
+		.on('swipeLeft', function(evt, data){
+			// ribbon mode...
+			if(isNavigationViewRelative()){
+				setTimeout(function(){
+					data.scroller.root.trigger('screenReleased', data)}, 2)
+				return
+			}
+			// full page view...
+			var cur = $('.current.page')
+			var mag = $('.magazine')
+			setTransitionDuration(mag, INITIAL_TIME)
+
+			prevPage(cur)
+		})
+		.on('swipeRight', function(evt, data){
+			// ribbon mode...
+			if(isNavigationViewRelative()){
+				setTimeout(function(){
+					data.scroller.root.trigger('screenReleased', data)}, 2)
+				return
+			}
+			// full page view...
+			var cur = $('.current.page')
+			var mag = $('.magazine')
+			setTransitionDuration(mag, INITIAL_TIME)
+
+			nextPage(cur)
+		})
+
+		// do snap and innertia...
+		.on('screenReleased', function(evt, data){
+			// this makes things snap...
+			if(SNAP_TO_PAGES_IN_RIBBON){
+				setCurrentPage()
+				return
+			}
+
+			var speed = data.speed
+			var pages = $('.page')
+			var mag = $('.magazine')
+			// innertial scroll...
+			// XXX make this generic...
+			var t = INITIAL_TIME * (1+Math.abs(speed))
+			// XXX this is only horisontal at this point...
+			var at = getElementShift(mag).left
+			var to = (at + (t*speed*INNERTIA_SCALE))
+			var first = getMagazineOffset(pages.first(), null, 'center')
+			var last = getMagazineOffset(pages.last(), null, 'center')
+
+			// filter out really small speeds...
+			if(Math.abs(speed) > 0.5){
+				// check bounds...
+				// NOTE: need to cut the distance and time if we are going the 
+				//		hit the bounds...
+				if(to > first){
+					// trim the time proportionally...
+					var _t = t
+					t = Math.abs(t * ((at-first)/(at-to)))
+					to = first
+					setTransitionEasing(mag, 'linear')
+				} else if(to < last){
+					// trim the time proportionally...
+					var _t = t
+					t = Math.abs(t * ((at-last)/(at-to)))
+					to = last
+					setTransitionEasing(mag, 'linear')
+
+				} else {
+					setTransitionEasing(mag, 'ease-out')
+				}
+
+				setTransitionDuration(mag, t)
+				setElementTransform(mag, to)
+
+				// restore defaults...
+				// XXX this is a bit dumb at this point...
+				// XXX run this as a transition end handler...
+				setTimeout(function(){
+					setTransitionEasing(mag, 'ease-out')
+					setTransitionDuration(mag, INITIAL_TIME)
+				}, t+10)
+
+			// check scroll bounds...
+			// do not let the user scroll out of view...
+			} else {
+				if(at > first){
+					setTransitionEasing(mag, 'ease-in')
+					setTransitionDuration(mag, INITIAL_TIME)
+					//setCurrentPage(0)
+					setElementTransform(mag, first)
+
+				} else if(at < last){
+					setTransitionEasing(mag, 'ease-in')
+					setTransitionDuration(mag, INITIAL_TIME)
+					//setCurrentPage(-1)
+					setElementTransform(mag, last)
+				}
+			}
+		})
+
+
 	// XXX stub...
 	setTransitionEasing($('.magazine'), 'ease-out')
 

lib/jli.js

@@ -646,7 +646,14 @@ function makeScrollHandler(root, config){
 		if(scroller.options.callback 
 				// XXX revise this....
 				// call the callback...
-				&& scroller.options.callback(evt, dx/dt, start_x-x, t-start_t, touches, scroller.state) === false 
+				&& scroller.options.callback({
+						orig_event: evt, 
+						scroller: scroller, 
+						speed: dx/dt, 
+						distance: start_x-x, 
+						duration: t-start_t, 
+						touches: touches 
+					}) === false 
 				|| touches == 0){
 			// cleanup and stop...
 			touch = false
@@ -662,6 +669,7 @@ function makeScrollHandler(root, config){
 
 
 	var scroller = {
+		root: root,
 		options: {
 			// if one of these is false, it will restrict scrolling in 
 			// that direction. hScroll for horizontal and vScroll for 
@@ -688,7 +696,7 @@ function makeScrollHandler(root, config){
 			eventBounds: 5,
 
 			// NOTE: if this returns false explicitly, this will stop scrolling.
-			callback: null
+			callback: postScrollCallback
 		},
 		// NOTE: this is updated live but not used by the system in any way...
 		state: 'stopped',
@@ -740,6 +748,52 @@ function makeScrollHandler(root, config){
 	return scroller
 }
 
+var CLICK_THRESHOLD = 10
+var LONG_CLICK_THRESHOLD = 400
+
+
+// this is the default callback...
+// XXX add up/down swipes
+// XXX add double clicks
+// XXX add generic snap
+// XXX add generic innertial scroll
+function postScrollCallback(data){
+	var root = data.scroller.root
+	// cancel event...
+	if(data.scroller.state == 'canceling'){
+		return root.trigger('scrollCancelled', data)
+	}
+
+	// ignore situations when the user is still touching...
+	// ...like when he/she lifted one finger of several...
+	if(data.touches > 0){
+		return
+	}
+
+	// clicks and long clicks...
+	if(Math.abs(data.distance) < CLICK_THRESHOLD){
+		if(data.duration > LONG_CLICK_THRESHOLD){
+			return root.trigger('longClick', data) 
+		}
+		return root.trigger('shortClick', data)
+	}
+
+	// left/right swipes...
+	// XXX add up/down support...
+	if(data.distance <= -CLICK_THRESHOLD){
+		return root.trigger('swipeLeft', data)
+	}
+	if(data.distance >= CLICK_THRESHOLD){
+		return root.trigger('swipeRight', data)
+	}
+
+	// XXX snap...
+	// XXX innertial scroll...
+	
+	// XXX this may never get called directly....
+	return root.trigger('screenReleased', data)
+} 
+
 
 
 /************************************************ jQuery extensions **/