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,72 @@
+// retoor <retoor@molodetz.nl>
+import { Component } from "./Component.js";
+
+export class Lightbox extends Component {
+  static tag = "dp-lightbox";
+
+  setup() {
+        this.setAttribute("role", "dialog");
+    this.setAttribute("aria-modal", "true");
+    this.setAttribute("aria-label", "Afbeelding");
+    this.hidden = true;
+    this.image = document.createElement("img");
+    this.image.alt = "";
+    this.caption = document.createElement("p");
+    this.caption.className = "caption";
+    this.closeButton = document.createElement("button");
+    this.closeButton.type = "button";
+    this.closeButton.className = "modal-close lightbox-close";
+    this.closeButton.setAttribute("aria-label", "Sluiten");
+    this.closeButton.textContent = "\u00d7";
+    this.append(this.closeButton, this.image, this.caption);
+    this.items = [];
+    this.index = 0;
+    document.addEventListener("click", (event) => this.onDocumentClick(event));
+    this.addEventListener("click", (event) => {
+      if (event.target === this || event.target === this.closeButton) {
+        this.close();
+      }
+    });
+    document.addEventListener("keydown", (event) => this.onKey(event));
+  }
+
+  onDocumentClick(event) {
+    const link = event.target.closest("[data-lightbox]");
+    if (!link || event.metaKey || event.ctrlKey) {
+      return;
+    }
+    event.preventDefault();
+    this.items = [...document.querySelectorAll("[data-lightbox]")];
+    this.show(this.items.indexOf(link));
+  }
+
+  show(index) {
+    this.index = (index + this.items.length) % this.items.length;
+    const link = this.items[this.index];
+    this.image.src = link.getAttribute("href");
+    this.image.alt = link.dataset.caption || "";
+    this.caption.textContent = link.dataset.caption || "";
+    this.hidden = false;
+    this.classList.add("visible");
+    this.closeButton.focus();
+  }
+
+  close() {
+    this.hidden = true;
+    this.classList.remove("visible");
+    this.image.removeAttribute("src");
+  }
+
+  onKey(event) {
+    if (this.hidden) {
+      return;
+    }
+    if (event.key === "Escape") {
+      this.close();
+    } else if (event.key === "ArrowRight") {
+      this.show(this.index + 1);
+    } else if (event.key === "ArrowLeft") {
+      this.show(this.index - 1);
+    }
+  }
+}