Fixed infinity problem in scroll view

I guess you can't divide by zero still.

dist/js/ionic-angular.js

@@ -374,7 +374,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 .directive('listItem', function() {
   return {
     restrict: 'E',
-    require: '^list',
+    require: ['?^list', '?^virtualList'],
     replace: true,
     transclude: true,
     scope: {
@@ -409,6 +409,13 @@ angular.module('ionic.ui.list', ['ngAnimate'])
                    </div>\
                 </li>',*/
     link: function($scope, $element, $attr, list) {
+      // Grab the parent list controller
+      if(list[0]) {
+        list = list[0];
+      } else if(list[1]) {
+        list = list[1];
+      }
+
       $scope.isEditing = false;
       $scope.deleteIcon = list.scope.deleteIcon;
       $scope.reorderIcon = list.scope.reorderIcon;
@@ -454,6 +461,53 @@ angular.module('ionic.ui.list', ['ngAnimate'])
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});
 
+        if(attr.animation) {
+          $element.addClass(attr.animation);
+        }
+      };
+    }
+  };
+})
+
+.directive('virtualList', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+
+    scope: {
+      isEditing: '=',
+      deleteIcon: '@',
+      reorderIcon: '@',
+      itemHeight: '@'
+    },
+
+    // So we can require being under this
+    controller: function($scope) {
+      var _this = this;
+
+      this.scope = $scope;
+
+      $scope.$watch('isEditing', function(v) {
+        _this.isEditing = true;
+      });
+    },
+
+    template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
+              </ul></div>',
+
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr) {
+        var lv = new ionic.views.ListView({
+          el: $element[0],
+          listEl: $element[0].children[0],
+          isVirtual: true,
+          itemHeight: $scope.itemHeight,
+          renderViewport: function(high, low, start, end) {
+            console.log('RENDER VIEWPORT', high, low, start, end);
+          }
+        });
+
         if(attr.animation) {
           $element.addClass(attr.animation);
         }

js/ext/angular/src/directive/ionicList.js

@@ -6,7 +6,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 .directive('listItem', function() {
   return {
     restrict: 'E',
-    require: '^list',
+    require: ['?^list', '?^virtualList'],
     replace: true,
     transclude: true,
     scope: {
@@ -41,6 +41,13 @@ angular.module('ionic.ui.list', ['ngAnimate'])
                    </div>\
                 </li>',*/
     link: function($scope, $element, $attr, list) {
+      // Grab the parent list controller
+      if(list[0]) {
+        list = list[0];
+      } else if(list[1]) {
+        list = list[1];
+      }
+
       $scope.isEditing = false;
       $scope.deleteIcon = list.scope.deleteIcon;
       $scope.reorderIcon = list.scope.reorderIcon;
@@ -86,6 +93,53 @@ angular.module('ionic.ui.list', ['ngAnimate'])
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});
 
+        if(attr.animation) {
+          $element.addClass(attr.animation);
+        }
+      };
+    }
+  };
+})
+
+.directive('virtualList', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+
+    scope: {
+      isEditing: '=',
+      deleteIcon: '@',
+      reorderIcon: '@',
+      itemHeight: '@'
+    },
+
+    // So we can require being under this
+    controller: function($scope) {
+      var _this = this;
+
+      this.scope = $scope;
+
+      $scope.$watch('isEditing', function(v) {
+        _this.isEditing = true;
+      });
+    },
+
+    template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
+              </ul></div>',
+
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr) {
+        var lv = new ionic.views.ListView({
+          el: $element[0],
+          listEl: $element[0].children[0],
+          isVirtual: true,
+          itemHeight: $scope.itemHeight,
+          renderViewport: function(high, low, start, end) {
+            console.log('RENDER VIEWPORT', high, low, start, end);
+          }
+        });
+
         if(attr.animation) {
           $element.addClass(attr.animation);
         }

js/ext/angular/test/biglist.html

@@ -0,0 +1,161 @@
+<html ng-app="navtest">
+  <head>
+    <meta charset="utf-8">
+    <title>Big List</title>
+
+    <!-- sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
+    <script src="/vendor/angular/angular-touch.js"></script>
+    <script src="/vendor/angular/angular-animate.js"></script>
+    <style>
+.my-repeat-animation > .ng-enter, 
+.my-repeat-animation > .ng-leave, 
+.my-repeat-animation > .ng-move {
+  -webkit-transition: 0.2s linear all;
+  transition: 0.2s linear all;
+  position:relative;
+}
+
+.my-repeat-animation > .ng-enter {
+  left:-10px;
+  opacity:0;
+}
+.my-repeat-animation > .ng-enter.ng-enter-active {
+  left:0;
+  opacity:1;
+}
+
+.my-repeat-animation > .ng-leave {
+  left:0;
+  opacity:1;
+}
+.my-repeat-animation > .ng-leave.ng-leave-active {
+  left:-10px;
+  opacity:0;
+}
+
+.my-repeat-animation > .ng-move {
+  opacity:0.5;
+}
+.my-repeat-animation > .ng-move.ng-move-active {
+  opacity:1;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 2px solid rgba(255,255,255,0.4);
+  border-radius: 40px;
+  margin: auto;
+  margin-bottom: 100px;
+}
+.spin-thing {
+  width: 10px;
+  height: 10px;
+  background-color: #4a87ee;
+  border-radius: 10px;
+}
+    </style>
+
+  </head>
+  <body>
+
+    <content ng-controller="testctrl" class="reveal-animation">
+      <virtual-list is-editing="iseditingitems" on-refresh-holding="almostrefreshing()" on-refresh-opening="almostrefreshprojects(ratio)" on-refresh="refreshprojects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
+        <list-refresher>
+          <spinner ratio="refreshratio.ratio"></spinner>
+        </list-refresher>
+        <list-item ng-repeat="item in items" 
+            buttons="item.buttons"
+            can-delete="true"
+            can-reorder="true"
+            can-swipe="true"
+            on-delete="deleteproject(project)"
+            on-select="selectproject(project)">
+          {{item.text}}
+          <i class="{{item.icon}}"></i>
+        </list-item>
+      </virtual-list>
+      <button ng-click="edit()" class="button button-success">edit</button>
+    </content>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('navtest', ['ionic.ui.list', 'ionic.ui.content', 'ngAnimate'])
+
+      .directive('spinner', function() {
+        return {
+          restrict: 'e',
+          replace: true,
+          scope: {
+            ratio: '='
+          },
+          template: '<div class="spinner"><div class="spin-thing"></div></div>',
+          link: function($scope, $element, $attr) {
+            $scope.$watch('ratio', function(value) {
+              if(value > 0.97) {
+                value = 1;
+              }
+
+              var a = (value * 360) % 360;
+              var r = (a * math.pi) / 180;
+              var x = (math.sin(r) * 20) + 14;
+              var y = (math.cos(r) * -20) + 14;
+
+              $element[0].firstelementchild.style.webkittransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+              //$element[0].firstelementchild.setattribute('d', anim);
+            });
+          }
+        }
+      })
+
+      .controller('testctrl', function($scope) {
+        $scope.refreshratio = { ratio: 0 };
+        var removeitem = function(item) {
+          // remove ourselves
+          $scope.items.splice($scope.items.indexof(item), 1);
+        };
+
+        $scope.almostrefreshing = function() {
+          console.log('holding for refresh');
+        };
+        $scope.almostrefreshprojects = function(amt) {
+          console.log('almost refreshing', amt);
+          $scope.refreshratio.ratio = amt;
+          $scope.$apply();
+        };
+
+        $scope.refreshprojects = function() {
+          console.log("refreshing");
+        };
+
+        $scope.items = [];
+        for(var i = 0; i < 500; i++) {
+          $scope.items.push({
+            text: 'item ' + i,
+            candelete: true,
+            canswipe: true,
+            canreorder: true,
+            icon: 'icon-chevron-right',
+            hide: false,
+            deleteitem: removeitem,
+            buttons: [{
+              text: 'kill',
+              type: 'button-danger',
+              buttonclicked: removeitem,
+            }]
+          });
+        }
+
+        $scope.edit = function() {
+          $scope.iseditingitems = !$scope.iseditingitems;
+        }
+      });
+
+    </script>
+  </body>
+</html>
+

js/views/listViewScroll.js

@@ -403,26 +403,46 @@
       refresher.style.height = '0px';
     },
 
