mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 19:45:05 +01:00
Code Issues Projects Releases Wiki Activity

WIP 2

Browse Source
This commit is contained in:
RMidhunSuresh 2021-07-27 13:24:36 +05:30 committed by Bruno Windels
parent 1a28b4f887
commit 61402e798e
1 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/platform/web/ui/general/LazyListView.js
View File

@ -84,16 +84,17 @@ class ItemRange {
} }
diff(range) { diff(range) {
const diffResult = {}; const scrollDirection = this.scrollDirectionTo(range);
if (this.scrollDirectionTo(range) === ScrollDirection.downwards) { let toRemove, toAdd;
diffResult.toRemove = { start: this.topCount, end: range.topCount - 1 }; if (scrollDirection === ScrollDirection.downwards) {
diffResult.toAdd = { start: this.lastIndex + 1, end: range.lastIndex }; toRemove = { start: this.topCount, end: range.topCount - 1 };
toAdd = { start: this.lastIndex, end: range.lastIndex };
} }
else { else {
diffResult.toRemove = { start: range.lastIndex + 1, end: this.lastIndex }; toRemove = { start: range.lastIndex, end: this.lastIndex };
diffResult.toAdd = { start: range.topCount, end: this.topCount - 1 }; toAdd = { start: range.topCount, end: this.topCount - 1 };
} }
return diffResult; return { toRemove, toAdd, scrollDirection };
} }
} }
@ -130,8 +131,7 @@ export class LazyListView extends ListView {
console.log("new", renderRange); console.log("new", renderRange);
console.log("current", this._renderRange); console.log("current", this._renderRange);
console.log("diff", this._renderRange.diff(renderRange)); console.log("diff", this._renderRange.diff(renderRange));
this._renderRange = renderRange; this._renderElementsInRange(renderRange);
this._renderElementsInRange();
} }
} }
@ -149,7 +149,18 @@ export class LazyListView extends ListView {
const range = this._getVisibleRange(); const range = this._getVisibleRange();
const renderRange = range.expand(this._overflowItems); const renderRange = range.expand(this._overflowItems);
this._renderRange = renderRange; this._renderRange = renderRange;
this._renderElementsInRange();
const { topCount, renderCount } = this._renderRange;
const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
this._adjustPadding(renderRange);
this._childInstances = [];
const fragment = document.createDocumentFragment();
for (const item of renderedItems) {
const view = this._childCreator(item);
this._childInstances.push(view);
fragment.appendChild(mountView(view, this._mountArgs));
}
this._root.appendChild(fragment);
} }
_itemsFromList(start, end) { _itemsFromList(start, end) {
@ -175,29 +186,58 @@ export class LazyListView extends ListView {
return null; return null;
} }
_adjustPadding() { _adjustPadding(range) {
const { topCount, bottomCount } = range;
}
_renderElementsInRange(range) {
const { topCount, renderCount, bottomCount } = this._renderRange;
const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
const paddingTop = topCount * this._itemHeight; const paddingTop = topCount * this._itemHeight;
const paddingBottom = bottomCount * this._itemHeight; const paddingBottom = bottomCount * this._itemHeight;
this._root.style.paddingTop = `${paddingTop}px`; this._root.style.paddingTop = `${paddingTop}px`;
this._root.style.paddingBottom = `${paddingBottom}px`; this._root.style.paddingBottom = `${paddingBottom}px`;
}
for (const child of this._childInstances) { _renderedFragment(items, childInstanceModifier) {
this._removeChild(child);
}
this._childInstances = [];
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
for (const item of renderedItems) { for (const item of items) {
const view = this._childCreator(item); const view = this._childCreator(item);
this._childInstances.push(view); childInstanceModifier(view);
fragment.appendChild(mountView(view, this._mountArgs)); fragment.appendChild(mountView(view, this._mountArgs));
} }
this._root.appendChild(fragment); return fragment;
}
_renderElementsInRange(range) {
const diff = this._renderRange.diff(range);
const {start, end} = diff.toAdd;
const renderedItems = this._itemsFromList(start, end);
this._adjustPadding(range);
if (diff.scrollDirection === ScrollDirection.downwards) {
const {start, end} = diff.toRemove;
this._childInstances.splice(0, end - start + 1)
.forEach(child => this._removeChild(child));
const fragment = this._renderedFragment(renderedItems, view => this._childInstances.push(view));
this._root.appendChild(fragment);
}
else {
const {start, end} = diff.toRemove;
const normalizedStart = this._renderRange.normalize(start);
this._childInstances.splice(normalizedStart, end - start + 1)
.forEach(child => this._removeChild(child));
const fragment = this._renderedFragment(renderedItems, view => this._childInstances.unshift(view));
this._root.insertBefore(fragment, this._root.firstChild);
}
this._renderRange = range;
// for (const child of this._childInstances) {
// this._removeChild(child);
// }
// this._childInstances = [];
// const fragment = document.createDocumentFragment();
// for (const item of renderedItems) {
// const view = this._childCreator(item);
// this._childInstances.push(view);
// fragment.appendChild(mountView(view, this._mountArgs));
// }
// this._root.appendChild(fragment);
} }
mount() { mount() {