Style load more; fix message group order
This commit is contained in:
parent
c9dffc9d4a
commit
df47c8a88a
1 changed files with 20 additions and 40 deletions
|
@ -177,20 +177,26 @@ class EventGroup extends ElemJS {
|
|||
}
|
||||
|
||||
|
||||
//Displays a spiner and creates an event to notify timeline to load more messages
|
||||
/** Displays a spinner and creates an event to notify timeline to load more messages */
|
||||
class LoadMore extends ElemJS {
|
||||
constructor() {
|
||||
constructor(id) {
|
||||
super("div")
|
||||
this.html(`<div class="loading-icon"></div> <span> Loading more... </span>`)
|
||||
this.class("c-message-notice")
|
||||
this.id = id
|
||||
|
||||
this.child(
|
||||
ejs("div").class("c-message-notice__inner").child(
|
||||
ejs("span").class("loading-icon"),
|
||||
ejs("span").text("Loading more...")
|
||||
)
|
||||
)
|
||||
const intersection_observer = new IntersectionObserver(e => this.intersectionHandler(e))
|
||||
intersection_observer.observe(this.element)
|
||||
|
||||
}
|
||||
|
||||
intersectionHandler(e) {
|
||||
if (e.some(e => e.isIntersecting)) {
|
||||
const event = new CustomEvent("LoadMore", {bubbles: true})
|
||||
this.element.dispatchEvent(event)
|
||||
store.rooms.get(this.id).value().timeline.loadScrollback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -201,11 +207,12 @@ class ReactiveTimeline extends ElemJS {
|
|||
this.class("c-event-groups")
|
||||
this.id = id
|
||||
this.list = list
|
||||
this.load_more = new LoadMore()
|
||||
this.loadMore = new LoadMore(this.id)
|
||||
this.render()
|
||||
}
|
||||
|
||||
addEvent(event) {
|
||||
this.loadMore.remove()
|
||||
// if (debug) console.log("running search", this.list, event)
|
||||
// if (debug) debugger;
|
||||
const search = eventSearch(this.list, event)
|
||||
|
@ -221,9 +228,8 @@ class ReactiveTimeline extends ElemJS {
|
|||
} else {
|
||||
this.tryAddGroups(event, [search.i])
|
||||
}
|
||||
this.load_more.remove()
|
||||
this.load_more = new LoadMore()
|
||||
this.childAt(0, this.load_more)
|
||||
this.loadMore = new LoadMore(this.id)
|
||||
this.childAt(0, this.loadMore)
|
||||
}
|
||||
|
||||
tryAddGroups(event, indices) {
|
||||
|
@ -256,7 +262,7 @@ class ReactiveTimeline extends ElemJS {
|
|||
|
||||
render() {
|
||||
this.clearChildren()
|
||||
this.child(this.load_more)
|
||||
this.child(this.loadMore)
|
||||
this.list.forEach(group => this.child(group))
|
||||
this.anchor = new Anchor()
|
||||
this.child(this.anchor)
|
||||
|
@ -287,8 +293,6 @@ class Timeline extends Subscribable {
|
|||
this.pending = new Set()
|
||||
this.pendingEdits = []
|
||||
this.from = null
|
||||
|
||||
this.reactiveTimeline.element.addEventListener("LoadMore", () => this.loadScrollback())
|
||||
}
|
||||
|
||||
updateStateEvents(events) {
|
||||
|
@ -379,7 +383,7 @@ class Timeline extends Subscribable {
|
|||
url.searchParams.set("access_token", lsm.get("access_token"))
|
||||
url.searchParams.set("from", this.from)
|
||||
url.searchParams.set("dir", "b")
|
||||
url.searchParams.set("limit", 10)
|
||||
url.searchParams.set("limit", "20")
|
||||
const filter = {
|
||||
lazy_load_members: true
|
||||
}
|
||||
|
@ -390,7 +394,7 @@ class Timeline extends Subscribable {
|
|||
this.broadcast("beforeScrollbackLoad")
|
||||
|
||||
this.from = root.end
|
||||
//console.log(this.updateEvents, root.chunk)
|
||||
// console.log(this.updateEvents, root.chunk)
|
||||
if (root.state) this.updateStateEvents(root.state)
|
||||
this.updateEvents(root.chunk)
|
||||
this.broadcast("afterScrollbackLoad")
|
||||
|
@ -420,32 +424,8 @@ class Timeline extends Subscribable {
|
|||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})/*.then(() => {
|
||||
const subscription = () => {
|
||||
this.removeEvent(id)
|
||||
this.unsubscribe("afterChange", subscription)
|
||||
}
|
||||
this.subscribe("afterChange", subscription)
|
||||
})*/
|
||||
})
|
||||
}
|
||||
/*
|
||||
getGroupedEvents() {
|
||||
let currentSender = Symbol("N/A")
|
||||
let groups = []
|
||||
let currentGroup = []
|
||||
for (const event of this.list) {
|
||||
if (event.sender === currentSender) {
|
||||
currentGroup.push(event)
|
||||
} else {
|
||||
if (currentGroup.length) groups.push(currentGroup)
|
||||
currentGroup = [event]
|
||||
currentSender = event.sender
|
||||
}
|
||||
}
|
||||
if (currentGroup.length) groups.push(currentGroup)
|
||||
return groups
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
module.exports = {Timeline}
|
||||
|
|
Loading…
Reference in a new issue