44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// retoor <retoor@molodetz.nl>
|
|
import { Component } from "./Component.js";
|
|
|
|
export class Chat extends Component {
|
|
static tag = "dp-chat";
|
|
|
|
setup() {
|
|
this.log = document.createElement("div");
|
|
this.log.className = "chat-log";
|
|
this.log.setAttribute("aria-live", "polite");
|
|
const form = document.createElement("form");
|
|
form.className = "chat-form";
|
|
this.input = document.createElement("textarea");
|
|
this.input.rows = 2;
|
|
this.input.setAttribute("aria-label", "Bericht");
|
|
const send = document.createElement("button");
|
|
send.type = "submit";
|
|
send.className = "button small";
|
|
send.textContent = "Verstuur";
|
|
form.append(this.input, send);
|
|
form.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
const text = this.input.value.trim();
|
|
if (text) {
|
|
this.emit("dp-chat-send", { text });
|
|
this.input.value = "";
|
|
}
|
|
});
|
|
this.append(this.log, form);
|
|
}
|
|
|
|
addMessage(author, text) {
|
|
const item = document.createElement("div");
|
|
item.className = "chat-line";
|
|
const who = document.createElement("strong");
|
|
who.textContent = author;
|
|
const body = document.createElement("span");
|
|
body.textContent = ` ${text}`;
|
|
item.append(who, body);
|
|
this.log.append(item);
|
|
this.log.scrollTop = this.log.scrollHeight;
|
|
}
|
|
}
|