迁移手机抽屉基础事件绑定

resources/js/chat-room.js

@@ -4,6 +4,7 @@ export { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 export { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
+export { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -32,6 +33,7 @@ import { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js";
 import { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js";
 import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
 import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
+import { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -63,6 +65,7 @@ if (typeof window !== "undefined") {
         applyFontSize,
         bindChatFontSizeControl,
         bindChatImageUploadControl,
+        bindMobileDrawerControls,
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
         closeChatImageLightbox,
@@ -95,4 +98,5 @@ if (typeof window !== "undefined") {
     bindChatFontSizeControl();
     bindChatImageUploadControl();
     bindChatRightPanelControls();
+    bindMobileDrawerControls();
 }

resources/js/chat-room/mobile-drawer.js

@@ -0,0 +1,56 @@
+// 手机端抽屉基础控件事件绑定，替代浮动按钮、关闭按钮与名单 tab 的内联事件。
+
+let mobileDrawerEventsBound = false;
+
+/**
+ * 绑定手机端抽屉基础控件事件。
+ *
+ * @returns {void}
+ */
+export function bindMobileDrawerControls() {
+    if (mobileDrawerEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    mobileDrawerEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const drawerTrigger = event.target.closest("[data-mobile-drawer-open]");
+        if (drawerTrigger) {
+            event.preventDefault();
+            window.openMobileDrawer?.(drawerTrigger.dataset.mobileDrawerOpen);
+            return;
+        }
+
+        if (event.target.closest("[data-mobile-drawer-close]")) {
+            event.preventDefault();
+            window.closeMobileDrawer?.();
+            return;
+        }
+
+        const tabTrigger = event.target.closest("[data-mobile-drawer-tab]");
+        if (tabTrigger) {
+            event.preventDefault();
+            window.switchMobileTab?.(tabTrigger.dataset.mobileDrawerTab);
+        }
+    });
+
+    document.addEventListener("change", (event) => {
+        if (!(event.target instanceof HTMLSelectElement) || event.target.id !== "mob-user-sort-select") {
+            return;
+        }
+
+        window.renderMobileUserList?.();
+    });
+
+    document.addEventListener("input", (event) => {
+        if (!(event.target instanceof HTMLInputElement) || event.target.id !== "mob-user-search-input") {
+            return;
+        }
+
+        window.scheduleRenderMobileUserList?.();
+    });
+}