From 6346b839531a01ef6776e0077564bb21982795a3 Mon Sep 17 00:00:00 2001
From: Tim Dresser <tdresser@chromium.org>
Date: Tue, 29 Apr 2014 11:27:34 -0400
Subject: [PATCH] Working with touch absorption and first touch-move
 disposition change.

---
 bower.json       |   4 +-
 index.html       |   5 +-
 polymer-p2r.html |   6 +-
 polymer-p2r.js   | 362 +++++++++++++++++++++++++++--------------------
 4 files changed, 219 insertions(+), 158 deletions(-)

diff --git a/bower.json b/bower.json
index 24f603c..fad9402 100644
--- a/bower.json
+++ b/bower.json
@@ -14,7 +14,7 @@
     "tests"
   ],
   "dependencies": {
-    "platform": "Polymer/platform#~0.2.0",
-    "polymer": "Polymer/polymer#~0.2.0"
+    "platform": "Polymer/platform#~0.2.2",
+    "polymer": "Polymer/polymer#~0.2.2"
   }
 }
diff --git a/index.html b/index.html
index ce95258..3e7265e 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <script src="bower_components/platform/platform.js"></script>
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="import" href="polymer-p2r.html">
+    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
     <title>Polymer Pull to Refresh demo</title>
   </head>
   <style>
@@ -40,9 +41,9 @@
       background-color: lightgrey;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
-      height:100px;
+      height:800px;
       text-align:center;
-      padding-top:50px;
+      padding-top:750px;
       width: 100%;
     }
 
diff --git a/polymer-p2r.html b/polymer-p2r.html
index c4e0fde..9e7d250 100644
--- a/polymer-p2r.html
+++ b/polymer-p2r.html
@@ -22,9 +22,9 @@
      :host #scrollcontent {
        position: relative;
        width: 100%;
-       /* Offset p2r height */
-       top: -100px;
-       margin-bottom:-100px;
+       /* Offset p2r height. TODO: pull this from the header object */
+       top: -800px;
+       margin-bottom:-800px;
      }
 
      :host #p2r {
diff --git a/polymer-p2r.js b/polymer-p2r.js
index a0584a5..770d14a 100644
--- a/polymer-p2r.js
+++ b/polymer-p2r.js
@@ -1,3 +1,117 @@
+// TODO: remove the one frame stutter when flinging in.
+// TODO: don't allow flinging past the bottom of the page when the header is up.
+
+function Overscroll() {
+  this.MAX_OFFSET = 800;
+
+  // Constants to configure spring physics
+  this.SPRING_CONSTANT = 0.0003;
+  this.DAMPING = 0.5;
+  this.SPRING_LERP_POW = 4;
+
+  var self = this;
+  var d = 0;
+  var v = 0;
+  var target = null;
+  var prev_time = 0;
+
+  // Time since last fling, or null if not in fling.
+  var fling_time = null;
+
+  // Only used for tweaking via developer console.
+  this.setParms = function(k, b) {
+    this.SPRING_CONSTANT = k;
+    this.DAMPING = b;
+  }
+
+  this.setTarget = function(t) {
+    target = t;
+    v = 0;
+    fling_time = null;
+    prev_time = 0;
+  }
+
+  this.setVelocity = function(vel) {
+    fling_time = 0;
+    v = vel;
+  }
+
+  this.addFriction = function(delta) {
+    if (delta < 0) {
+      return delta;
+    }
+
+    delta = delta/this.MAX_OFFSET;
+    if (delta > 1) {
+      delta = 1;
+    }
+    return this.MAX_OFFSET * (delta/2 - delta/2 * delta/2);
+  }
+
+  this.reachedTarget = function() {
+    return Math.abs(d - target) < 1 && v === 0;
+  }
+
+  this.step = function(time) {
+    if (target === null && v === 0) {
+      return;
+    }
+
+    var target_pos = target === null ? 0 : target;
+
+    var delta = time - prev_time;
+    // If we don't have information on elapsed time, assume it's been 30 ms
+    // since the last update.
+    if (prev_time === 0) {
+      delta = 30;
+    }
+
+    prev_time = time;
+    if (fling_time !== null) {
+      fling_time += delta;
+    }
+
+    if (d > this.MAX_OFFSET) {
+      d = this.MAX_OFFSET;
+      v = 0;
+    }
+
+    var lerp = 1;
+    if (fling_time !== null && fling_time < 500) {
+      lerp = fling_time / 500;
+    }
+
+    var a = Math.pow(lerp, this.SPRING_LERP_POW) *
+        (this.SPRING_CONSTANT * (target - d));
+    v += a * delta;
+    // Using the velocity after applying the acceleration due to the spring
+    // keeps the simulation more stable.
+    var dampening = Math.pow(lerp, this.SPRING_LERP_POW) * this.DAMPING * v;
+    v -= dampening;
+    d += v * delta;
+
+    if (target_pos - d > -1 && v <= 0) {
+      v = 0;
+      d = target;
+      target = null;
+      prev_time = 0;
+    }
+  }
+
+  this.setOffset = function(o) {
+    fling_time = Number.MAX_VALUE;
+    prev_time = 0;
+    target = null;
+    d = o;
+    v = 0;
+    this.step(0);
+  }
+
+  this.getOffset = function() {
+    return d;
+  }
+}
+
 // Performs an ordinary least squares regression.
 function VelocityCalculator(bufferSize) {
   var y_buffer = [];
@@ -38,6 +152,7 @@ function VelocityCalculator(bufferSize) {
   }
 }
 
