mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Bruno Windels 2020-08-17 16:34:58 +02:00
parent 08de7c3569
commit b6cbb03edd
1 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/ui/web/session/room/TimelineList.js
View file

@ -40,19 +40,38 @@ export class TimelineList extends ListView {
this._viewModel = viewModel;
}
async _onScroll() {
const root = this.root();
if (root.scrollTop < 100 && !this._topLoadingPromise && this._viewModel) {
const beforeFromBottom = this._distanceFromBottom();
this._topLoadingPromise = this._viewModel.loadAtTop();
await this._topLoadingPromise;
const fromBottom = this._distanceFromBottom();
const amountGrown = fromBottom - beforeFromBottom;
root.scrollTop = root.scrollTop + amountGrown;
async _loadAtTopWhile(predicate) {
try {
while (predicate()) {
// fill, not enough content to fill timeline
this._topLoadingPromise = this._viewModel.loadAtTop();
await this._topLoadingPromise;
}
}
catch (err) {
//ignore error, as it is handled in the VM
}
finally {
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,7 +89,15 @@ export class TimelineList extends ListView {
loadList() {
super.loadList();
const root = this.root();
root.scrollTop = root.scrollHeight;
const {scrollHeight, clientHeight} = root;
if (scrollHeight > clientHeight) {
root.scrollTop = root.scrollHeight;
}
// load while viewport is not filled
this._loadAtTopWhile(() => {
const {scrollHeight, clientHeight} = root;
return scrollHeight <= clientHeight;
});
}
onBeforeListChanged() {
@ -84,8 +111,8 @@ export class TimelineList extends ListView {
}
onListChanged() {
const root = this.root();
if (this._atBottom) {
const root = this.root();
root.scrollTop = root.scrollHeight;
}
}