Дезайн ыыыы

frontend/js/components/contextMenu.js

@@ -0,0 +1,58 @@
+import { iconMarkup } from "../icons.js";
+
+let openMenuEl = null;
+
+function closeOpenMenu() {
+  if (openMenuEl) {
+    openMenuEl.remove();
+    openMenuEl = null;
+    document.removeEventListener("mousedown", onOutsideClick, true);
+    document.removeEventListener("keydown", onKeydown, true);
+  }
+}
+
+function onOutsideClick(e) {
+  if (openMenuEl && !openMenuEl.contains(e.target)) closeOpenMenu();
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape") closeOpenMenu();
+}
+
+/**
+ * items: Array<{ label, icon?, danger?, onClick } | 'sep'>
+ */
+export function showContextMenu(x, y, items) {
+  closeOpenMenu();
+  const menu = document.createElement("div");
+  menu.className = "context-menu";
+  for (const item of items) {
+    if (item === "sep") {
+      const sep = document.createElement("div");
+      sep.className = "context-menu-sep";
+      menu.appendChild(sep);
+      continue;
+    }
+    const btn = document.createElement("button");
+    btn.className = "context-menu-item" + (item.danger ? " danger" : "");
+    btn.innerHTML = `${item.icon ? iconMarkup(item.icon, 14) : ""}<span>${item.label}</span>`;
+    btn.addEventListener("click", () => {
+      closeOpenMenu();
+      item.onClick();
+    });
+    menu.appendChild(btn);
+  }
+  document.body.appendChild(menu);
+
+  const rect = menu.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  menu.style.left = `${Math.min(x, vw - rect.width - 8)}px`;
+  menu.style.top = `${Math.min(y, vh - rect.height - 8)}px`;
+
+  openMenuEl = menu;
+  setTimeout(() => {
+    document.addEventListener("mousedown", onOutsideClick, true);
+    document.addEventListener("keydown", onKeydown, true);
+  }, 0);
+}