Molodetz blogrol volgens DPP-template

molodetz/static/js/components/ContextMenu.js

@@ -0,0 +1,41 @@
+// retoor <retoor@molodetz.nl>
+import { Component } from "./Component.js";
+
+export class ContextMenu extends Component {
+  static tag = "dp-context-menu";
+
+  setup() {
+    this.hidden = true;
+    document.addEventListener("click", (event) => {
+      if (!this.contains(event.target)) {
+        this.close();
+      }
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        this.close();
+      }
+    });
+  }
+
+  open(x, y, items) {
+    this.replaceChildren();
+    items.forEach((item) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = item.label;
+      button.addEventListener("click", () => {
+        this.close();
+        item.action();
+      });
+      this.append(button);
+    });
+    this.style.left = `${Math.min(x, window.innerWidth - 220)}px`;
+    this.style.top = `${y}px`;
+    this.hidden = false;
+  }
+
+  close() {
+    this.hidden = true;
+  }
+}