cadence/Carbon
3
9
Fork 1
Code Issues 14 Pull requests 1 Releases Wiki Activity

Style load more; fix message group order
All checks were successful
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Cadence Ember 2020-10-26 23:35:33 +13:00
parent c9dffc9d4a
commit df47c8a88a
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
1 changed files with 20 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/js/timeline.js
View file

@ -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
}
@ -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}