迁移前台基础页面脚本

2026-04-25 13:43:55 +08:00
parent 4d337a2e8f
commit 19e50944d9
6 changed files with 141 additions and 71 deletions
@@ -0,0 +1,133 @@
+// 前台普通页面交互入口，集中管理确认弹窗、聊天室弹窗和说明页导航高亮。
+
+let frontControlsBound = false;
+
+/**
+ * 读取元素上声明的确认文案，并在用户取消时拦截默认行为。
+ *
+ * @param {Event} event
+ * @param {Element} element
+ * @param {string} attribute
+ * @returns {boolean}
+ */
+function confirmBeforeAction(event, element, attribute) {
+    const message = element.getAttribute(attribute);
+    if (!message || window.confirm(message)) {
+        return true;
+    }
+
+    event.preventDefault();
+    return false;
+}
+
+/**
+ * 打开独立聊天室窗口，并尽量铺满当前可用屏幕。
+ *
+ * @param {string} url
+ * @param {string} roomName
+ * @returns {void}
+ */
+function openChatRoomWindow(url, roomName) {
+    const chatWindow = window.open(
+        url,
+        `chatroom_${roomName}`,
+        "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes",
+    );
+
+    if (!chatWindow) {
+        return;
+    }
+
+    chatWindow.moveTo(0, 0);
+    chatWindow.resizeTo(window.screen.availWidth, window.screen.availHeight);
+    chatWindow.focus();
+}
+
+/**
+ * 绑定说明页右侧导航的可视区高亮。
+ *
+ * @returns {void}
+ */
+function bindGuideNavigation() {
+    const aside = document.getElementById("guide-aside");
+    const nav = document.getElementById("guide-nav");
+    if (!aside || !nav) {
+        return;
+    }
+
+    const checkWidth = () => {
+        aside.style.display = window.innerWidth >= 1024 ? "block" : "none";
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+
+    const links = Array.from(nav.querySelectorAll("a"));
+    const sections = links
+        .map((link) => {
+            const id = link.getAttribute("href")?.slice(1);
+            const element = id ? document.getElementById(id) : null;
+
+            return element ? { element, link } : null;
+        })
+        .filter(Boolean);
+
+    const onScroll = () => {
+        let current = sections[0];
+        sections.forEach((section) => {
+            if (section.element.getBoundingClientRect().top <= 120) {
+                current = section;
+            }
+        });
+
+        links.forEach((link) => link.classList.remove("active"));
+        current?.link.classList.add("active");
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+}
+
+/**
+ * 绑定前台普通页面的轻量事件代理。
+ *
+ * @returns {void}
+ */
+function bindFrontControls() {
+    if (frontControlsBound || typeof document === "undefined") {
+        return;
+    }
+
+    frontControlsBound = true;
+
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const submitButton = event.target.closest("[data-front-submit-confirm]");
+        if (submitButton && !confirmBeforeAction(event, submitButton, "data-front-submit-confirm")) {
+            return;
+        }
+
+        const roomLink = event.target.closest("[data-chat-room-window-url]");
+        if (roomLink) {
+            event.preventDefault();
+            openChatRoomWindow(
+                roomLink.getAttribute("data-chat-room-window-url") ?? "",
+                roomLink.getAttribute("data-chat-room-window-name") ?? "room",
+            );
+        }
+    });
+
+    document.addEventListener("submit", (event) => {
+        if (!(event.target instanceof HTMLFormElement)) {
+            return;
+        }
+
+        confirmBeforeAction(event, event.target, "data-front-confirm");
+    });
+
+    bindGuideNavigation();
+}
+
+bindFrontControls();