+    /**
+     * If we scrolled and have virtual mode enabled, compute the window
+     * of active elements in order to figure out the viewport to render.
+     */
     didScroll: function(e) {
       if(this.isVirtual) {
         var itemHeight = this.itemHeight;
+
+        // TODO: This would be inaccurate if we are windowed
         var totalItems = this.listEl.children.length;
 
+        // Grab the total height of the list
         var scrollHeight = e.target.scrollHeight;
+
+        // Get the viewport height
         var viewportHeight = this.el.parentNode.offsetHeight;
 
+        // scrollTop is the current scroll position
         var scrollTop = e.scrollTop;
 
+        // High water is the pixel position of the first element to include (everything before
+        // that will be removed)
         var highWater = Math.max(0, e.scrollTop + this.virtualRemoveThreshold);
+
+        // Low water is the pixel position of the last element to include (everything after
+        // that will be removed)
         var lowWater = Math.min(scrollHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
 
+        // Compute how many items per viewport size can show
         var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
+
+        // Get the first and last elements in the list based on how many can fit
+        // between the pixel range of lowWater and highWater
         var first = parseInt(Math.abs(highWater / itemHeight));
         var last = parseInt(Math.abs(lowWater / itemHeight));
 
-
+        // Get the items we need to remove
         this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
 
+        // Grab the nodes we will be showing
         var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
 
         this.renderViewport && this.renderViewport(highWater, lowWater, first, last);

js/views/scrollView.js

@@ -122,6 +122,8 @@
     _scrollTo: function(x, y, time, easing) {
       var _this = this;
 
+      time = time || 0;
+
       var start = Date.now();
 
       easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
@@ -150,6 +152,10 @@
         time = 0;
       }
 
+      if(time == Infinity) {
+        debugger;
+      }
+
       var dx = ox - x;
       var dy = oy - y;
 
@@ -336,6 +342,13 @@
       destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
       duration = speed / deceleration;
 
+      if(speed === 0) {
+        return {
+          destination: current,
+          duration: 0
+        };
+      }
+
       // Check if the final destination needs to be rubber banded
       if ( destination < lowerMargin ) {
         // We have dragged too far down, snap back to the maximum
@@ -635,6 +648,9 @@
       });
     },
 
+    /**
+     * Trigger a done scrolling event.
+     */
     _doneScrolling: function() {
       this.didStopScrolling && this.didStopScrolling({
         target: this.el,

test/biglists.html

@@ -22,7 +22,7 @@
 
     <main id="content" class="scroll">
 
-        <div id="list" class="list scroll">
+        <div id="list" class="list">
 
           <div class="item-divider">
             Work