Don't even try to use the scroll shit, it's broken

dist/js/ionic.js

@@ -2493,7 +2493,9 @@ window.ionic = {
       dragThresholdY: 10,
       resistance: 2,
       scrollEventName: 'momentumScrolled',
-      intertialEventInterval: 50
+      intertialEventInterval: 50,
+
+      bounceTime: 600 //how long to take when bouncing back in a rubber band
     });
 
     ionic.Utils.extend(this, opts);
@@ -2517,6 +2519,37 @@ window.ionic = {
     DECEL_RATE_FAST: 0.99,
     DECEL_RATE_SLOW: 0.996,
 
+    _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
+      var distance = current - start,
+        speed = Math.abs(distance) / time,
+        destination,
+        duration,
+        deceleration = 0.0006;
+
+      // Calculate the final desination
+      destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
+      duration = speed / deceleration;
+
+      // Check if the final destination needs to be rubber banded
+      if ( destination < lowerMargin ) {
+        // We have dragged too far down, snap back to the maximum
+        destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
+        distance = Math.abs(destination - current);
+        duration = distance / speed;
+      } else if ( destination > 0 ) {
+        // We have dragged too far up, snap back to 0
+        destination = 0;//wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
+        distance = Math.abs(current) + destination;
+        duration = distance / speed;
+      }
+
+      console.log('Momentum of time', time, speed, destination, duration);
+      return {
+        destination: Math.round(destination),
+        duration: duration
+      };
+    },
+
     /**
      * Scroll to the given X and Y point, taking 
      * the given amount of time, with the given
@@ -2562,6 +2595,8 @@ window.ionic = {
       this._isStopped = false;
     },
 
+
+
     _endTransition: function() {
       this._isDragging = false;
       this._drag = null;
@@ -2573,6 +2608,8 @@ window.ionic = {
       clearTimeout(this._momentumStepTimeout)
     },
 
+
+
     /**
      * Initialize a drag by grabbing the content area to drag, and any other
      * info we might need for the dragging.
@@ -2585,76 +2622,90 @@ window.ionic = {
       var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
 
       this._drag = {
+        direction: 'v',
         y: scrollTop,
         pointY: e.gesture.touches[0].pageY,
         startY: scrollTop,
         resist: 1,
-        startTime: +(new Date)
+        startTime: Date.now()
       };
     },
 
+
+
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this;
 
-      window.requestAnimationFrame(function() {
+      var content;
-        var content;
 
-        // The drag stopped already, don't process this one
+      // The drag stopped already, don't process this one
-        if(_this._isStopped) {
+      if(_this._isStopped) {
-          _this._initDrag();
+        _this._initDrag();
-          return;
+        return;
-        }
+      }
 
-        // We really aren't dragging
+      // We really aren't dragging
-        if(!_this._drag) {
+      if(!_this._drag) {
-          _this._startDrag(e);
+        _this._startDrag(e);
-        }
+      }
 
-        // Stop any default events during the drag
+      // Stop any default events during the drag
-        e.preventDefault();
+      e.preventDefault();
 
-        var py = e.gesture.touches[0].pageY;
+      var py = e.gesture.touches[0].pageY;
-        var deltaY = py - _this._drag.pointY;
+      var deltaY = py - _this._drag.pointY;
-        console.log("Delta y", deltaY);
+      console.log("Delta y", deltaY);
 
-        _this._drag.pointY = py;
+      _this._drag.pointY = py;
 
-        // Check if we should start dragging. Check if we've dragged past the threshold.
+      // Check if we should start dragging. Check if we've dragged past the threshold.
-        if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
+      if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
-          _this._isDragging = true;
+        _this._isDragging = true;
-        }
+      }
-
-        if(_this._isDragging) {
 
+      if(_this._isDragging) {
+        var drag = _this._drag;
+        window.requestAnimationFrame(function() {
           // We are dragging, grab the current content height
           // and the height of the parent container
           var totalHeight = _this.el.offsetHeight;
           var parentHeight = _this.el.parentNode.offsetHeight;
+          var timestamp = Date.now();
 
           // Calculate the new Y point for the container
-          var newY = _this._drag.y + deltaY;
+          var newY = drag.y + deltaY;
 
           // Check if the dragging is beyond the bottom or top
           if(newY > 0 || (-newY + parentHeight) > totalHeight) {
             // Rubber band
-            newY = _this._drag.y + deltaY / 3;//(-_this.resistance);
+            newY = drag.y + deltaY / 3;//(-_this.resistance);
           }
           // Update the new translated Y point of the container
           _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
 
-          _this._drag.y = newY;
+          drag.y = newY;
+
+          // Check if we need to reset the drag initial states if we've
+          // been dragging for a bit
+          if(timestamp - drag.startTime > 300) {
+            console.log('Resetting timer');
+            drag.startTime = timestamp;
+            drag.startY = drag.y;
+          }
 
           ionic.trigger(_this.scrollEventName, {
             target: _this.el,
             scrollTop: -newY
           });
-        }
+        });
-      });
+      }
     },
 
+
+
     _handleEndDrag: function(e) {
       // We didn't have a drag, so just init and leave
       if(!this._drag) {
@@ -2672,56 +2723,59 @@ window.ionic = {
     },
 
 
+    // Find the stopping point given the current velocity and acceleration rate, and
+    // animate to that position
     _animateToStop: function(e) {
       var _this = this;
 
-      var totalHeight = this.el.offsetHeight;
+      if(this._drag.direction == 'v') {
-      var parentHeight = this.el.parentNode.offsetHeight;
+        this._animateToStopVertical(e);
-      var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
+      } else {
-      var duration = +(new Date) - this._drag.startTime;
+        this._animateToStopHorizontal(e);
-
-      var newY = scrollTop;
-
-      if(e.gesture.velocityY) {
-        // Get the final resting point
-        var vy = e.gesture.velocityY;
-        var speed = Math.abs(e.gesture.deltaY) / duration;
-        //newY = newY + (vy * vy) / (0.05 * this.decelerationRate);
-
-		    var destination = newY + ( speed * speed ) / ( 2 * (1-_this.decelerationRate)) * ( e.gesture.deltaY < 0 ? -1 : 1 );
-        var dur = speed / (1-_this.decelerationRate);
-
-        if((-destination + parentHeight) > totalHeight) {
-          destination = -(totalHeight - parentHeight);
-        } else if(destination > 0) {
-          destination = 0;
-        }
-
-        console.log('Ending at velocity and point', speed, vy, destination, dur);
-
-
-        var el = this.el;
-          
-        window.requestAnimationFrame(function() {
-          _this.scrollTo(0, destination, dur);
-        });
       }
 
-      /*
+    },
-      // Check if the dragging is beyond the bottom or top
-      */
 
