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

Find height of container from DOM

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-07-12 20:41:33 +05:30
parent 5338457ea0
commit d3a8e95962
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/platform/web/ui/general/LazyListView.js
View file

@ -55,12 +55,11 @@ class ItemRange {
}
export class LazyListView extends ListView {
constructor({itemHeight, height, ...options}, childCreator) {
constructor({itemHeight, overflowMargin = 5, overflowItems = 20,...options}, childCreator) {
super(options, childCreator);
this._itemHeight = itemHeight;
this._height = height;
this._overflowMargin = 5;
this._overflowItems = 20;
this._overflowMargin = overflowMargin;
this._overflowItems = overflowItems;
}
_getVisibleRange() {
@ -83,16 +82,32 @@ export class LazyListView extends ListView {
// console.log("renderRange", renderRange);
// console.log("intersectRange", intersectRange);
// console.log("LastRenderedRange", this._renderRange);
// only update render Range if the list has shrunk/grown and we need to adjust padding OR
// if the new range + overflowMargin isn't contained by the old anymore
if (listHasChangedSize || !this._renderRange || !this._renderRange.contains(intersectRange)) {
console.log("New render change");
console.log("scrollTop", this._parent.scrollTop);
// only update render Range if the new range + overflowMargin isn't contained by the old anymore
if (listHasChangedSize || !this._renderRange.contains(intersectRange)) {
// console.log("New render change");
// console.log("scrollTop", this._parent.scrollTop);
this._renderRange = renderRange;
this._renderElementsInRange();
}
}
async _initialRender() {
/*
Wait two frames for the return from mount() to be inserted into DOM.
This should be enough, but if this gives us trouble we can always use
MutationObserver.
*/
await new Promise(r => requestAnimationFrame(r));
await new Promise(r => requestAnimationFrame(r));
this._height = this._parent.clientHeight;
if(this._height === 0) { throw "LazyListView could not calculate parent height."}
const range = this._getVisibleRange();
const renderRange = range.expand(this._overflowItems);
this._renderRange = renderRange;
this._renderElementsInRange();
}
_renderItems(items) {
this._childInstances = [];
const fragment = document.createDocumentFragment();
@ -126,14 +141,14 @@ export class LazyListView extends ListView {
Do we need to do more (like event throttling)?
*/
this._parent.addEventListener("scroll", () => this._renderIfNeeded());
this._renderIfNeeded();
this._initialRender();
return this._parent;
}
update(attributes) {
this._renderRange = null;
super.update(attributes);
this._renderIfNeeded();
this._initialRender();
}
loadList() {

1
src/platform/web/ui/session/rightpanel/MemberListView.js
View file

@ -7,7 +7,6 @@ export class MemberListView extends TemplateView {
return t.view(new LazyListView({
list: vm.memberTileViewModels,
className: "MemberListView",
height: 691,
itemHeight: 32
}, tileViewModel => new MemberTileView(tileViewModel)));
}