lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
流星
2026-04-25 03:44:04 +08:00
parent 10e9835530
commit cf42071c29
3 changed files with 69 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/chat-room.js
+4
View File
@@ -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
+56
View File
@@ -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?.();
});
}
resources/views/chat/partials/layout/mobile-drawer.blade.php
+9 -11
View File
@@ -17,18 +17,18 @@
{{-- ── 浮动按钮组（右下角固定） ── --}}
<div id="mobile-fabs">
<button class="mobile-fab" id="fab-toolbar" onclick="openMobileDrawer('toolbar')" title="工具菜单">🔧</button>
<button class="mobile-fab" id="fab-users" onclick="openMobileDrawer('users')" title="在线名单">👥</button>
<button class="mobile-fab" id="fab-toolbar" data-mobile-drawer-open="toolbar" title="工具菜单">🔧</button>
<button class="mobile-fab" id="fab-users" data-mobile-drawer-open="users" title="在线名单">👥</button>
</div>
{{-- ── 遮罩（点击关闭当前抽屉） ── --}}
<div id="mobile-drawer-mask" onclick="closeMobileDrawer()"></div>
<div id="mobile-drawer-mask" data-mobile-drawer-close></div>
{{-- ── 工具条抽屉（底部滑入） ── --}}
<div id="mobile-drawer-toolbar" class="mobile-drawer">
<div class="mobile-drawer-header">
🔧 工具菜单
<button class="mobile-drawer-close" onclick="closeMobileDrawer()">✕</button>
<button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
</div>
<div class="mobile-drawer-body">
<div class="mobile-tool-btn" onclick="closeMobileDrawer();quickDailySignIn();">✅<br>签到</div>
@@ -57,17 +57,17 @@
<div id="mobile-drawer-users" class="mobile-drawer">
<div class="mobile-drawer-header">
<span id="mob-drawer-title">👥 在线名单</span>
<button class="mobile-drawer-close" onclick="closeMobileDrawer()">✕</button>
<button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
</div>
{{-- Tab 切换条 --}}
<div style="display:flex;background:#e8f0f8;border-bottom:1px solid #b0c8e0;flex-shrink:0;">
<button id="mob-tab-users"
style="flex:1;padding:7px 4px;font-size:12px;border:none;background:#336699;color:#fff;cursor:pointer;font-weight:bold;"
onclick="switchMobileTab('users')">👥 名单</button>
data-mobile-drawer-tab="users">👥 名单</button>
<button id="mob-tab-rooms"
style="flex:1;padding:7px 4px;font-size:12px;border:none;background:transparent;color:#336699;cursor:pointer;"
onclick="switchMobileTab('rooms')">🏠 房间</button>
data-mobile-drawer-tab="rooms">🏠 房间</button>
</div>
{{-- 名单面板 --}}
@@ -75,15 +75,13 @@
{{-- 排序/搜索工具栏 --}}
<div style="display:flex;gap:4px;padding:5px 6px;background:#f0f4f8;border-bottom:1px solid #dde8f0;flex-shrink:0;">
<select id="mob-user-sort-select"
style="flex:1;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 4px;color:#224466;"
onchange="renderMobileUserList()">
style="flex:1;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 4px;color:#224466;">
<option value="default">默认顺序</option>
<option value="level">按等级排</option>
<option value="name">按名字排</option>
</select>
<input id="mob-user-search-input" type="text" placeholder="搜索用户..."
style="flex:2;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 6px;color:#333;"
oninput="scheduleRenderMobileUserList()">
style="flex:2;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 6px;color:#333;">
</div>
{{-- 用户列表容器 --}}