-      /*
+    _animateToStopHorizontal: function(e) {
-      setTimeout(function() {
+    },
-        window.requestAnimationFrame(function() {
-          _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
-        });
-      }, 50);
-      */
     
-      // Turn on animation
+    _animateToStopVertical: function(e) {
-      this.el.classList.add('scroll-scrolling');
+      var _this = this;
+      window.requestAnimationFrame(function() {
+        var drag = _this._drag;
 
+        // Calculate the viewport height and the height of the content
+        var totalHeight = _this.el.offsetHeight;
+        var parentHeight = _this.el.parentNode.offsetHeight;
+
+        // Calculate how long we've been dragging for, with a max of 300ms
+        var duration = Math.min(300, (Date.now()) - _this._drag.startTime);
+
+
+        //var newX = Math.round(this.x),
+        var newY = Math.round(drag.y);
+        //distanceX = Math.abs(newX - this.startX),
+        //var distanceY = Math.abs(newY - drag.startY);
+
+
+        var momentum = _this._getMomentum(drag.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
+        //var newX = momentumX.destination;
+        newY = momentum.destination;
+        var time = momentum.duration;
+
+        if(drag.y > 0) {
+          _this.scrollTo(0, 0, _this.bounceTime);
+          return;
+        } else if ((-drag.y + parentHeight) > totalHeight) {
+          _this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
+          return;
+        }
+
+        var el = _this.el;
+        
+        // Turn on animation
+        _this.scrollTo(0, newY, time);
+      });
     }
   };
 

js/views/scrollView.js

@@ -10,7 +10,9 @@
       dragThresholdY: 10,
       resistance: 2,
       scrollEventName: 'momentumScrolled',
-      intertialEventInterval: 50
+      intertialEventInterval: 50,
+
+      bounceTime: 600 //how long to take when bouncing back in a rubber band
     });
 
     ionic.Utils.extend(this, opts);
@@ -34,6 +36,37 @@
     DECEL_RATE_FAST: 0.99,
     DECEL_RATE_SLOW: 0.996,
 
