website: snapshot

website/scripts/panes/share.js

@@ -0,0 +1,45 @@
+import { getElementById } from "../utils/dom.js";
+import * as leanQr from "../modules/lean-qr/2.7.1/index.mjs";
+
+const shareDiv = getElementById("share-div");
+const shareContentDiv = getElementById("share-content-div");
+const shareButton = getElementById("share-button");
+const imgQrcode = /** @type {HTMLImageElement} */ (getElementById("share-img"));
+const anchor = /** @type {HTMLAnchorElement} */ (
+  getElementById("share-anchor")
+);
+
+/** @param {string | null} url */
+export function setQr(url) {
+  if (!url) {
+    shareDiv.hidden = true;
+    return;
+  }
+
+  anchor.href = url;
+  anchor.innerText =
+    (url.startsWith("http") ? url.split("//").at(-1) : url.split(":").at(-1)) ||
+    "";
+
+  imgQrcode.src =
+    leanQr.generate(/** @type {any} */ (url))?.toDataURL({
+      // @ts-ignore
+      padX: 0,
+      padY: 0,
+    }) || "";
+
+  shareDiv.hidden = false;
+}
+
+shareButton.addEventListener("click", () => {
+  setQr(window.location.href);
+});
+
+shareDiv.addEventListener("click", () => {
+  setQr(null);
+});
+
+shareContentDiv.addEventListener("click", (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+});