68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
(() => {
|
|
document.querySelectorAll("[data-copy-button]").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
const id = button.dataset.copyButton;
|
|
const input = document.querySelector(`[data-copy-source="${id}"]`);
|
|
const status = document.querySelector(`[data-copy-status="${id}"]`);
|
|
if (!input) return;
|
|
try {
|
|
await navigator.clipboard.writeText(input.value);
|
|
if (status) status.textContent = "Copied.";
|
|
} catch {
|
|
input.focus();
|
|
input.select();
|
|
const copied = document.execCommand("copy");
|
|
if (status) status.textContent = copied ? "Copied." : "Select and copy the URL manually.";
|
|
}
|
|
});
|
|
});
|
|
|
|
const modal = document.querySelector("[data-confirm-modal]");
|
|
const form = modal?.querySelector("[data-confirm-form]");
|
|
const heading = modal?.querySelector("[data-confirm-heading]");
|
|
const description = modal?.querySelector("[data-confirm-description]");
|
|
const submit = modal?.querySelector("[data-confirm-submit]");
|
|
let timer = null;
|
|
|
|
const close = () => {
|
|
if (!modal) return;
|
|
clearInterval(timer);
|
|
modal.classList.remove("is-open");
|
|
modal.setAttribute("aria-hidden", "true");
|
|
};
|
|
|
|
document.querySelectorAll("[data-confirm-open]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
if (!modal || !form || !submit) return;
|
|
form.action = button.dataset.confirmAction;
|
|
heading.textContent = button.dataset.confirmTitle || "Confirm action";
|
|
description.textContent = button.dataset.confirmText || "";
|
|
let remaining = 3;
|
|
submit.disabled = true;
|
|
submit.textContent = `Confirm in ${remaining}`;
|
|
modal.classList.add("is-open");
|
|
modal.setAttribute("aria-hidden", "false");
|
|
timer = setInterval(() => {
|
|
remaining -= 1;
|
|
if (remaining <= 0) {
|
|
clearInterval(timer);
|
|
submit.disabled = false;
|
|
submit.textContent = "Confirm";
|
|
submit.focus();
|
|
} else {
|
|
submit.textContent = `Confirm in ${remaining}`;
|
|
}
|
|
}, 1000);
|
|
});
|
|
});
|
|
modal?.querySelectorAll("[data-confirm-close]").forEach((button) => {
|
|
button.addEventListener("click", close);
|
|
});
|
|
modal?.addEventListener("click", (event) => {
|
|
if (event.target === modal) close();
|
|
});
|
|
window.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && modal?.classList.contains("is-open")) close();
|
|
});
|
|
})();
|