keep filling gaps while viewport not filled or new content < 100px

This commit is contained in:
Bruno Windels 2020-08-17 16:34:58 +02:00
parent 08de7c3569
commit b6cbb03edd

View File

@ -40,19 +40,38 @@ export class TimelineList extends ListView {
this._viewModel = viewModel; this._viewModel = viewModel;
} }
async _onScroll() { async _loadAtTopWhile(predicate) {
const root = this.root(); try {
if (root.scrollTop < 100 && !this._topLoadingPromise && this._viewModel) { while (predicate()) {
const beforeFromBottom = this._distanceFromBottom(); // fill, not enough content to fill timeline
this._topLoadingPromise = this._viewModel.loadAtTop(); this._topLoadingPromise = this._viewModel.loadAtTop();
await this._topLoadingPromise; await this._topLoadingPromise;
const fromBottom = this._distanceFromBottom(); }
const amountGrown = fromBottom - beforeFromBottom; }
root.scrollTop = root.scrollTop + amountGrown; catch (err) {
//ignore error, as it is handled in the VM
}
finally {
this._topLoadingPromise = null; this._topLoadingPromise = null;
} }
} }
async _onScroll() {
const PAGINATE_OFFSET = 100;
const root = this.root();
if (root.scrollTop < PAGINATE_OFFSET && !this._topLoadingPromise && this._viewModel) {
// to calculate total amountGrown to check when we stop loading
let beforeContentHeight = root.scrollHeight;
// to adjust scrollTop every time
let lastContentHeight = beforeContentHeight;
// load until pagination offset is reached again
this._loadAtTopWhile(() => {
const contentHeight = root.scrollHeight;
const amountGrown = contentHeight - beforeContentHeight;
root.scrollTop = root.scrollTop + (contentHeight - lastContentHeight);
lastContentHeight = contentHeight;
return amountGrown < PAGINATE_OFFSET;
});
} }
} }
@ -70,8 +89,16 @@ export class TimelineList extends ListView {
loadList() { loadList() {
super.loadList(); super.loadList();
const root = this.root(); const root = this.root();
const {scrollHeight, clientHeight} = root;
if (scrollHeight > clientHeight) {
root.scrollTop = root.scrollHeight; root.scrollTop = root.scrollHeight;
} }
// load while viewport is not filled
this._loadAtTopWhile(() => {
const {scrollHeight, clientHeight} = root;
return scrollHeight <= clientHeight;
});
}
onBeforeListChanged() { onBeforeListChanged() {
const fromBottom = this._distanceFromBottom(); const fromBottom = this._distanceFromBottom();
@ -84,8 +111,8 @@ export class TimelineList extends ListView {
} }
onListChanged() { onListChanged() {
if (this._atBottom) {
const root = this.root(); const root = this.root();
if (this._atBottom) {
root.scrollTop = root.scrollHeight; root.scrollTop = root.scrollHeight;
} }
} }