Molodetz blogrol volgens DPP-template

2026-10-05 09:36:20 +02:00
commit f290a4c766
277 changed files with 15758 additions and 0 deletions
@@ -0,0 +1,43 @@
+// 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;
+  }
+}