badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Minor improvement to clipboard on mobile

Browse source
This commit is contained in:
Bad Manners 2024-09-23 08:50:33 -03:00
parent 108e134343
commit 66f6f52773
1 changed files with 39 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/pages/index.astro
View file

@ -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);