From ba913154d6d7a8025378d09fcfab585972175ab6 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Thu, 28 Dec 2023 10:41:56 -0500
Subject: [PATCH] membershipworks: Use ClipboardItem API when available in
 upcoming-events

---
 .../membershipworks/upcoming_events.dj.html   | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/membershipworks/templates/membershipworks/upcoming_events.dj.html b/membershipworks/templates/membershipworks/upcoming_events.dj.html
index 5b254d9..ba59424 100644
--- a/membershipworks/templates/membershipworks/upcoming_events.dj.html
+++ b/membershipworks/templates/membershipworks/upcoming_events.dj.html
@@ -119,17 +119,35 @@
 {% endblock %}
 {% block script %}
   <script>
-    // TODO: This should use the newer Clipboard API, but Firefox doesn't support it yet
-    // https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem
-    function copyToClipboard(event) {
-      const cb = e => {
-        e.clipboardData.setData("text/html", document.getElementById("preview").innerHTML);
-        e.clipboardData.setData("text/plain", document.getElementById("preview").innerHTML);
-        e.preventDefault();
-      };
-      document.addEventListener("copy", cb);
-      document.execCommand("copy");
-      document.removeEventListener("copy", cb);
+    async function copyToClipboard(event) {
+      const rich = document.getElementById("preview").innerHTML;
+      const plain = document.getElementById("preview").innerHTML;
+
+      // from https://stackoverflow.com/a/77305170
+      if (typeof ClipboardItem !== "undefined") {
+        // Shiny new Clipboard API, not fully supported in Firefox.
+        // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#browser_compatibility
+        const html = new Blob([rich], {
+          type: "text/html"
+        });
+        const text = new Blob([plain], {
+          type: "text/plain"
+        });
+        const data = new ClipboardItem({
+          "text/html": html,
+          "text/plain": text
+        });
+        await navigator.clipboard.write([data]);
+      } else {
+        const cb = e => {
+          e.clipboardData.setData("text/html", rich);
+          e.clipboardData.setData("text/plain", plain);
+          e.preventDefault();
+        };
+        document.addEventListener("copy", cb);
+        document.execCommand("copy");
+        document.removeEventListener("copy", cb);
+      }
 
       bootstrap.Popover.getInstance(event.target).show();
       setTimeout(() => bootstrap.Popover.getInstance(event.target).hide(), 1000);