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

32
src/pages/index.astro
View file

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