more work on animationFrame-based animation...

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

index2.html

@@ -129,6 +129,7 @@ $(document).ready(function(){
 	window.MagazineScroller = makeScrollHandler($('.viewer'), {
 		hScroll: true,
 		vScroll: false,
+		preCallback: function(){stopAnimation($('.magazine'))},
 		//enableMultiClicks: true,
 		transitionEasing: 'cubic-bezier(0.33,0.66,0.66,1)',
 	}).start()

layout.js

@@ -5,7 +5,6 @@
 **********************************************************************/
 
 var PAGES_IN_RIBBON = 4
-
 var SNAP_TO_PAGES_IN_RIBBON = false
 var DEFAULT_TRANSITION_DURATION = 200
 var INNERTIA_SCALE = 0.25
@@ -197,7 +196,8 @@ var animationFrame = (window.requestAnimationFrame
 		  })
 
 
-// XXX make this interruptable...
+// XXX make this a drop-in replacement for setElementTransform...
+// XXX cleanup, still flacky...
 function animateElementTo(elem, to, duration, easing, speed){
 	// use transition for animation...
 	if(USE_TRANSITIONS_FOR_ANIMATION){
@@ -219,7 +219,6 @@ function animateElementTo(elem, to, duration, easing, speed){
 				y: 0,
 			}
 		}
-
 		setTransitionDuration(elem, 0)
 
 		var start = Date.now()
@@ -233,6 +232,7 @@ function animateElementTo(elem, to, duration, easing, speed){
 			top: to.top - from.top,
 			left: to.left - from.left,
 		}
+		elem.animating = true
 
 		function animate(){
 			var t = Date.now()
@@ -241,6 +241,11 @@ function animateElementTo(elem, to, duration, easing, speed){
 				setElementTransform(elem, to)
 				return
 			}
+			if(!elem.animating){
+				// XXX jittery...
+				setElementTransform(elem, cur)
+				return
+			}
 
 			// do an intermediate step...
 			// XXX do propper easing...
@@ -258,7 +263,7 @@ function animateElementTo(elem, to, duration, easing, speed){
 						// normalize...
 						cur.top = Math.abs(dist.top) <= 1 ? to.top : cur.top
 						// calc speed for next step...
-						speed.x = dist.top / (duration - (t - start))
+						speed.y = dist.top / (duration - (t - start))
 					} else {
 						cur.top = to.top
 					}
@@ -291,8 +296,12 @@ function animateElementTo(elem, to, duration, easing, speed){
 		}
 
 		animate()
+	}
+}
 
-		console.log(from.left, to.left, getElementShift(elem).left)
+function stopAnimation(elem){
+	if(elem.animating){
+		delete elem.animating
 	}
 }
 

lib/jli.js

@@ -552,7 +552,7 @@ function makeScrollHandler(root, config){
 	var max_dx = 0
 	var max_dy = 0
 
-	function startMoveHandler(evt, callback){
+	function startMoveHandler(evt){
 		var options = scroller.options
 		// ignore...
 		if(options.ignoreElements 
@@ -589,6 +589,8 @@ function makeScrollHandler(root, config){
 		scrolling = true
 		scroller.state = 'scrolling'
 		options.enabelStartEvent && root.trigger('userScrollStart')
+		// XXX do we need to pass something to this?
+		options.preCallback && options.preCallback()
 
 		shift = getElementShift(scrolled)
 		scale = getElementScale(scrolled)
@@ -700,9 +702,9 @@ function makeScrollHandler(root, config){
 		//togglePageDragging('off')
 		// XXX update this with the new data model!!! (see below)
 		options.enableEndEvent && root.trigger('userScrollEnd', data)
-		if(options.callback 
+		if(options.postCallback 
 				// XXX revise this....
-				&& options.callback(data) === false 
+				&& options.postCallback(data) === false 
 				|| touches == 0){
 			// cleanup and stop...
 			touch = false
@@ -760,12 +762,13 @@ function makeScrollHandler(root, config){
 			autoCancelEvents: false,
 			eventBounds: 5,
 
+			preCallback: null,
 			// callback to be called when the user lifts a finger/mouse.
 			// NOTE: this may happen before the scroll is done, for instance
 			// 		when one of several fingers participating in the action
 			// 		gets lifted.
 			// NOTE: if this returns false explicitly, this will stop scrolling.
-			callback: postScrollCallback,
+			postCallback: postScrollCallback,
 
 			// These are used by the default callback...
 			// if true then doubleClick and multiClick events will get