diff --git a/index2.html b/index2.html
index 8983ecf..554588a 100755
--- a/index2.html
+++ b/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()
diff --git a/layout.js b/layout.js
index fac1c85..6593a80 100755
--- a/layout.js
+++ b/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
}
}
diff --git a/lib/jli.js b/lib/jli.js
index 1e764b5..e59727a 100755
--- a/lib/jli.js
+++ b/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