From 66f6f527738f6f7337b60ea7d9f0f1fe29428642 Mon Sep 17 00:00:00 2001
From: Bad Manners <me@badmanners.xyz>
Date: Mon, 23 Sep 2024 08:50:33 -0300
Subject: [PATCH] Minor improvement to clipboard on mobile

---
 src/pages/index.astro | 78 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4a4ebe9..9ca7894 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -173,7 +173,7 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
             data-tooltip
             data-clipboard="badmanners"
             data-noun="Discord username"
-            aria-disabled="true"
+            disabled
           >
             <IconDiscord height="1.75rem" width="1.75rem" class="contact-icon" />
             <p class="p-nickname sr-only select-none">badmanners on Discord</p>
@@ -549,8 +549,6 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
   import tippy, { hideAll } from "tippy.js";
   import "tippy.js/dist/tippy.css";
 
-  type TimeoutTag = ReturnType<typeof setTimeout> | null;
-
   const initIndexIcons = () => {
     const indexLinks = document.querySelector<HTMLElementTagNameMap["ul"]>("ul#links");
     if (!indexLinks) {
@@ -581,43 +579,45 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
     tooltipItems.forEach((el) => el.removeAttribute("title"));
 
     // Add functionality to custom clipboard items
-    let tooltipTimeoutTag: TimeoutTag = null;
-    customClipboardItems.forEach((element) => {
-      const label = element.dataset.noun ?? element.getAttribute("aria-label");
-      const clipboard = element.dataset.clipboard;
-      if (!clipboard) {
-        console.warn(`Missing "data-clipboard" field for custom clipboard element, ignoring...`, element);
-        return;
-      }
-      const ariaDisabled = element.getAttribute("aria-disabled");
-      element.removeAttribute("aria-disabled");
-      const elementTooltip = tippy(element, {
-        content: label ? `${label} copied to clipboard!` : "Copied to clipboard!",
-        trigger: "manual",
-        theme: "bm",
-      });
-      const onClickElement = (ev: Event) => {
-        ev.preventDefault();
-        tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
-        hideAll();
-        navigator.clipboard
-          .writeText(clipboard)
-          .then(() => elementTooltip.show())
-          .catch((e) => {
-            console.error("Unable to copy custom content to clipboard.", clipboard, e);
-            // Clean up clipboard logic, and revert element to original state
-            element.removeEventListener("click", onClickElement);
-            elementTooltip.destroy();
-            if (ariaDisabled !== null) {
-              element.setAttribute("aria-disabled", ariaDisabled);
-            } else {
-              // Invoke default click
-              element.click();
-            }
+    if ("clipboard" in navigator) {
+      customClipboardItems.forEach((element) => {
+        const label = element.dataset.noun ?? element.getAttribute("aria-label");
+        const clipboard = element.dataset.clipboard;
+        if (!clipboard) {
+          console.warn(`Missing "data-clipboard" field for custom clipboard element, ignoring...`, element);
+          return;
+        }
+        // const disabled = element.getAttribute("disabled");
+        element.removeAttribute("disabled");
+        const elementTooltip = tippy(element, {
+          content: label ? `${label} copied to clipboard!` : "Copied to clipboard!",
+          trigger: "manual",
+          theme: "bm",
+        });
+        const onClickElement = async (ev: Event) => {
+          ev.preventDefault();
+          hideAll();
+          requestAnimationFrame(() => {
+            navigator.clipboard
+              .writeText(clipboard)
+              .then(() => elementTooltip.show())
+              .catch((e) => {
+                console.error("Unable to copy custom content to clipboard.", clipboard, e);
+                // Clean up clipboard logic, and revert element to original state
+                // element.removeEventListener("click", onClickElement);
+                // elementTooltip.destroy();
+                // if (disabled !== null) {
+                //   element.setAttribute("disabled", disabled);
+                // } else {
+                //   // Invoke default click
+                //   element.click();
+                // }
+              });
           });
-      };
-      element.addEventListener("click", onClickElement);
-    });
+        };
+        element.addEventListener("click", onClickElement);
+      });
+    }
   };
 
   document.addEventListener("astro:page-load", initIndexIcons);