carbon/build/static/chat.js

66 lines
1.9 KiB
JavaScript
Raw Normal View History

2020-10-15 13:24:15 +00:00
import {ElemJS, q, ejs} from "./basic.js"
import {store} from "./store/store.js"
2020-10-19 05:37:17 +00:00
const chatMessages = q("#c-chat-messages")
2020-10-15 13:24:15 +00:00
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
2020-10-19 05:37:17 +00:00
const subscription = () => {
// scroll anchor does not work if the timeline is scrolled to the top.
// at the start, when there are not enough messages for a full screen, this is the case.
// once there are enough messages that scrolling is necessary, we initiate a scroll down to activate the scroll anchor.
let oldDifference = chatMessages.scrollHeight - chatMessages.clientHeight
setTimeout(() => {
let newDifference = chatMessages.scrollHeight - chatMessages.clientHeight
2020-10-19 07:23:28 +00:00
// console.log("height difference", oldDifference, newDifference)
2020-10-19 05:37:17 +00:00
if (oldDifference < 24) { // this is jank
this.element.parentElement.scrollBy(0, 1000)
}
}, 0)
2020-10-15 13:24:15 +00:00
}
2020-10-19 05:37:17 +00:00
const name = "beforeChange"
2020-10-15 13:24:15 +00:00
this.removableSubscriptions.push({name, target: timeline, subscription})
timeline.subscribe(name, subscription)
}
this.render()
}
render() {
this.clearChildren()
if (store.activeRoom.exists()) {
2020-10-19 05:37:17 +00:00
const reactiveTimeline = store.activeRoom.value().timeline.getTimeline()
this.child(reactiveTimeline)
setTimeout(() => {
this.element.parentElement.scrollBy(0, 1)
reactiveTimeline.anchor.scroll()
}, 0)
2020-10-15 13:24:15 +00:00
}
}
}
2020-10-19 05:37:17 +00:00
const chat = new Chat()
export {chat}