refactor: customize script (#637)

assets/customize.js

@@ -1,3 +1,37 @@
+// #region anchor
+
+window.addEventListener("hashchange", (event) => {
+  if (!location.hash) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const navbar = document.querySelector(".navbar__wrapper");
+  const element = document.querySelector(decodeURIComponent(location.hash));
+  const rect = element.getBoundingClientRect();
+  window.scrollTo({
+    top: rect.top + window.scrollY - navbar.clientHeight - 24,
+    behavior: "smooth",
+  });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  window.dispatchEvent(new HashChangeEvent("hashchange"));
+});
+
+document.addEventListener(
+  "click",
+  (event) => {
+    const target = event.target;
+    if (target.tagName !== "A") return;
+    if (!target.classList.contains("anchor")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    location.replace(target.hash);
+  },
+  { capture: true }
+);
+
+// #endregion
+
 document.querySelectorAll("a[href]").forEach((link) => {
   if (!/^https?:$/.test(link.protocol)) return;
   if (link.hostname === location.hostname) return;
@@ -9,22 +43,37 @@ document.querySelectorAll("a[data-email]").forEach((element) => {
   delete element.dataset.email;
 });
 
+// #region weixin media platform qrcode
+
 document.addEventListener(
   "click",
   (event) => {
-    if (event.target.tagName !== "A") return
-    if (event.target.hostname !== "open.weixin.qq.com") return
+    if (event.target.tagName !== "A") return;
+    if (event.target.hostname !== "open.weixin.qq.com") return;
     event.preventDefault();
     event.stopPropagation();
     const qrcode = document.createElement("img");
     qrcode.src = event.target.href;
     qrcode.width = 430;
     qrcode.height = 430;
-    swal(event.target.title, { content: qrcode })
+    swal(event.target.title, { content: qrcode });
   },
-  { capture: true },
+  { capture: true }
 );
 
-function showHiddenPhoto(elem) {
-  elem.classList.add('show');
-}
+// #endregion
+
+// #region hidden photo
+
+document.addEventListener(
+  "click",
+  (event) => {
+    if (!event.target.classList.contains("mask")) return;
+    const photo = event.target.closest(".hidden-photo")
+    if (!photo) return
+    photo.classList.add("show");
+  },
+  { capture: true }
+);
+
+// #endregion

layouts/shortcodes/hiddenphoto.html

@@ -1,4 +1,4 @@
-<div class="hidden-photo" onclick="showHiddenPhoto(this)">
+<div class="hidden-photo">
   <img src="{{ .Get 0 }}" alt="{{ .Get 1 }}">
   <div class="mask">
     {{ i18n "click-to-show" }}