52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
const url = "https://www.facebook.com/";
|
|
|
|
const bodyEl = document.querySelector("body");
|
|
const qrCodeCanvasEl = document.querySelector("#qrCodeCanvas");
|
|
const invitationLinkInputEl = document.querySelector("#invitationLinkInput");
|
|
|
|
const displayToastAlert = async (message) => {
|
|
let toastAlertTemplate = "";
|
|
|
|
await fetch("./toastAlert.mustache")
|
|
.then(res => res.text())
|
|
.then(template => {
|
|
toastAlertTemplate = template;
|
|
});
|
|
|
|
return Mustache.render(toastAlertTemplate, { message });
|
|
};
|
|
|
|
(async () => {
|
|
const qrCode = new QRCodeStyling({
|
|
width: 425,
|
|
height: 425,
|
|
type: "svg",
|
|
data: url,
|
|
image: "./assets/icon.png",
|
|
dotsOptions: {
|
|
color: "#ffffff",
|
|
type: "rounded"
|
|
},
|
|
backgroundOptions: {
|
|
color: getComputedStyle(bodyEl).backgroundColor || "#000000",
|
|
},
|
|
imageOptions: {
|
|
crossOrigin: "anonymous",
|
|
margin: 20
|
|
}
|
|
});
|
|
|
|
qrCode.append(qrCodeCanvasEl);
|
|
|
|
invitationLinkInputEl.value = url;
|
|
|
|
copyBtn.addEventListener("click", async () => {
|
|
navigator.clipboard.writeText(invitationLinkInputEl.value);
|
|
|
|
bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("Invitation link copied to clipboard."));
|
|
|
|
setTimeout(() => {
|
|
bodyEl.lastElementChild.remove();
|
|
}, 3000);
|
|
});
|
|
})(); |