63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import {ElemJS, q, ejs} from "./basic.js"
|
|
import {store} from "./store/store.js"
|
|
|
|
class Chat extends ElemJS {
|
|
constructor() {
|
|
super(q("#c-chat"))
|
|
|
|
this.removableSubscriptions = []
|
|
|
|
store.activeRoom.subscribe("changeSelf", this.changeRoom.bind(this))
|
|
|
|
this.render()
|
|
}
|
|
|
|
unsubscribe() {
|
|
this.removableSubscriptions.forEach(({name, target, subscription}) => {
|
|
target.unsubscribe(name, subscription)
|
|
})
|
|
this.removableSubscriptions.length = 0
|
|
}
|
|
|
|
changeRoom() {
|
|
// disconnect from the previous room
|
|
this.unsubscribe()
|
|
// connect to the new room's timeline updater
|
|
if (store.activeRoom.exists()) {
|
|
const timeline = store.activeRoom.value().timeline
|
|
const subscription = (_, {element, index}) => {
|
|
this.childAt(index, element)
|
|
}
|
|
const name = "addItem"
|
|
this.removableSubscriptions.push({name, target: timeline, subscription})
|
|
timeline.subscribe(name, subscription)
|
|
}
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
this.clearChildren()
|
|
if (store.activeRoom.exists()) {
|
|
const timeline = store.activeRoom.value().timeline
|
|
for (const group of timeline.getGroupedEvents()) {
|
|
const first = group[0]
|
|
this.child(
|
|
ejs("div").class("c-message-group").child(
|
|
ejs("div").class("c-message-group__avatar").child(
|
|
ejs("div").class("c-message-group__icon")
|
|
),
|
|
ejs("div").class("c-message-group__messages").child(
|
|
ejs("div").class("c-message-group__intro").child(
|
|
ejs("div").class("c-message-group__name").text(first.sender)
|
|
),
|
|
...group.map(event => timeline.elementsMap.get(event.event_id))
|
|
)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
new Chat()
|