mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 19:45:05 +01:00
WIP
This commit is contained in:
parent
d4e923f9de
commit
1a28b4f887
@ -19,6 +19,11 @@ import {mountView} from "./utils";
|
|||||||
import {ListView} from "./ListView";
|
import {ListView} from "./ListView";
|
||||||
import {insertAt} from "./utils";
|
import {insertAt} from "./utils";
|
||||||
|
|
||||||
|
class ScrollDirection {
|
||||||
|
static get downwards() { return 1; }
|
||||||
|
static get upwards() { return -1; }
|
||||||
|
}
|
||||||
|
|
||||||
class ItemRange {
|
class ItemRange {
|
||||||
constructor(topCount, renderCount, bottomCount) {
|
constructor(topCount, renderCount, bottomCount) {
|
||||||
this.topCount = topCount;
|
this.topCount = topCount;
|
||||||
@ -56,6 +61,10 @@ class ItemRange {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get lastIndex() {
|
||||||
|
return this.topCount + this.renderCount;
|
||||||
|
}
|
||||||
|
|
||||||
totalSize() {
|
totalSize() {
|
||||||
return this.topCount + this.renderCount + this.bottomCount;
|
return this.topCount + this.renderCount + this.bottomCount;
|
||||||
}
|
}
|
||||||
@ -69,6 +78,23 @@ class ItemRange {
|
|||||||
*/
|
*/
|
||||||
return idx - this.topCount;
|
return idx - this.topCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollDirectionTo(range) {
|
||||||
|
return range.bottomCount < this.bottomCount ? ScrollDirection.downwards : ScrollDirection.upwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
diff(range) {
|
||||||
|
const diffResult = {};
|
||||||
|
if (this.scrollDirectionTo(range) === ScrollDirection.downwards) {
|
||||||
|
diffResult.toRemove = { start: this.topCount, end: range.topCount - 1 };
|
||||||
|
diffResult.toAdd = { start: this.lastIndex + 1, end: range.lastIndex };
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
diffResult.toRemove = { start: range.lastIndex + 1, end: this.lastIndex };
|
||||||
|
diffResult.toAdd = { start: range.topCount, end: this.topCount - 1 };
|
||||||
|
}
|
||||||
|
return diffResult;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class LazyListView extends ListView {
|
export class LazyListView extends ListView {
|
||||||
@ -101,6 +127,9 @@ export class LazyListView extends ListView {
|
|||||||
// only update render Range if the new range + overflowMargin isn't contained by the old anymore
|
// only update render Range if the new range + overflowMargin isn't contained by the old anymore
|
||||||
// or if we are force rendering
|
// or if we are force rendering
|
||||||
if (forceRender || !this._renderRange.contains(intersectRange)) {
|
if (forceRender || !this._renderRange.contains(intersectRange)) {
|
||||||
|
console.log("new", renderRange);
|
||||||
|
console.log("current", this._renderRange);
|
||||||
|
console.log("diff", this._renderRange.diff(renderRange));
|
||||||
this._renderRange = renderRange;
|
this._renderRange = renderRange;
|
||||||
this._renderElementsInRange();
|
this._renderElementsInRange();
|
||||||
}
|
}
|
||||||
@ -146,13 +175,18 @@ export class LazyListView extends ListView {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
_renderElementsInRange() {
|
_adjustPadding() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderElementsInRange(range) {
|
||||||
const { topCount, renderCount, bottomCount } = this._renderRange;
|
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;
|
||||||
const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
|
|
||||||
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) {
|
for (const child of this._childInstances) {
|
||||||
this._removeChild(child);
|
this._removeChild(child);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user