Pass list view window virt test

dist/css/ionic-ios7.css

@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1727,7 +1727,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -1799,7 +1799,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1814,7 +1814,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2099,7 +2099,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2441,9 +2441,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2456,9 +2456,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/css/ionic-scoped.css

@@ -1027,7 +1027,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid #c0c0c0; }
+    border: 1px solid silver; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -2385,7 +2385,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2434,7 +2434,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color .1s ease-in-out; }
+      transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2447,7 +2447,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity .05s ease-in-out;
+    transition: opacity 0.05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2799,7 +2799,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px #fff; }
+        text-shadow: 0px 0px 10px white; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -3051,9 +3051,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3065,9 +3065,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,

dist/css/ionic.css

@@ -1261,7 +1261,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2870,7 +2870,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -2925,7 +2925,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2940,7 +2940,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3320,7 +3320,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3767,9 +3767,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3782,9 +3782,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

js/views/listViewScroll.js

@@ -413,27 +413,24 @@
 
         var scrollTop = e.scrollTop;
 
-        var highWater = e.scrollTop + this.virtualRemoveThreshold;
+        var highWater = Math.min(0, e.scrollTop + this.virtualRemoveThreshold);
-        var lowWater = Math.min(scrollHeight + viewportHeight, e.scrollTop + viewportHeight + this.virtualAddThreshold);
+        var lowWater = Math.min(scrollHeight - viewportHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
 
-        //console.log('LIST VIEW SCROLLED', e, itemHeight, scrollHeight, viewportHeight);
         var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
-        var first = parseInt(highWater / itemHeight);
+        var first = parseInt(Math.abs(highWater / itemHeight));
-        var last = parseInt(lowWater / itemHeight);
+        var last = parseInt(Math.abs(lowWater / itemHeight));
 
-        //console.log('FITS', itemsPerViewport, 'per page, starting at', first);
 
         this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
 
         var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
 
-        this.renderViewport && this.renderViewport(highWater, lowWater, first, last);
+        this.renderViewport && this.renderViewport(-highWater, lowWater, first, last);
       }
     },
 
     didStopScrolling: function(e) {
       if(this.isVirtual) {
-        //console.log('DONE SCROLLING, Need to remove', this._virtualItemsToRemove);
         for(var i = 0; i < this._virtualItemsToRemove.length; i++) {
           var el = this._virtualItemsToRemove[i];
           //el.parentNode.removeChild(el);

js/views/scrollView.js

@@ -115,26 +115,39 @@
       // Start triggering events as the element scrolls from inertia.
       // This is important because we need to receive scroll events
       // even after a "flick" and adjust, etc.
-      this._momentumStepTimeout = setTimeout(function eventNotify() {
+      if(time > 0) {
-        var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
+        this._momentumStepTimeout = setTimeout(function eventNotify() {
-        var scrollLeft = parseFloat(trans[0] || 0);
+          var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(',');
-        var scrollTop = parseFloat(trans[1] || 0);
+          var scrollLeft = parseFloat(trans[0] || 0);
+          var scrollTop = parseFloat(trans[1] || 0);
 
-        _this.didScroll && _this.didScroll({
+          _this.didScroll && _this.didScroll({
-          target: _this.el,
+            target: _this.el,
-          scrollLeft: -scrollLeft,
+            scrollLeft: -scrollLeft,
-          scrollTop: -scrollTop
+            scrollTop: -scrollTop
-        });
+          });
-        ionic.trigger(_this.scrollEventName, {
+          ionic.trigger(_this.scrollEventName, {
-          target: _this.el,
+            target: _this.el,
-          scrollLeft: -scrollLeft,
+            scrollLeft: -scrollLeft,
-          scrollTop: -scrollTop
+            scrollTop: -scrollTop
-        });
+          });
 
-        if(_this._isDragging) {
+          if(_this._isDragging) {
-          _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
+            _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
-        }
+          }
-      }, this.inertialEventInterval)
+        }, this.inertialEventInterval);
+      } else {
+        this.didScroll && this.didScroll({
+          target: this.el,
+          scrollLeft: -this.x,
+          scrollTop: -this.y
+        });
+        ionic.trigger(this.scrollEventName, {
+          target: this.el,
+          scrollLeft: -this.x,
+          scrollTop: -this.y
+        });
+      }
     },
 
     needsWrapping: function() {

test/js/views/listView.unit.js

@@ -15,6 +15,10 @@ describe('List View', function() {
       li.style.height = '50px';
       l.appendChild(li);
     }
+
+    document.body.style.height='1000px';
+
+    document.body.appendChild(h);
   });
 
   it('Should init', function() {
@@ -38,13 +42,31 @@ describe('List View', function() {
       el: h,
       listEl: listEl,
       isVirtual: true,
-      itemHeight: 50
+      itemHeight: 50,
+      virtualRemoveThreshold: -200,
+      virtualAddThreshold: 200
     });
-
-    expect(list.itemHeight).toEqual(50);
-
     list.renderViewport = function(high, low, start, end) {
     };
+
+    var spy = spyOn(list, 'renderViewport');
+
+    var height = h.scrollHeight;
+    var itemHeight = list.itemHeight;
+    var totalItems = height / itemHeight;
+    var viewportHeight = list.el.parentNode.offsetHeight;
+
+    // set up scroll top
+    var scrollTop = 1000;
+    var start = (scrollTop + -list.virtualRemoveThreshold) / itemHeight;
+    var end = (scrollTop + viewportHeight + list.virtualAddThreshold) / itemHeight;
+
+    //console.log(height, itemHeight, totalItems, viewportHeight);
+
+    list.scrollTo(0, scrollTop);
+
+    expect(list.renderViewport).toHaveBeenCalledWith(scrollTop + -list.virtualRemoveThreshold,
+        scrollTop + viewportHeight + list.virtualAddThreshold, start, end);
   });
 
 });