+
 Polymer('polymer-p2r', {
   ready: function() {
     var self = this;
@@ -45,22 +160,18 @@ Polymer('polymer-p2r', {
     var p2r = self.$.p2r;
     var scrollcontent = self.$.scrollcontent;
     var framePending = false;
-    var overscrollOffset = 0;
+    var pullStartY = 0;
     var lastY = 0;
-    var startY = 0;
-    var pulling = false;
-    var loading = false;
-    var loadingOffset = 125;
-    var seenTouchMoveThisSequence = false;
+    var loadingOffset = 150;
     var fingersDown = 0;
-    var inFlingAnimation = false;
-    var velocityCalculator = new VelocityCalculator(5);
+    var overscroll = new Overscroll();
+
+    // expose for access via developer console.
+    window.overscroll = overscroll;
+    window.FLING_VELOCITY_MULTIPLIER = 1;
 
-    /*
-    TODO - see if there is a good way to avoid hardcoding this in the css.
-    scrollcontent.style.top="-100px";
-    scrollcontent.style.marginBottom="-100px";
-    */
+    var absorbNextTouchMove = false;
+    var velocityCalculator = new VelocityCalculator(3);
 
     function getHeaderClassName(name) {
       return self.className;
@@ -77,15 +188,24 @@ Polymer('polymer-p2r', {
     function checkPulled() {
       var triggerOffset = 60;
       if (getHeaderClassName() != 'loading') {
-        setHeaderClassName(overscrollOffset > triggerOffset ? 'pulled' : '');
+        setHeaderClassName(overscroll.getOffset() > triggerOffset ? 'pulled' : '');
       }
     }
 
-    function onAnimationFrame() {
+    function onAnimationFrame(time) {
       framePending = false;
       checkPulled();
-      translateY(scrollcontent, overscrollOffset);
-      translateY(p2r, overscrollOffset - p2r.clientHeight);
+      overscroll.step(time);
+
+      if (overscroll.getOffset() <= 0) {
+        scroller.scrollTop = -overscroll.getOffset();
+        overscroll.setOffset(0);
+      }
+      translateY(scrollcontent, overscroll.addFriction(overscroll.getOffset()));
+      translateY(p2r, overscroll.addFriction(overscroll.getOffset()) - p2r.clientHeight);
+      if (!overscroll.reachedTarget()) {
+        scheduleUpdate();
+      }
     }
 
     function scheduleUpdate() {
@@ -95,177 +215,117 @@ Polymer('polymer-p2r', {
       }
     }
 
-    function addFriction(delta) {
-      var scale = 2;
-      var maxDelta = 200;
-      delta /= scale;
-      if (delta > maxDelta)
-      delta = maxDelta;
-
-      // We want a curve that starts out linear, and slopes down
-      // to slope=0 by maxDelta.
-      var adj = delta - delta*delta/(2*maxDelta);
-      return adj;
+    function isP2rVisible() {
+      return scroller.scrollTop <= overscroll.getOffset();
     }
 
-    function setAnimationEnabled(enabled) {
-      var val = enabled ? '-webkit-transform 0.2s ease-in-out' : '';
-      scrollcontent.style.webkitTransition = val;
-      p2r.style.webkitTransition = val;
+    function isPulling() {
+      return overscroll.getOffset() > 0.2;
     }
 
-    function setOffset(offset) {
-      if (loading) {
-        offset += loadingOffset;
-      }
-      overscrollOffset = addFriction(offset);
-      scheduleUpdate();
-    }
+    function finishPull(e) {
+      fingersDown--;
 
-    function isP2rVisible() {
-      return scroller.scrollTop <= addFriction(loadingOffset);
-    }
+      if (!isPulling() || fingersDown != 0 || !isP2rVisible()) {
+        return;
+      }
 
-    function finishPull() {
-      if (!pulling) {
-        setOffset(0);
+      if (getHeaderClassName() == 'pulled') {
+        setHeaderClassName('loading');
+        setTimeout(finishLoading, 2000);
+        overscroll.setTarget(loadingOffset);
+      } else {
+        overscroll.setTarget(Math.max(0, scroller.scrollTop));
       }
+      scheduleUpdate();
     }
 
     function finishLoading() {
-      loading = false;
-      if (pulling) {
-        setHeaderClassName('');
-        checkPulled();
-      }
-      if (isP2rVisible()) {
-        setAnimationEnabled(true);
-        overscrollOffset = scroller.scrollTop;
+      setHeaderClassName('');
+      if (isP2rVisible() && fingersDown == 0) {
+        overscroll.setTarget(Math.max(0, scroller.scrollTop));
         scheduleUpdate();
       }
     }
 
     scroller.addEventListener('touchstart', function(e) {
-      if (inFlingAnimation) {
-        scrollcontent.removeEventListener('webkitTransitionEnd', firstEnd);
-        scrollcontent.addEventListener('webkitTransitionEnd', secondEnd);
-        scroller.addEventListener('scroll', onScrollEvent);
-      }
-      inFlingAnimation = false;
+      lastY = e.touches[0].screenY + scroller.scrollTop;
+      pullStartY = lastY;
       fingersDown++;
-      seenTouchMoveThisSequence = false;
-      if (e.touches.length == 1) {
-        lastY = e.touches[0].clientY;
-        setAnimationEnabled(false);
-        if (!loading) {
-          scroller.scrollTop -= overscrollOffset;
-          overscrollOffset = 0;
-          scheduleUpdate();
-          setHeaderClassName('');
-        }
+
+      if (isPulling()) {
+        absorbNextTouchMove = true;
       }
     });
 
     scroller.addEventListener('touchmove', function(e) {
-      if (!pulling &&
-          scroller.scrollTop === 0 &&
-          e.touches.length == 1 &&
-          e.touches[0].clientY > lastY) {
-        startY = e.touches[0].clientY;
-        pulling = true;
+      if (absorbNextTouchMove) {
+        pullStartY = e.touches[0].screenY - overscroll.getOffset();
+        absorbNextTouchMove = false;
+        e.preventDefault();
+        return;
       }
 
-      if (pulling) {
-        var offset = e.touches[0].clientY - startY;
-        if (offset >= 0) {
-          setOffset(offset);
-          // Don't preventDefault the first touchMove, it would prevent
-          // scroll from occurring.
-          if (seenTouchMoveThisSequence) {
-            e.preventDefault();
-          }
-        } else {
-          pulling = false;
-          finishPull();
-        }
-      }
-      seenTouchMoveThisSequence = true;
-      lastY = e.touches[0].clientY;
-    });
+      var scrollDelta = lastY - e.touches[0].screenY;
+      var startingNewPull = !isPulling() && scroller.scrollTop <= 0 && scrollDelta < 0;
+      lastY = e.touches[0].screenY;
 
-    scroller.addEventListener('touchcancel', function(e) {
-      fingersDown--;
-      finishPull();
-    });
-    scroller.addEventListener('touchend', function(e) {
-      fingersDown--;
-      setAnimationEnabled(true);
-      pulling = false;
-      if (getHeaderClassName() == 'pulled') {
-        setHeaderClassName('loading');
-        loading = true;
-        setOffset(0);
-        setTimeout(finishLoading, 2000);
-      } else {
-        finishPull();
-      }
-    });
+      var offset = e.touches[0].screenY - pullStartY;
 
-    var frame = 0;
-    var flingAnimationTimeSeconds = 0.2;
+      if(!startingNewPull && !isPulling()) {
+        return;
+      }
 
-    function secondEnd() {
-      scrollcontent.removeEventListener('webkitTransitionEnd', secondEnd);
-      scrollcontent.style['-webkit-animation'] = '';
-      scroller.addEventListener('scroll', onScrollEvent);
-    }
+      if (offset > 0) {
+        e.preventDefault();
+      }
 
-    function firstEnd() {
-      var val = '-webkit-transform ' + flingAnimationTimeSeconds + 's ease-in';
-      scrollcontent.style.webkitTransition = val;
-      p2r.style.webkitTransition = val;
+      isFirstTouchMove = false;
 
-      translateY(scrollcontent, overscrollOffset);
-      translateY(p2r, overscrollOffset - p2r.clientHeight);
+      overscroll.setOffset(offset);
+      scheduleUpdate();
+    });
 
-      scrollcontent.removeEventListener('webkitTransitionEnd', firstEnd);
-      scrollcontent.addEventListener('webkitTransitionEnd', secondEnd);
-    }
+//    var prevScrollTop = 0;
 
     function onScrollEvent(e) {
-      frame++;
-      velocityCalculator.addValue(scroller.scrollTop, window.performance.now());
-
-      var vel = velocityCalculator.getVelocity();
-      vel = Math.max(-2.5, vel);
-
-      // The higher the velocity, the longer the animation should be. We solve
-      // for the duration of the animation based on the kinematic equations,
-      // using a made up acceleration that feels about right. Note that since
-      // the animation path isn't a parabola, this isn't quite correct.
-      var acceleration = 10;
-      var duration = (-vel + Math.sqrt(vel*vel)) / acceleration;
-      var distance = -vel * (duration/2.0) +
-          0.5 * acceleration * (duration/2.0) * (duration/2.0);
-      distance *= 100;
-
-      if (distance < 10 || scroller.scrollTop > 10) {
+      if(isPulling()) {
         return;
       }
 
-      if (fingersDown == 0 && !inFlingAnimation) {
-        inFlingAnimation = true;
-        var val = '-webkit-transform ' + duration + 's ease-out';
-        scrollcontent.style.webkitTransition = val;
-        p2r.style.webkitTransition = val;
+      velocityCalculator.addValue(scroller.scrollTop, window.performance.now());
+      var vel = -velocityCalculator.getVelocity() * window.FLING_VELOCITY_MULTIPLIER;
+//      console.log(scroller.scrollTop);
+      // We want to tell if the next frame will fling into the overscroll
+      // region. Overestimate the next frame time, and use that to guess if
+      // we'll hit the overscroll region next frame.
+//      var next_delta_estimate = 300 * vel;
+//      console.log("this delta was " + (prevScrollTop - scroller.scrollTop));
+//      prevScrollTop = scroller.scrollTop;
+//
+//      console.log("next delta " + next_delta_estimate);
+//      console.log("scroll top " + scroller.scrollTop);
+//
+//      if (scroller.scrollTop > next_delta_estimate) {
+//        console.log("Abort fling");
+//        return;
+//      }
+//
+
+      if (scroller.scrollTop > 0) {
+        return;
+      }
 
-        scroller.removeEventListener('scroll', onScrollEvent);
-        scrollcontent.addEventListener('webkitTransitionEnd', firstEnd);
-        translateY(scrollcontent, distance);
-        translateY(p2r, distance - p2r.clientHeight);
+      if (fingersDown == 0) {
+        console.log("FLING " + vel)
+        overscroll.setTarget(0);
+        overscroll.setVelocity(vel);
+        scheduleUpdate();
       }
     }
 
     scroller.addEventListener('scroll', onScrollEvent);
+    scroller.addEventListener('touchcancel', finishPull);
+    scroller.addEventListener('touchend', finishPull);
   }
 });