迁移欢迎语菜单事件绑定
This commit is contained in:
@@ -5,6 +5,7 @@ export { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, res
|
|||||||
export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
|
export { bindChatImageUploadControl } from "./chat-room/image-upload.js";
|
||||||
export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
|
export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
|
||||||
export { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
|
export { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
|
||||||
|
export { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
|
||||||
export {
|
export {
|
||||||
BLOCKABLE_SYSTEM_SENDERS,
|
BLOCKABLE_SYSTEM_SENDERS,
|
||||||
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
|
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
|
||||||
@@ -35,6 +36,7 @@ import { applyFontSize, bindChatFontSizeControl, CHAT_FONT_SIZE_STORAGE_KEY, res
|
|||||||
import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
|
import { bindChatImageUploadControl } from "./chat-room/image-upload.js";
|
||||||
import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
|
import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js";
|
||||||
import { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
|
import { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
|
||||||
|
import { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
|
||||||
import {
|
import {
|
||||||
BLOCKABLE_SYSTEM_SENDERS,
|
BLOCKABLE_SYSTEM_SENDERS,
|
||||||
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
|
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
|
||||||
@@ -68,6 +70,7 @@ if (typeof window !== "undefined") {
|
|||||||
bindChatFontSizeControl,
|
bindChatFontSizeControl,
|
||||||
bindChatImageUploadControl,
|
bindChatImageUploadControl,
|
||||||
bindMobileDrawerControls,
|
bindMobileDrawerControls,
|
||||||
|
bindWelcomeMenuControls,
|
||||||
CHAT_FONT_SIZE_STORAGE_KEY,
|
CHAT_FONT_SIZE_STORAGE_KEY,
|
||||||
restoreChatFontSize,
|
restoreChatFontSize,
|
||||||
closeChatImageLightbox,
|
closeChatImageLightbox,
|
||||||
@@ -102,5 +105,6 @@ if (typeof window !== "undefined") {
|
|||||||
bindChatImageUploadControl();
|
bindChatImageUploadControl();
|
||||||
bindChatRightPanelControls();
|
bindChatRightPanelControls();
|
||||||
bindMobileDrawerControls();
|
bindMobileDrawerControls();
|
||||||
|
bindWelcomeMenuControls();
|
||||||
bindBlockMenuControls();
|
bindBlockMenuControls();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
// 聊天室欢迎语快捷菜单事件绑定,替代 Blade 内联 onclick。
|
||||||
|
|
||||||
|
let welcomeMenuEventsBound = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绑定欢迎语菜单按钮、菜单内点击拦截与模板发送事件。
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
export function bindWelcomeMenuControls() {
|
||||||
|
if (welcomeMenuEventsBound || typeof document === "undefined") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
welcomeMenuEventsBound = true;
|
||||||
|
|
||||||
|
document.addEventListener("click", (event) => {
|
||||||
|
if (!(event.target instanceof Element)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleButton = event.target.closest("[data-chat-welcome-menu-toggle]");
|
||||||
|
if (toggleButton) {
|
||||||
|
event.preventDefault();
|
||||||
|
window.toggleWelcomeMenu?.(event);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const menu = event.target.closest("[data-chat-welcome-menu]");
|
||||||
|
if (!menu) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const item = event.target.closest("[data-chat-welcome-template]");
|
||||||
|
if (!item || !menu.contains(item)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const template = item.getAttribute("data-chat-welcome-template") || "";
|
||||||
|
if (template && typeof window.sendWelcomeTpl === "function") {
|
||||||
|
window.sendWelcomeTpl(template);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -81,11 +81,11 @@
|
|||||||
|
|
||||||
{{-- 欢迎语快捷按钮 + 下拉浮层 --}}
|
{{-- 欢迎语快捷按钮 + 下拉浮层 --}}
|
||||||
<div style="position:relative;display:inline-block;" id="welcome-btn-wrap">
|
<div style="position:relative;display:inline-block;" id="welcome-btn-wrap">
|
||||||
<button type="button" onclick="toggleWelcomeMenu(event)"
|
<button type="button" data-chat-welcome-menu-toggle
|
||||||
style="font-size:11px;padding:1px 6px;background:#e07820;color:#fff;border:none;border-radius:2px;cursor:pointer;">
|
style="font-size:11px;padding:1px 6px;background:#e07820;color:#fff;border:none;border-radius:2px;cursor:pointer;">
|
||||||
💬 欢迎
|
💬 欢迎
|
||||||
</button>
|
</button>
|
||||||
<div id="welcome-menu" class="welcome-menu" style="display:none;">
|
<div id="welcome-menu" class="welcome-menu" data-chat-welcome-menu style="display:none;">
|
||||||
@php
|
@php
|
||||||
$welcomeMessages = [
|
$welcomeMessages = [
|
||||||
'欢迎【{name}】来到我们的聊天室,请遵守规则,文明聊天!',
|
'欢迎【{name}】来到我们的聊天室,请遵守规则,文明聊天!',
|
||||||
@@ -101,7 +101,7 @@ $welcomeMessages = [
|
|||||||
];
|
];
|
||||||
@endphp
|
@endphp
|
||||||
@foreach ($welcomeMessages as $msg)
|
@foreach ($welcomeMessages as $msg)
|
||||||
<div class="welcome-menu-item" onclick="sendWelcomeTpl({{ json_encode($msg) }})">
|
<div class="welcome-menu-item" data-chat-welcome-template="{{ $msg }}">
|
||||||
{{ $msg }}</div>
|
{{ $msg }}</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user