Permalink
Browse files

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

  • Loading branch information...
bigopon committed Jan 13, 2019
1 parent c1fe513 commit a5cb0842b8da1974e2259095c3272d2c51417b2d
Showing with 11 additions and 60 deletions.
  1. +11 −56 src/template-strategy.ts
  2. +0 −4 src/virtual-repeat.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;
}

/**
@@ -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`;
}

0 comments on commit a5cb084

Please sign in to comment.