1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { ChatMessage } from "../../common/packets.d.ts";
import { ediv, espan, image_view, OverlayUi } from "./helper.ts";
import { log } from "./logger.ts";
import { Room } from "./room.ts";
import { User } from "./user/mod.ts";
export class Chat extends OverlayUi {
messages: HTMLElement
controls: HTMLElement
constructor(public room: Room) {
const send = document.createElement("input")
send.type = "text"
const messages = ediv({ class: "messages" })
const controls = ediv({ class: "controls" })
controls.append(send)
messages.append(document.createElement("hr"))
super(ediv({ class: "chat" }, messages, controls))
this.messages = messages
this.controls = controls
send.onkeydown = (ev) => {
if (ev.code == "Enter") {
if (send.value.trim().length == 0) return // no!
this.send({ text: send.value })
send.value = ""
}
}
document.onpaste = (pasteEvent) => {
// TODO will only work when pasting a single image
const item = pasteEvent.clipboardData?.items[0];
if (!item) return
if (item.type.indexOf("image") === 0) {
log("*", "image pasted")
const blob = item.getAsFile()
if (!blob) return
const reader = new FileReader();
reader.onload = (event) => {
if (!event.target) return
if (typeof event.target.result != "string") return
this.send({ image: event.target.result })
};
reader.readAsDataURL(blob);
}
}
}
send(msg: ChatMessage) {
this.room.local_user.chat(msg)
this.add_message(this.room.local_user, msg)
}
add_message(sender: User, message: ChatMessage) {
const els = []
if (message.text) els.push(espan(message.text, { class: "text" }))
if (message.image) els.push(image_view(message.image, { class: "image" }))
this.messages.append(ediv({ class: "message" },
espan(sender.display_name, { class: "author" }), ": ", ...els
))
}
}
|
