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

where ResizeObserver is support, restore anchored node on resize

Browse source
This commit is contained in:
Bruno Windels 2021-09-15 17:23:28 +02:00
parent 04edff29cf
commit 2c415e37e7
1 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/platform/web/ui/session/room/TimelineView.ts
View file

@ -69,6 +69,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
private anchoredBottom: number = 0; private anchoredBottom: number = 0;
private stickToBottom: boolean = true; private stickToBottom: boolean = true;
private tilesView?: TilesListView; private tilesView?: TilesListView;
private resizeObserver?: ResizeObserver;
render(t: TemplateBuilder, vm: TimelineViewModel) { render(t: TemplateBuilder, vm: TimelineViewModel) {
// assume this view will be mounted in the parent DOM straight away // assume this view will be mounted in the parent DOM straight away
@ -77,9 +78,26 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
this.restoreScrollPosition(); this.restoreScrollPosition();
}); });
this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition()); this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition());
return t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [ const root = t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
t.view(this.tilesView) t.view(this.tilesView)
]); ]);
if (typeof ResizeObserver === "function") {
this.resizeObserver = new ResizeObserver(() => {
this.restoreScrollPosition();
});
this.resizeObserver.observe(root);
}
return root;
}
public unmount() {
super.unmount();
if (this.resizeObserver) {
this.resizeObserver.unobserve(this.root());
this.resizeObserver = null;
}
} }
private restoreScrollPosition() { private restoreScrollPosition() {