mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages 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 { export class LazyListView extends ListView {
constructor({itemHeight, height, ...options}, childCreator) { constructor({itemHeight, overflowMargin = 5, overflowItems = 20,...options}, childCreator) {
super(options, childCreator); super(options, childCreator);
this._itemHeight = itemHeight; this._itemHeight = itemHeight;
this._height = height; this._overflowMargin = overflowMargin;
this._overflowMargin = 5; this._overflowItems = overflowItems;
this._overflowItems = 20;
} }
_getVisibleRange() { _getVisibleRange() {
@ -83,16 +82,32 @@ export class LazyListView extends ListView {
// console.log("renderRange", renderRange); // console.log("renderRange", renderRange);
// console.log("intersectRange", intersectRange); // console.log("intersectRange", intersectRange);
// console.log("LastRenderedRange", this._renderRange); // console.log("LastRenderedRange", this._renderRange);
// only update render Range if the list has shrunk/grown and we need to adjust padding OR // only update render Range if the new range + overflowMargin isn't contained by the old anymore
// if the new range + overflowMargin isn't contained by the old anymore if (listHasChangedSize || !this._renderRange.contains(intersectRange)) {
if (listHasChangedSize || !this._renderRange || !this._renderRange.contains(intersectRange)) { // console.log("New render change");
console.log("New render change"); // console.log("scrollTop", this._parent.scrollTop);
console.log("scrollTop", this._parent.scrollTop);
this._renderRange = renderRange; this._renderRange = renderRange;
this._renderElementsInRange(); 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) { _renderItems(items) {
this._childInstances = []; this._childInstances = [];
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
@ -126,14 +141,14 @@ export class LazyListView extends ListView {
Do we need to do more (like event throttling)? Do we need to do more (like event throttling)?
*/ */
this._parent.addEventListener("scroll", () => this._renderIfNeeded()); this._parent.addEventListener("scroll", () => this._renderIfNeeded());
this._renderIfNeeded(); this._initialRender();
return this._parent; return this._parent;
} }
update(attributes) { update(attributes) {
this._renderRange = null; this._renderRange = null;
super.update(attributes); super.update(attributes);
this._renderIfNeeded(); this._initialRender();
} }
loadList() { 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({ return t.view(new LazyListView({
list: vm.memberTileViewModels, list: vm.memberTileViewModels,
className: "MemberListView", className: "MemberListView",
height: 691,
itemHeight: 32 itemHeight: 32
}, tileViewModel => new MemberTileView(tileViewModel))); }, tileViewModel => new MemberTileView(tileViewModel)));
} }