Style load more; fix message group order

src/js/timeline.js

@@ -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})
+			store.rooms.get(this.id).value().timeline.loadScrollback()
-			this.element.dispatchEvent(event)
 		}
 	}
 }
@@ -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.loadMore = new LoadMore(this.id)
-		this.load_more = new LoadMore()
+		this.childAt(0, this.loadMore)
-		this.childAt(0, this.load_more)
 	}
 
 	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}