fix(virtual-scroll): only allow one readUpdate per update

This commit is contained in:
Adam Bradley
2016-12-08 15:19:24 -06:00
parent 104723ecda
commit 8104cfac57
2 changed files with 25 additions and 23 deletions

View File

@ -188,6 +188,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
_scrollSub: any; _scrollSub: any;
_scrollEndSub: any; _scrollEndSub: any;
_init: boolean; _init: boolean;
_lastEle: boolean;
_hdrFn: Function; _hdrFn: Function;
_ftrFn: Function; _ftrFn: Function;
_records: any[] = []; _records: any[] = [];
@ -354,24 +355,25 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
// wait for the content to be rendered and has readable dimensions // wait for the content to be rendered and has readable dimensions
_content.readReady.subscribe(() => { _content.readReady.subscribe(() => {
this.readUpdate(true); if (this._hasChanges()) {
this.readUpdate();
if (!this._scrollSub) { // wait for the content to be writable
// listen for scroll events var subscription = _content.writeReady.subscribe(() => {
this.addScrollListener(config.getBoolean('virtualScrollEventAssist')); subscription.unsubscribe();
this.writeUpdate();
});
if (!this._scrollSub) {
// listen for scroll events
this.addScrollListener(config.getBoolean('virtualScrollEventAssist'));
}
} }
}); });
// wait for the content to be writable
_content.writeReady.subscribe(() => {
this.writeUpdate();
});
} }
readUpdate(dimensionsUpdated: boolean) { readUpdate() {
if (!this._records) return; console.debug(`virtual-scroll, readUpdate`);
console.debug(`virtual-scroll, readUpdate, dimensionsUpdated: ${dimensionsUpdated}`);
// reset everything // reset everything
this._cells.length = 0; this._cells.length = 0;
@ -384,12 +386,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
this.approxHeaderWidth, this.approxHeaderHeight, this.approxHeaderWidth, this.approxHeaderHeight,
this.approxFooterWidth, this.approxFooterHeight, this.approxFooterWidth, this.approxFooterHeight,
this.bufferRatio); this.bufferRatio);
} }
writeUpdate() { writeUpdate() {
if (!this._records) return;
console.debug(`virtual-scroll, writeUpdate`); console.debug(`virtual-scroll, writeUpdate`);
processRecords(this._data.renderHeight, processRecords(this._data.renderHeight,
@ -414,7 +413,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
if (this._init && this._hasChanges()) { if (this._init && this._hasChanges()) {
// only continue if we've already initialized // only continue if we've already initialized
// and if there actually are changes // and if there actually are changes
this.readUpdate(false); this.readUpdate();
this.writeUpdate(); this.writeUpdate();
} }
} }
@ -485,10 +484,13 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
(<any>nodes[i].view).detectChanges(); (<any>nodes[i].view).detectChanges();
} }
// add an element at the end so :last-child css doesn't get messed up if (!this._lastEle) {
// ******** DOM WRITE **************** // add an element at the end so :last-child css doesn't get messed up
const lastEle: HTMLElement = renderer.createElement(ele, 'div'); // ******** DOM WRITE ****************
lastEle.className = 'virtual-last'; var lastEle: HTMLElement = renderer.createElement(ele, 'div');
lastEle.className = 'virtual-last';
this._lastEle = true;
}
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
renderer.setElementClass(ele, 'virtual-scroll', true); renderer.setElementClass(ele, 'virtual-scroll', true);

View File

@ -381,7 +381,7 @@ function readElements(cell: VirtualCell, element: VirtualHtmlElement) {
const styles = window.getComputedStyle(<any>element); const styles = window.getComputedStyle(<any>element);
// ******** DOM READ **************** // ******** DOM READ ****************
cell.left = (element.offsetLeft - parseFloat(styles.marginLeft)); cell.left = (element.clientLeft - parseFloat(styles.marginLeft));
// ******** DOM READ **************** // ******** DOM READ ****************
cell.width = (element.offsetWidth + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight)); cell.width = (element.offsetWidth + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight));
@ -508,7 +508,7 @@ export function getVirtualHeight(totalRecords: number, lastCell: VirtualCell): n
* NO DOM * NO DOM
*/ */
export function estimateHeight(totalRecords: number, lastCell: VirtualCell, existingHeight: number, difference: number): number { export function estimateHeight(totalRecords: number, lastCell: VirtualCell, existingHeight: number, difference: number): number {
if (!totalRecords) { if (!totalRecords || !lastCell) {
return 0; return 0;
} }