diff --git a/src/components/chat-watcher/chat-watcher.ts b/src/components/chat-watcher/chat-watcher.ts index b16d3d5..abdba85 100644 --- a/src/components/chat-watcher/chat-watcher.ts +++ b/src/components/chat-watcher/chat-watcher.ts @@ -1,3 +1,4 @@ +import { consoleLog } from "../../log" import { checkForMutedWordsChat } from "./muted-words" let preserveMessageData = true @@ -61,6 +62,14 @@ const chatObserverCallback = (mutations: Array<MutationRecord>): void => { }) } +const overlayObserverCallback = (mutations: Array<MutationRecord>): void => { + mutations.forEach((mutation) => { + if (mutation.type === "childList") { + mutation.addedNodes.forEach((node: HTMLLIElement) => newChatReceived(node)) + } + }) +} + /** * Register observer for catching new chat messages */ @@ -70,4 +79,10 @@ export const registerChatMessageObserver = (): void => { const headObserver = new MutationObserver(chatObserverCallback) headObserver.observe(chatList, { childList: true, attributes: false, subtree: false }) } + + const chatOverlay = document.getElementById("chat--rant-overlay") + if (chatOverlay !== null) { + const overlayObserver = new MutationObserver(overlayObserverCallback) + overlayObserver.observe(chatOverlay, { childList: true, attributes: false, subtree: false }) + } } diff --git a/src/components/chat-watcher/muted-words.ts b/src/components/chat-watcher/muted-words.ts index 4361988..56d9283 100644 --- a/src/components/chat-watcher/muted-words.ts +++ b/src/components/chat-watcher/muted-words.ts @@ -106,8 +106,9 @@ export const addButtonToggle = ( /** * When clicked, hide self and show hidden text + * @param ev event */ - showButton.onclick = (): void => { + showButton.onclick = (ev): void => { if (textNode.classList.contains("hidden")) { textNode.classList.remove("hidden") showButton.textContent = buttonTextToHide @@ -115,6 +116,7 @@ export const addButtonToggle = ( textNode.classList.add("hidden") showButton.textContent = buttonTextToShow } + ev.stopImmediatePropagation() } } diff --git a/src/components/open-chat/open-chat.scss b/src/components/open-chat/open-chat.scss index a6ec460..0e1c5c3 100644 --- a/src/components/open-chat/open-chat.scss +++ b/src/components/open-chat/open-chat.scss @@ -86,60 +86,6 @@ display: none; } } - - .chat-history--rant { - .show-muted-text-button { - margin: 0 auto 3px auto; - display: block; - } - - &[data-level="1"] { - .show-muted-text-button { - background: #4382cb; - color: white; - } - } - &[data-level="2"] { - .show-muted-text-button { - background: #a6d279; - color: black; - } - } - &[data-level="5"] { - .show-muted-text-button { - background: #dfd019; - color: black; - } - } - &[data-level="10"] { - .show-muted-text-button { - background: #dd9520; - color: black; - } - } - &[data-level="20"] { - .show-muted-text-button { - background: #aa0eca; - color: white; - } - } - &[data-level="50"] { - .show-muted-text-button { - background: #8211e5; - color: white; - } - } - &[data-level="100"], - &[data-level="200"], - &[data-level="300"], - &[data-level="400"], - &[data-level="500"] { - .show-muted-text-button { - background: #bb0218; - color: white; - } - } - } } .chat-history--notification { @@ -204,3 +150,57 @@ } } } + +.chat-history--rant { +.show-muted-text-button { + margin: 0 auto 3px auto; + display: block; +} + +&[data-level="1"] { + .show-muted-text-button { + background: #4382cb; + color: white; + } +} +&[data-level="2"] { + .show-muted-text-button { + background: #a6d279; + color: black; + } +} +&[data-level="5"] { + .show-muted-text-button { + background: #dfd019; + color: black; + } +} +&[data-level="10"] { + .show-muted-text-button { + background: #dd9520; + color: black; + } +} +&[data-level="20"] { + .show-muted-text-button { + background: #aa0eca; + color: white; + } +} +&[data-level="50"] { + .show-muted-text-button { + background: #8211e5; + color: white; + } +} +&[data-level="100"], +&[data-level="200"], +&[data-level="300"], +&[data-level="400"], +&[data-level="500"] { + .show-muted-text-button { + background: #bb0218; + color: white; + } +} +}