feat(template-strategy): fix issue with calculating top buffer distance

Author: bigopon

src/template-strategy.ts

@@ -112,19 +112,6 @@ export class TableRowStrategy implements ITemplateStrategy {
 
   static inject = [DomHelper];
 
-  // tableCssReset = '\
-  //   display: block;\
-  //   width: auto;\
-  //   height: auto;\
-  //   margin: 0;\
-  //   padding: 0;\
-  //   border: none;\
-  //   border-collapse: inherit;\
-  //   border-spacing: 0;\
-  //   background-color: transparent;\
-  //   -webkit-border-horizontal-spacing: 0;\
-  //   -webkit-border-vertical-spacing: 0;';
-
   domHelper: DomHelper;
 
   constructor(domHelper: DomHelper) {
@@ -136,71 +123,39 @@ export class TableRowStrategy implements ITemplateStrategy {
   }
 
   moveViewFirst(view: View, topBuffer: Element): void {
-    const tbody = this._getFirstTbody(topBuffer.nextSibling as HTMLTableElement);
-    const tr = tbody.firstChild;
-    const firstElement = DOM.nextElementSibling(tr);
-    insertBeforeNode(view, firstElement);
+    insertBeforeNode(view, topBuffer.nextElementSibling);
   }
 
   moveViewLast(view: View, bottomBuffer: Element): void {
-    const lastElement = this.getLastElement(bottomBuffer).nextSibling;
-    const referenceNode = lastElement.nodeType === 8 && (lastElement as Comment).data === 'anchor' ? lastElement : lastElement;
+    const previousSibling = bottomBuffer.previousSibling;
+    const referenceNode = previousSibling.nodeType === 8 && (previousSibling as Comment).data === 'anchor' ? previousSibling : bottomBuffer;
     insertBeforeNode(view, referenceNode as Element);
   }
 
   createTopBufferElement(element: Element): HTMLElement {
-    const elementName = /^[UO]L$/.test((element.parentNode as Element).tagName) ? 'li' : 'div';
-    const buffer = DOM.createElement(elementName);
-    const tableElement = this.getTable(element);
-    tableElement.parentNode.insertBefore(buffer, tableElement);
-    buffer.innerHTML = ' ';
-    return buffer;
+    // append tbody with empty row before the element
+    return element.parentNode.insertBefore(DOM.createElement('tr'), element);
   }
 
   createBottomBufferElement(element: Element): HTMLElement {
-    const elementName = /^[UO]L$/.test((element.parentNode as Element).tagName) ? 'li' : 'div';
-    const buffer = DOM.createElement(elementName);
-    const tableElement = this.getTable(element);
-    tableElement.parentNode.insertBefore(buffer, tableElement.nextSibling);
-    return buffer;
+    return element.parentNode.insertBefore(DOM.createElement('tr'), element.nextSibling);
   }
 
   removeBufferElements(element: Element, topBuffer: Element, bottomBuffer: Element): void {
-    topBuffer.parentNode.removeChild(topBuffer);
-    bottomBuffer.parentNode.removeChild(bottomBuffer);
+    DOM.removeNode(topBuffer);
+    DOM.removeNode(bottomBuffer);
   }
 
   getFirstElement(topBuffer: Element): Element {
-    const tbody = this._getFirstTbody(DOM.nextElementSibling(topBuffer) as HTMLTableElement);
-    const tr = tbody.firstElementChild as HTMLTableRowElement;
-    // since the buffer is outside table, first element _is_ first element.
-    return tr;
+    return topBuffer.nextElementSibling;
   }
 
   getLastElement(bottomBuffer: Element): Element {
-    const tbody = this._getLastTbody(bottomBuffer.previousSibling as HTMLTableElement);
-    return tbody.lastElementChild as HTMLTableRowElement;
+    return bottomBuffer.previousElementSibling;
   }
 
   getTopBufferDistance(topBuffer: Element): number {
-    const tbody = this._getFirstTbody(topBuffer.nextSibling as HTMLTableElement);
-    return this.domHelper.getElementDistanceToTopOfDocument(tbody) - this.domHelper.getElementDistanceToTopOfDocument(topBuffer);
-  }
-
-  private _getFirstTbody(tableElement: HTMLTableElement): HTMLTableSectionElement {
-    let child = tableElement.firstElementChild;
-    while (child !== null && child.tagName !== 'TBODY') {
-      child = child.nextElementSibling;
-    }
-    return child.tagName === 'TBODY' ? child as HTMLTableSectionElement : null;
-  }
-
-  private _getLastTbody(tableElement: HTMLTableElement): HTMLTableSectionElement {
-    let child = tableElement.lastElementChild;
-    while (child !== null && child.tagName !== 'TBODY') {
-      child = child.previousElementSibling;
-    }
-    return child.tagName === 'TBODY' ? child as HTMLTableSectionElement : null;
+    return 0;
   }
 
   /**

src/virtual-repeat.ts

@@ -503,10 +503,6 @@ export class VirtualRepeat extends AbstractRepeater implements IVirtualRepeat {
   }
 
   _adjustBufferHeights(): void {
-    // let templateStrategy = this.templateStrategy;
-    // let { topBuffer, _topBufferHeight, bottomBuffer, _bottomBufferHeight } = this;
-    // templateStrategy.adjustBufferHeight(topBuffer, _topBufferHeight);
-    // templateStrategy.adjustBufferHeight(bottomBuffer, _bottomBufferHeight);
     this.topBuffer.style.height = `${this._topBufferHeight}px`;
     this.bottomBuffer.style.height = `${this._bottomBufferHeight}px`;
   }