From 893f7a0a77936a51d279b315aea2eb97bde3c29f Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 5 Feb 2014 09:11:48 +0400 Subject: [PATCH] some cleanup... Signed-off-by: Alex A. Naanou --- index.html | 3 +- layout.js | 15 ++++- lib/jli.js | 146 ++++++------------------------------------------ lib/scroller.js | 6 +- 4 files changed, 33 insertions(+), 137 deletions(-) diff --git a/index.html b/index.html index a1c3cbd..79e8e92 100755 --- a/index.html +++ b/index.html @@ -254,8 +254,7 @@ $(document).ready(function(){ // keyboard... $(document) - .keydown(makeKeyboardHandler(KEYBOARD_CONFIG, - function(k){console.log(k)})) + .keydown(makeKeyboardHandler(KEYBOARD_CONFIG)) window.MagazineScroller = makeScrollHandler($('.viewer'), { hScroll: true, diff --git a/layout.js b/layout.js index d04ebec..a11bb8c 100755 --- a/layout.js +++ b/layout.js @@ -196,6 +196,9 @@ var handleSwipeLeft = makeSwipeHandler(prevPage, prevArticle) var handleSwipeRight = makeSwipeHandler(nextPage, nextArticle) +// XXX +GLOBAL_SCROLL_CALLBACK = null + // Scroll Release // - check bounds and if out center first/last page // - filter out "throw" speeds below threshold @@ -209,6 +212,8 @@ var handleSwipeRight = makeSwipeHandler(nextPage, nextArticle) // XXX restore all the changed values... // XXX this may kill the ipad... function handleScrollRelease(evt, data){ + console.log(callback) + var callback = GLOBAL_SCROLL_CALLBACK var speed = data.speed.x var pages = $('.page') var mag = $('.magazine') @@ -248,7 +253,7 @@ function handleScrollRelease(evt, data){ //easing = 'ease-out' } - animateElementTo(mag, to, t, easing, speed) + animateElementTo(mag, to, t, easing, speed, callback) // check scroll bounds... // do not let the user scroll out of view... @@ -257,13 +262,17 @@ function handleScrollRelease(evt, data){ //animateElementTo(mag, first, DEFAULT_TRANSITION_DURATION, 'ease-in') animateElementTo(mag, first, DEFAULT_TRANSITION_DURATION, - easing) + easing, + null, + callback) } else if(at < last){ //animateElementTo(mag, last, DEFAULT_TRANSITION_DURATION, 'ease-in') animateElementTo(mag, last, DEFAULT_TRANSITION_DURATION, - easing) + easing, + null, + callback) } } } diff --git a/lib/jli.js b/lib/jli.js index 253e9c7..f0968df 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -454,134 +454,9 @@ function animationFrameRunner(func){ } -/* -// NOTE: this is exclusive, e.g. all other animations set with this will -// be stopped on call... -// XXX for some reason this is slower that animateElementTo(..) on iPad... -function animateElementTo2(elem, to, duration, easing, speed, use_transitions){ - use_transitions = use_transitions != null ? - use_transitions - : USE_TRANSITIONS_FOR_ANIMATION - // use transition for animation... - if(use_transitions){ - setTransitionEasing(elem, easing) - duration == null && setTransitionDuration(elem, duration) - setElementTransform(elem, to) - return - } - - to = typeof(to) == typeof(1) ? { - left: to, - top: 0, - } : to - speed = typeof(speed) == typeof(2) ? { - x: speed, - y: 0, - } : speed - duration = duration == null ? getElementTransitionDuration(elem) : duration - - // stop other animations... - var runner = elem.data('animating') - if(runner != null){ - runner.stop() - } - - // setup context... - var start = Date.now() - var then = start + duration - var from = getElementShift(elem) - - // do var caching... - var to_top = to.top - var to_left = to.left - var from_top = from.top - var from_left = from.left - var cur_top = from_top - var cur_left = from_left - var dist_top = to_top - from_top - var dist_left = to_left - from_left - if(speed != null){ - var speed_x = speed.x - var speed_y = speed.y - } - - elem.animating = true - - var runner = animationFrameRunner(function(t){ - // end of the animation... - if(t >= then){ - setElementTransform(elem, to) - runner.stop() - return - } - // animation stopped... - if(!elem.animating){ - setElementTransform(elem, cur) - runner.stop() - return - } - - // calculate target position for current step... - if(speed != null){ - // NOTE: these are inlined here for speed... - if(Math.abs(dist_top) >= 1){ - dy = ((t - start) * speed_y) - if(Math.abs(dist_top) > Math.abs(dy)){ - dist_top -= dy - cur_top = Math.round(cur_top + dy) - // normalize... - cur_top = Math.abs(dist_top) <= 1 ? to_top : cur_top - // calc speed for next step... - speed_y = dist_top / (duration - (t - start)) - } else { - cur_top = to_top - } - } - if(Math.abs(dist_left) >= 1){ - dx = ((t - start) * speed_x) - if(Math.abs(dist_left) > Math.abs(dx)){ - dist_left -= dx - cur_left = Math.round(cur_left + dx) - // normalize... - cur_left = Math.abs(dist_left) <= 1 ? to_left : cur_left - // calc speed for next step... - speed_x = dist_left / (duration - (t - start)) - } else { - cur_left = to_left - } - } - - // liner speed... - } else { - var r = (t - start) / duration - cur_top = Math.round(from_top + (dist_top * r)) - cur_left = Math.round(from_left + (dist_left * r)) - } - - // do the actual move... - setElementTransform(elem, { - top: cur_top, - left: cur_left - }) - }) - - elem.data('animating', runner) - return runner.start() -} - - -function stopAnimation2(elem){ - var runner = elem.data('animating') - if(runner != null){ - runner.stop() - } -} -*/ - - // XXX make this a drop-in replacement for setElementTransform... // XXX cleanup, still flacky... -function animateElementTo(elem, to, duration, easing, speed, use_transitions){ +function animateElementTo(elem, to, duration, easing, speed, callback, use_transitions){ // stop all ongoing animations on the current elem... stopAnimation(elem) use_transitions = use_transitions != null ? @@ -629,6 +504,11 @@ function animateElementTo(elem, to, duration, easing, speed, use_transitions){ elem.animating = true elem.next_frame = null + // remember step start position... + var s_t = cur.top + var s_l = cur.left + + function animate(){ // prevent running animations till next call of animateElementTo(..) if(elem.next_frame === false){ @@ -646,6 +526,10 @@ function animateElementTo(elem, to, duration, easing, speed, use_transitions){ return } + // remember step start position... + s_t = cur.top + s_l = cur.left + // animate a step with speed... if(speed != null){ // NOTE: these are almost identical, they are inlined @@ -684,6 +568,12 @@ function animateElementTo(elem, to, duration, easing, speed, use_transitions){ cur.left = Math.round(from.left + (dist.left * r)) } setElementTransform(elem, cur) + + callback != null && callback({ + x: cur.left - s_l, + y: cur.top - s_t, + }) + // sched next frame... elem.next_frame = getAnimationFrame(animate) } @@ -701,10 +591,6 @@ function stopAnimation(elem){ } } -// XXX for some odd reason the 2'nd gen. animation is jittery... -//animateElementTo = animateElementTo2 -//stopAnimation = stopAnimation2 - // XXX account for other transitions... function setElementScale(elem, scale){ diff --git a/lib/scroller.js b/lib/scroller.js index 371b49e..f155013 100755 --- a/lib/scroller.js +++ b/lib/scroller.js @@ -183,8 +183,10 @@ function makeScrollHandler(root, config){ prev_y = y prev_t = t - // XXX do we need to pass something to this? - options.scrollCallback && options.scrollCallback() + options.scrollCallback && options.scrollCallback({ + x: options.hScroll ? dx : 0, + y: options.vScroll ? dy : 0 + }) } return false }