feat(virtual-repeat): pass location state to scroll callback

Author: AStoker

README.md

@@ -98,15 +98,20 @@ If you are running the plugin in the `skeleton-naviagion` project, make sure to
 ```javascript
 export class MyVirtualList {
     items = ['Foo', 'Bar', 'Baz'];
-    getMore() {
+    getMore(topIndex, isAtBottom, isAtTop) {
         for(let i = 0; i < 100; ++i) {
             this.items.push('item' + i);
         }
     }
 }
 ```  
 The `virtual-repeat-next` attribute can accept a function, a promise, or a function that returns a promise.  
-The bound function will be called when the scroll container has reached a point where there are no more items to move into the DOM (i.e. when it reaches the end of a list).
+The bound function will be called when the scroll container has reached a point where there are no more items to move into the DOM (i.e. when it reaches the end of a list, either from the top or the bottom).  
+There are three parameters that are passed to the function (`getMore(topIndex, isAtBottom, isAtTop)`) which helps determine the behavior or amount of items to get during scrolling.    
+1. `topIndex` - A integer value that represents the current item that exists at the top of the rendered items in the DOM.  
+2. `isAtBottom` - A boolean value that indicates whether the list has been scrolled to the bottom of the items list.  
+3. `isAtTop` - A boolean value that indicates whether the list has been scrolled to the top of the items list.
+
 
 ## [Demo](http://aurelia.io/ui-virtualization/)
 

src/virtual-repeat.js

@@ -227,7 +227,9 @@ export class VirtualRepeat extends AbstractRepeater {
       this._lastRebind = this._first;
       let movedViewsCount = this._moveViews(viewsToMove);
       let adjustHeight = movedViewsCount < viewsToMove ? this._bottomBufferHeight : itemHeight * movedViewsCount;
-      this._getMore();
+      if (viewsToMove > 0) {
+        this._getMore();
+      }
       this._switchedDirection = false;
       this._topBufferHeight = this._topBufferHeight + adjustHeight;
       this._bottomBufferHeight = this._bottomBufferHeight - adjustHeight;
@@ -248,6 +250,9 @@ export class VirtualRepeat extends AbstractRepeater {
       let movedViewsCount = this._moveViews(viewsToMove);
       this.movedViewsCount = movedViewsCount;
       let adjustHeight = movedViewsCount < viewsToMove ? this._topBufferHeight : itemHeight * movedViewsCount;
+      if (viewsToMove > 0) {
+        this._getMore();
+      }
       this._switchedDirection = false;
       this._topBufferHeight = this._topBufferHeight - adjustHeight;
       this._bottomBufferHeight = this._bottomBufferHeight + adjustHeight;
@@ -261,7 +266,7 @@ export class VirtualRepeat extends AbstractRepeater {
   }
 
   _getMore(): void {
-    if (this.isLastIndex) {
+    if (this.isLastIndex || this._first === 0) {
       if (!this._calledGetMore) {
         let getMoreFunc = this.view(0).firstChild.getAttribute('virtual-repeat-next');
         if (!getMoreFunc) {
@@ -275,7 +280,7 @@ export class VirtualRepeat extends AbstractRepeater {
               this._calledGetMore = false; //Reset for the next time
             });
           } else if (typeof getMore === 'function') {
-            let result = getMore.bind(this.scope.overrideContext.bindingContext)();
+            let result = getMore.bind(this.scope.overrideContext.bindingContext)(this._first, this._bottomBufferHeight === 0, this._isAtTop);
             if (!(result instanceof Promise)) {
               this._calledGetMore = false; //Reset for the next time
             } else {

test/virtual-repeat-integration.spec.js

@@ -107,6 +107,26 @@ describe('VirtualRepeat Integration', () => {
       });
   }
 
+  function validateScrollUp(done) {
+      let elem = document.getElementById('scrollContainer');
+      let event = new Event('scroll');
+      elem.scrollTop = elem.scrollHeight/2; //Scroll down but not far enough to reach bottom and call 'getNext'
+      elem.dispatchEvent(event);
+      window.setTimeout(()=>{
+          window.requestAnimationFrame(() => {
+            let eventUp = new Event('scroll');
+            elem.scrollTop = 0;
+            elem.dispatchEvent(eventUp);
+            window.setTimeout(()=>{
+                window.requestAnimationFrame(() => {
+                  validateScrolledState();
+                  done();
+                });
+            });
+          });
+      });
+  }
+
   function validatePush(done) {
     viewModel.items.push('Foo');
     nq(() => validateState());
@@ -438,6 +458,14 @@ describe('VirtualRepeat Integration', () => {
               })
           });
       });
+      it('handles getting next data set scrolling up', done => {
+        create.then(() => {
+            validateScrollUp(() => {
+                expect(vm.getNextPage).toHaveBeenCalledWith(0, false, true);
+                done();
+            });
+        });
+      });
       it('handles getting next data set with promises', done => {
           promisedCreate.then(() => {
               validateScroll(() => {
@@ -447,6 +475,13 @@ describe('VirtualRepeat Integration', () => {
               })
           });
       });
-
+      it('passes the current index and location state', done => {
+        create.then(() => {
+            validateScroll(() => {
+                expect(vm.getNextPage).toHaveBeenCalledWith(989, true, false);
+                done();
+            })
+        });
+      })
   })
 });