feat(virtual-repeat): no need for surrounding container

aurelia · Mar 16, 2016 · 37c68bb · 37c68bb
1 parent 4805482
commit 37c68bb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/dist/system/virtual-repeat-strategy-locator.js b/dist/system/virtual-repeat-strategy-locator.js
@@ -1,4 +1,4 @@
-System.register(['aurelia-templating-resources/repeat-strategy-locator', './array-virtual-repeat-strategy'], function (_export) {
+System.register(['aurelia-templating-resources', './array-virtual-repeat-strategy'], function (_export) {
   'use strict';
 
   var RepeatStrategyLocator, ArrayVirtualRepeatStrategy, VirtualRepeatStrategyLocator;
@@ -8,8 +8,8 @@ System.register(['aurelia-templating-resources/repeat-strategy-locator', './arra
   function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
   return {
-    setters: [function (_aureliaTemplatingResourcesRepeatStrategyLocator) {
-      RepeatStrategyLocator = _aureliaTemplatingResourcesRepeatStrategyLocator.RepeatStrategyLocator;
+    setters: [function (_aureliaTemplatingResources) {
+      RepeatStrategyLocator = _aureliaTemplatingResources.RepeatStrategyLocator;
     }, function (_arrayVirtualRepeatStrategy) {
       ArrayVirtualRepeatStrategy = _arrayVirtualRepeatStrategy.ArrayVirtualRepeatStrategy;
     }],

diff --git a/src/utilities.js b/src/utilities.js
@@ -8,14 +8,15 @@ export function calcOuterHeight(element){
   return height;
 }
 
-export function insertBeforeNode(view, scrollView, node) {
+export function insertBeforeNode(view, bottomBuffer) {
   let viewStart = view.firstChild;
   let element = viewStart.nextSibling;
   let viewEnd = view.lastChild;  
+  let parentElement = bottomBuffer.parentElement;
 
-  scrollView.insertBefore(viewEnd, node);
-  scrollView.insertBefore(element, viewEnd);
-  scrollView.insertBefore(viewStart, element);
+  parentElement.insertBefore(viewEnd, bottomBuffer);
+  parentElement.insertBefore(element, viewEnd);
+  parentElement.insertBefore(viewStart, element);
 }
 
 /**
@@ -45,10 +46,10 @@ export function rebindAndMoveView(repeat: VirtualRepeat, view: View, index: numb
   view.bindingContext[repeat.local] = items[index];
   if(moveToBottom) {
     viewSlot.children.push(viewSlot.children.shift());
-    repeat.viewStrategy.moveViewLast(view, repeat.scrollList, viewSlot.children.length);    
+    repeat.viewStrategy.moveViewLast(view, repeat.bottomBuffer);    
   } else {
     viewSlot.children.unshift(viewSlot.children.splice(-1,1)[0]);
-    repeat.viewStrategy.moveViewFirst(view, repeat.scrollList);
+    repeat.viewStrategy.moveViewFirst(view, repeat.topBuffer);
   }
 }
 

diff --git a/src/view-strategy.js b/src/view-strategy.js
@@ -60,12 +60,12 @@ export class DefaultStrategy {
     return this.getScrollList(element).parentElement;
   }
 
-  moveViewFirst(view, scrollElement) {
-    insertBeforeNode(view, scrollElement, scrollElement.childNodes[2]);
+  moveViewFirst(view, topBuffer) {
+    insertBeforeNode(view, topBuffer.nextElementSibling.previousSibling);
   }
 
-  moveViewLast(view, scrollElement, childrenLength) {
-    insertBeforeNode(view, scrollElement, scrollElement.children[childrenLength + 1]);
+  moveViewLast(view, bottomBuffer) {
+    insertBeforeNode(view, bottomBuffer);
   }
 
   createTopBufferElement(scrollList, element) {

diff --git a/src/virtual-repeat-strategy-locator.js b/src/virtual-repeat-strategy-locator.js
@@ -1,4 +1,4 @@
-import {RepeatStrategyLocator} from 'aurelia-templating-resources/repeat-strategy-locator';
+import {RepeatStrategyLocator} from 'aurelia-templating-resources';
 import {ArrayVirtualRepeatStrategy} from './array-virtual-repeat-strategy';
 
 export class VirtualRepeatStrategyLocator extends RepeatStrategyLocator {

diff --git a/src/virtual-repeat.js b/src/virtual-repeat.js
@@ -193,7 +193,7 @@ export class VirtualRepeat {
       return;      
     }
     let itemHeight = this.itemHeight;
-    let scrollTop = this._fixedHeightContainer ? this.scrollContainer.scrollTop : pageYOffset - this.scrollContainer.offsetTop;
+    let scrollTop = this._fixedHeightContainer ? this.topBuffer.scrollTop : pageYOffset - this.scrollContainer.offsetTop;
     this._first = Math.floor(scrollTop / itemHeight);
     this._first = this._first < 0 ? 0 : this._first;
     this._checkScrolling();
@@ -215,7 +215,7 @@ export class VirtualRepeat {
         this._adjustBufferHeights();
       }
     // move view up?
-    } else if (this._scrollingUp && (this._hasScrolledUpTheBuffer() || this._switchedDirection)) {
+    } else if (this._scrollingUp && (this._hasScrolledUpTheBuffer() || (this._switchedDirection && this._hasScrolledUpTheBufferFromBottom()))) { 
       let viewsToMove = this._lastRebind - this._first;
       if(this._switchedDirection) {
           if(this.isLastIndex) {
@@ -297,6 +297,10 @@ export class VirtualRepeat {
   _hasScrolledUpTheBuffer() {
     return this._lastRebind - this._first >= this._bufferSize;
   } 
+
+  _hasScrolledUpTheBufferFromBottom() {
+    return this._first + this._bufferSize < this.items.length;
+  }
 
   _adjustBufferHeights() {
     this.topBuffer.setAttribute('style', `height:  ${this._topBufferHeight}px`);
@@ -349,7 +353,7 @@ export class VirtualRepeat {
     this._itemsLength = this.items.length;
     let listItems = this.scrollList.children;
     this.itemHeight = calcOuterHeight(listItems[1]);
-    this.scrollContainerHeight = this._fixedHeightContainer ? this._calcScrollHeight(this.scrollContainer) : document.documentElement.clientHeight - this.scrollContainer.offsetTop;
+    this.scrollContainerHeight = this._fixedHeightContainer ? this._calcScrollHeight(this.scrollContainer) : document.documentElement.clientHeight - this.topBuffer.offsetTop;
     this.elementsInView = Math.ceil(this.scrollContainerHeight / this.itemHeight) + 1;
     this._viewsLength = (this.elementsInView * 2) + this._bufferSize;
     this._bottomBufferHeight = this.itemHeight * this.items.length - this.itemHeight * this._viewsLength;    
@@ -367,7 +371,7 @@ export class VirtualRepeat {
     height -= getStyleValue(element, 'borderTopWidth');
     height -= getStyleValue(element, 'borderBottomWidth');
     return height;
-}
+  }
 
   _observeInnerCollection() {
     let items = this._getInnerCollection();