From f88af7d19d79bd650dbb10e09fc0f47d1b44480c Mon Sep 17 00:00:00 2001
From: Simon Li <orpheus+devel@gmail.com>
Date: Mon, 15 Jul 2024 23:38:36 +0100
Subject: [PATCH] Clos clipboard if canvas or other element is clicked

---
 js/clipboard.js | 15 +++++++++------
 js/index.js     |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/js/clipboard.js b/js/clipboard.js
index 78acd923..89ef6363 100644
--- a/js/clipboard.js
+++ b/js/clipboard.js
@@ -10,8 +10,9 @@ import "./clipboard.css";
  * Setup trigger element to toggle showing / hiding clipboard element
  * @param {Element} trigger
  * @param {Element} clipboard
+ * @param {Array[Element]} closers array of elements that should close the clipboard if clicked
  */
-export function setupClipboard(trigger, clipboard, parent) {
+export function setupClipboard(trigger, clipboard, closers) {
   const arrowElement = clipboard.querySelector(".arrow");
   function updatePosition() {
     computePosition(trigger, clipboard, {
@@ -61,10 +62,12 @@ export function setupClipboard(trigger, clipboard, parent) {
     e.stopPropagation();
   });
   // Close the popup if we click outside it
-  parent.addEventListener("click", () => {
-    if (trigger.classList.contains("active")) {
-      clipboard.classList.toggle("hidden");
-      trigger.classList.toggle("active");
-    }
+  closers.forEach((el) => {
+    el.addEventListener("click", () => {
+      if (trigger.classList.contains("active")) {
+        clipboard.classList.toggle("hidden");
+        trigger.classList.toggle("active");
+      }
+    });
   });
 }
diff --git a/js/index.js b/js/index.js
index c11a3e34..f5d32a5c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -85,7 +85,7 @@ function connect() {
   setupClipboard(
     document.getElementById("clipboard-button"),
     document.getElementById("clipboard-container"),
-    document.body,
+    [document.body, document.getElementsByTagName("canvas")[0]],
   );
 }