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
>
badmanners on Discord
@@ -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 | null;
-
const initIndexIcons = () => {
const indexLinks = document.querySelector("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);