+    _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
+      var distance = current - start,
+        speed = Math.abs(distance) / time,
+        destination,
+        duration,
+        deceleration = 0.0006;
+
+      // Calculate the final desination
+      destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
+      duration = speed / deceleration;
+
+      // Check if the final destination needs to be rubber banded
+      if ( destination < lowerMargin ) {
+        // We have dragged too far down, snap back to the maximum
+        destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
+        distance = Math.abs(destination - current);
+        duration = distance / speed;
+      } else if ( destination > 0 ) {
+        // We have dragged too far up, snap back to 0
+        destination = 0;//wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
+        distance = Math.abs(current) + destination;
+        duration = distance / speed;
+      }
+
+      console.log('Momentum of time', time, speed, destination, duration);
+      return {
+        destination: Math.round(destination),
+        duration: duration
+      };
+    },
+
     /**
      * Scroll to the given X and Y point, taking 
      * the given amount of time, with the given
@@ -79,6 +112,8 @@
       this._isStopped = false;
     },
 
+
+
     _endTransition: function() {
       this._isDragging = false;
       this._drag = null;
@@ -90,6 +125,8 @@
       clearTimeout(this._momentumStepTimeout)
     },
 
+
+
     /**
      * Initialize a drag by grabbing the content area to drag, and any other
      * info we might need for the dragging.
@@ -102,76 +139,90 @@
       var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
 
       this._drag = {
+        direction: 'v',
         y: scrollTop,
         pointY: e.gesture.touches[0].pageY,
         startY: scrollTop,
         resist: 1,
-        startTime: +(new Date)
+        startTime: Date.now()
       };
     },
 
+
+
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this;
 
-      window.requestAnimationFrame(function() {
+      var content;
-        var content;
 
-        // The drag stopped already, don't process this one
+      // The drag stopped already, don't process this one
-        if(_this._isStopped) {
+      if(_this._isStopped) {
-          _this._initDrag();
+        _this._initDrag();
-          return;
+        return;
-        }
+      }
 
-        // We really aren't dragging
+      // We really aren't dragging
-        if(!_this._drag) {
+      if(!_this._drag) {
-          _this._startDrag(e);
+        _this._startDrag(e);
-        }
+      }
 
-        // Stop any default events during the drag
+      // Stop any default events during the drag
-        e.preventDefault();
+      e.preventDefault();
 
-        var py = e.gesture.touches[0].pageY;
+      var py = e.gesture.touches[0].pageY;
-        var deltaY = py - _this._drag.pointY;
+      var deltaY = py - _this._drag.pointY;
-        console.log("Delta y", deltaY);
+      console.log("Delta y", deltaY);
 
-        _this._drag.pointY = py;
+      _this._drag.pointY = py;
 
-        // Check if we should start dragging. Check if we've dragged past the threshold.
+      // Check if we should start dragging. Check if we've dragged past the threshold.
-        if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
+      if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
-          _this._isDragging = true;
+        _this._isDragging = true;
-        }
+      }
-
-        if(_this._isDragging) {
 
+      if(_this._isDragging) {
+        var drag = _this._drag;
+        window.requestAnimationFrame(function() {
           // We are dragging, grab the current content height
           // and the height of the parent container
           var totalHeight = _this.el.offsetHeight;
           var parentHeight = _this.el.parentNode.offsetHeight;
+          var timestamp = Date.now();
 
           // Calculate the new Y point for the container
-          var newY = _this._drag.y + deltaY;
+          var newY = drag.y + deltaY;
 
           // Check if the dragging is beyond the bottom or top
           if(newY > 0 || (-newY + parentHeight) > totalHeight) {
             // Rubber band
-            newY = _this._drag.y + deltaY / 3;//(-_this.resistance);
+            newY = drag.y + deltaY / 3;//(-_this.resistance);
           }
           // Update the new translated Y point of the container
           _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
 
-          _this._drag.y = newY;
+          drag.y = newY;
+
+          // Check if we need to reset the drag initial states if we've
+          // been dragging for a bit
+          if(timestamp - drag.startTime > 300) {
+            console.log('Resetting timer');
+            drag.startTime = timestamp;
+            drag.startY = drag.y;
+          }
 
           ionic.trigger(_this.scrollEventName, {
             target: _this.el,
             scrollTop: -newY
           });
-        }
+        });
-      });
+      }
     },
 
+
+
     _handleEndDrag: function(e) {
       // We didn't have a drag, so just init and leave
       if(!this._drag) {
@@ -189,56 +240,59 @@
     },
 
 
+    // Find the stopping point given the current velocity and acceleration rate, and
+    // animate to that position
     _animateToStop: function(e) {
       var _this = this;
 
-      var totalHeight = this.el.offsetHeight;
+      if(this._drag.direction == 'v') {
-      var parentHeight = this.el.parentNode.offsetHeight;
+        this._animateToStopVertical(e);
-      var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
+      } else {
-      var duration = +(new Date) - this._drag.startTime;
+        this._animateToStopHorizontal(e);
-
-      var newY = scrollTop;
-
-      if(e.gesture.velocityY) {
-        // Get the final resting point
-        var vy = e.gesture.velocityY;
-        var speed = Math.abs(e.gesture.deltaY) / duration;
-        //newY = newY + (vy * vy) / (0.05 * this.decelerationRate);
-
-		    var destination = newY + ( speed * speed ) / ( 2 * (1-_this.decelerationRate)) * ( e.gesture.deltaY < 0 ? -1 : 1 );
-        var dur = speed / (1-_this.decelerationRate);
-
-        if((-destination + parentHeight) > totalHeight) {
-          destination = -(totalHeight - parentHeight);
-        } else if(destination > 0) {
-          destination = 0;
-        }
-
-        console.log('Ending at velocity and point', speed, vy, destination, dur);
-
-
-        var el = this.el;
-          
-        window.requestAnimationFrame(function() {
-          _this.scrollTo(0, destination, dur);
-        });
       }
 
-      /*
+    },
-      // Check if the dragging is beyond the bottom or top
-      */
 
