themes/default/layouts/partials: Hack in card context menu

4 files changed, 59 insertions, 0 deletions

diff --git a/static/icons/feather/arrow-down-circle.svg b/static/icons/feather/arrow-down-circle.svg
new file mode 100644
index 0000000..eb9f1a0
--- /dev/null
+++ b/static/icons/feather/arrow-down-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <polyline points="8 12 12 16 16 12" />
+  <line x1="12" y1="8" x2="12" y2="16" />
+</svg>
diff --git a/static/icons/feather/external-link.svg b/static/icons/feather/external-link.svg
new file mode 100644
index 0000000..537b731
--- /dev/null
+++ b/static/icons/feather/external-link.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  <polyline points="15 3 21 3 21 9" />
+  <line x1="10" y1="14" x2="21" y2="3" />
+</svg>
diff --git a/static/js/contextmenu.ts b/static/js/contextmenu.ts
new file mode 100644
index 0000000..dea9bec
--- /dev/null
+++ b/static/js/contextmenu.ts
@@ -0,0 +1,28 @@
+(function () {
+  const hide = (triggers) => {
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].checked = false;
+    }
+  };
+
+  const hideIfClickedOutside = (menus, triggers, event) => {
+    for (let i = 0; i < menus.length; i++) {
+      const active = triggers[i].checked === true;
+      const outside = !menus[i].contains(event.target);
+      if (outside && active) hide(triggers);
+    }
+  };
+
+  self.addEventListener("scroll", function () {
+    const triggers = document.querySelectorAll("micro-metadata-menu input");
+    hide(triggers);
+  });
+
+  ["click", "touchstart"].forEach(function (event) {
+    self.addEventListener(event, function (event) {
+      const menus = document.querySelectorAll("micro-metadata-menu");
+      const triggers = document.querySelectorAll("micro-metadata-menu input");
+      hideIfClickedOutside(menus, triggers, event);
+    });
+  });
+})();
diff --git a/static/js/index.ts b/static/js/index.ts
index 52cc678..e00907b 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -1,6 +1,7 @@
 import "./pager.ts";
 import "./plumber.ts";
 import "./instantpage.ts";
+import "./contextmenu.ts";
 import "./fixedsearch.ts";
 import "./timeago.ts";