-      /*
+    _animateToStopHorizontal: function(e) {
-      setTimeout(function() {
+    },
-        window.requestAnimationFrame(function() {
-          _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
-        });
-      }, 50);
-      */
     
-      // Turn on animation
+    _animateToStopVertical: function(e) {
-      this.el.classList.add('scroll-scrolling');
+      var _this = this;
+      window.requestAnimationFrame(function() {
+        var drag = _this._drag;
 
+        // Calculate the viewport height and the height of the content
+        var totalHeight = _this.el.offsetHeight;
+        var parentHeight = _this.el.parentNode.offsetHeight;
+
+        // Calculate how long we've been dragging for, with a max of 300ms
+        var duration = Math.min(300, (Date.now()) - _this._drag.startTime);
+
+
+        //var newX = Math.round(this.x),
+        var newY = Math.round(drag.y);
+        //distanceX = Math.abs(newX - this.startX),
+        //var distanceY = Math.abs(newY - drag.startY);
+
+
+        var momentum = _this._getMomentum(drag.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
+        //var newX = momentumX.destination;
+        newY = momentum.destination;
+        var time = momentum.duration;
+
+        if(drag.y > 0) {
+          _this.scrollTo(0, 0, _this.bounceTime);
+          return;
+        } else if ((-drag.y + parentHeight) > totalHeight) {
+          _this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
+          return;
+        }
+
+        var el = _this.el;
+        
+        // Turn on animation
+        _this.scrollTo(0, newY, time);
+      });
     }
   };
 

starters/weather/index.html

@@ -57,7 +57,7 @@
     s.addEventListener('momentumScrolled', function(e) {
       setTimeout(function() {
         var bgAmount = e.detail.scrollTop;
-        bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 40) + 'px, 0)';
+        //bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 20) + 'px, 0)';
 
         //var blurAmount = Math.min(3, e.detail.scrollTop / 200);
 

test/scroll.html

@@ -23,7 +23,7 @@
         <h1 class="title">Scroll Me</h1>
         <a href="#" class="button button-danger button-clear">Delete</a>
       </div>
-      <div id="scroller" class="scroll" style="margin-top:44px">
+      <div id="scroller" class="scroll" style="top:44px">
         <!--<div id="filler" style="height: 1400px; background: url('tree_bark.png') repeat;"></div>-->
         <ul class="list">
         </ul>

test/scroll_horiz.html

@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Scroll Horiz</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      #filler {
+        border-top: 10px solid red;
+        border-bottom: 10px solid red;
+      }
+      .list-item {
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <section class="view-full">
+      <div class="bar bar-header bar-secondary">
+        <a href="#" class="button button-danger button-clear">Edit</a>
+        <h1 class="title">Scroll Me</h1>
+        <a href="#" class="button button-danger button-clear">Delete</a>
+      </div>
+      <div id="scroller" class="scroll" style="margin-top:44px">
+        <div id="filler" style="width: 1400px; height: 300px; background: url('tree_bark.png') repeat;"></div>
+      </div>
+    </section>
+    <script src="../dist/js/ionic.js"></script>
+    <script>
+      var s = document.getElementById('scroller');
+
+      for(var i = 0; i < 100; i++) {
+        var li = document.createElement('li');
+        li.className = 'list-item';
+        li.innerHTML = 'Item ' + i;
+        s.firstElementChild.appendChild(li);
+      }
+
+      var scroll = new ionic.views.ScrollView({
+        el: s
+      });
+    </script>
+  </body>
+</html>