From 36760c20930a0a76cae7c1bd1bb68cdd8622f37a Mon Sep 17 00:00:00 2001 From: Wibus <62133302+wibus-wee@users.noreply.github.com> Date: Thu, 6 Jul 2023 23:12:23 +0800 Subject: [PATCH] feat: manual control function switch (#32) --- .github/install.sh | 6 ++- README.md | 39 ++++++++++++++++- addon.js | 21 ++++++--- config.js | 20 +++++++++ dev-server.js | 2 +- replace.sh | 6 ++- src/core/file-changes-listener.ts | 3 ++ src/core/index.ts | 15 +++++++ src/core/inject-custom-root-style.ts | 2 +- src/core/listen-rooms-panel-drag-event.ts | 3 +- src/core/modify-chat-box.ts | 53 +++++++++++------------ src/core/theme-listener.ts | 4 ++ src/functions/index.ts | 15 +++++++ src/main.ts | 49 ++++++++++++++------- src/utils.ts | 22 +++++++++- types.d.ts | 6 +++ 16 files changed, 207 insertions(+), 59 deletions(-) create mode 100644 config.js create mode 100644 src/core/index.ts create mode 100644 src/functions/index.ts diff --git a/.github/install.sh b/.github/install.sh index 7ac03ee..7d908d0 100755 --- a/.github/install.sh +++ b/.github/install.sh @@ -1,15 +1,17 @@ #!/usr/bin/env bash # Check if the system is macOS if [ "$(uname)" == "Darwin" ]; then - cp ./main.mjs ~/Library/Application\ Support/icalingua + cp main.js ~/Library/Application\ Support/icalingua cp style.css ~/Library/Application\ Support/icalingua cp addon.js ~/Library/Application\ Support/icalingua + cp config.js ~/Library/Application\ Support/icalingua echo "Done." # Check if the system is Linux elif [ "$(expr substr $(uname -s) 1 5)" == "Linux" ]; then cp style.css ~/.config/icalingua cp addon.js ~/.config/icalingua - cp ./main.mjs ~/.config/icalingua + cp config.js ~/.config/icalingua + cp main.js ~/.config/icalingua echo "Done." else diff --git a/README.md b/README.md index 1d378a2..ac3f7fb 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ - 由于 Icalingua++ 的限制，我改变了消息列表的 DOM 结构，所以我暂时无法实现点击图片放大的功能。后续可能我会尝试重写灯箱来实现这个功能。[Issue #16](https://github.com/wibus-wee/icalingua-theme-telegram/issues/16) - 它**强制改变**了很多原本的**DOM结构**，这可能会导致一些功能出现问题，如果你发现了这些问题，欢迎提交 [Issue](https://github.com/wibus-wee/icalingua-theme-telegram/issues)。 - 由于我们想要增强聊天功能，我们可能需要另外启动一个子进程来处理一些信息。如果你**不信任我 / 不信任仓库代码**，你可以不使用这个主题。 +- 在 [#32](https://github.com/wibus-wee/icalingua-theme-telegram/pull/32) 中，我实现了手动控制功能启动功能，你现在可以在 `config.js` 中设置你想要启动的功能了，你也可以将 `manual` 设置为 `false` 来启动所有功能。有关更多配置信息，请参阅 [Config | 配置](#config--配置)。 ## Features | 特性 @@ -60,7 +61,7 @@ 2. 将 `addon.js`, `style.css`, `main.js` 复制到 Icalingua++ 的[数据目录](https://github.com/Icalingua-plus-plus/Icalingua-plus-plus#%E9%BB%98%E8%AE%A4%E6%95%B0%E6%8D%AE%E7%9B%AE%E5%BD%95) 3. 重启 Icalingua++。 -## Addon.js +## Enhancements & Feat. | 增强 & 新功能 这个文件用于帮助一些由于 DOM 结构的原因无法直接通过改变 CSS 实现目标样式的元素。已经实现的功能有： @@ -70,11 +71,47 @@ - [x] 移除回复消息的图标并改为点击即可回复消息的样式。 - [x] 为每个用户名分配不同的颜色。 - [x] 自动重载 CSS 和 JS 文件。 +- [x] 手动控制功能启动功能。 +- [ ] 全新的图像显示器。 +- [ ] 主题自动更新器。 - [ ] 用 Telegram 风格的图标替换图标。 - [ ] 更改模态框的样式，使其更加美观。 - [ ] 鼠标滑动以回复消息 +## Config | 配置 + +在 [#32](https://github.com/wibus-wee/icalingua-theme-telegram/pull/32) 中，我们引入了一个新的配置文件 `config.js`，你可以在这个文件中配置你想要启动的功能。有关这个文件的配置项定义，你可以前往 [types.d.ts](./types.d.ts) 查看。在此我简单介绍一下配置项： + +> **Note** +> +> **不知道咋写的先学下 JavaScript 吧，或者将 `manual` 设置为 false，这样所有功能都会启动。** + +### core -- 启动的核心功能。 + +你可以去前往 [core](./src/core//index.ts) 查看所有的核心功能。你需要填入的是核心功能的 Key。如： + +在文件里有一行代码： + +```ts +"modify-chat-box-interval": modifyChatBoxInterval, +``` + +我想启动这个功能，那么你在 config.js 的 core 中需要填入的是 [`modify-chat-box-interval`]，以此类推。 + +### chatbox --- 启动的聊天框修改功能 + +与 [core](#core----启动的核心功能) 类似，你可以去前往 [chatbox](./src/functions/index.ts) 查看所有的聊天框修改功能。你需要填入的是聊天框修改功能的 Key。 + + +### 其他注意事项 + +- 你可以在 `config.js` 中设置 `manual` 为 `false` 来启动所有功能。 +- 当 `dev` 为 `true` 且你启动了 `fileChangesListener` 时，当你对 JS 文件进行修改时，Icalingua++ 会自动重载窗口，对 CSS 文件修改时，Icalingua++ 会自动重载 CSS 文件。 +- 当 `dev` 为 `true` 时，全部功能都会启动，你无法通过 `manual` 或其他办法来关闭功能（除了删代码 🙂）。 +- 修改了 `config.js` 后，你需要重启 / 重载 Icalingua++ 才能使配置生效。 +- 你如果“不小心”填错了功能的 Key，你大可以放心这个功能是不会被启动的，并且在控制台会有错误警告。 + ## Preview |Light|Dark| diff --git a/addon.js b/addon.js index 2b0f97d..379e559 100644 --- a/addon.js +++ b/addon.js @@ -1,13 +1,20 @@ window.onload = async function () { const scriptElement = document.head.getElementsByTagName('script')[0].src; const settings = await require('electron').ipcRenderer.invoke('getSettings'); - window.theme = { - dev: false, - location: decodeURIComponent(scriptElement.replace('addon.js', '').replace('file:///', '')), - theme: settings.theme, - } const refineScript = document.createElement('script'); refineScript.type = 'module'; - refineScript.src = scriptElement.replace('addon.js', 'main.mjs'); - document.head.appendChild(refineScript); + refineScript.src = scriptElement.replace('addon.js', 'main.js'); + const configScript = document.createElement('script'); + configScript.src = scriptElement.replace('addon.js', 'config.js'); + document.head.appendChild(configScript); + configScript.onload = function () { + + window.theme = { + ...window.theme, + location: decodeURIComponent(scriptElement.replace('addon.js', '').replace('file:///', '')), + theme: settings.theme, + }; + + document.head.appendChild(refineScript); + }; } \ No newline at end of file diff --git a/config.js b/config.js new file mode 100644 index 0000000..5c651a3 --- /dev/null +++ b/config.js @@ -0,0 +1,20 @@ +window.theme = { + chatbox: [ + "merge-same-user-message", + "enhance-stickers-display", + "not-exist-function", + "special-username-color", + "better-image-display", + "fix-message-content-width", + ], + dev: true, + core: [ + "inject-custom-root-style", + "listen-rooms-panel-drag-event", + "modify-chat-box-interval", + "refined-image-gallery", + "file-changes-listener", + "theme-listener", + ], + manual: true, +} \ No newline at end of file diff --git a/dev-server.js b/dev-server.js index 98b8338..1ec9d7f 100644 --- a/dev-server.js +++ b/dev-server.js @@ -4,7 +4,7 @@ import chalk from "chalk"; import path from "path"; import consola from "consola"; console.clear() -const watcher = ["addon.js", "style.scss"] +const watcher = ["addon.js", "style.scss", "config.js"] const cache = {}; const pwd = execSync("pwd", { encoding: "utf-8" }).trim() function cacheFiles(dir) { diff --git a/replace.sh b/replace.sh index 62db545..4294b14 100755 --- a/replace.sh +++ b/replace.sh @@ -2,16 +2,18 @@ # Check if the system is macOS if [ "$(uname)" == "Darwin" ]; then pnpm build - cp ./dist/main.mjs ~/Library/Application\ Support/icalingua + cp ./dist/main.js ~/Library/Application\ Support/icalingua cp ./dist/style.css ~/Library/Application\ Support/icalingua cp addon.js ~/Library/Application\ Support/icalingua + cp config.js ~/Library/Application\ Support/icalingua echo "Done." # Check if the system is Linux elif [ "$(expr substr $(uname -s) 1 5)" == "Linux" ]; then pnpm build cp ./dist/style.css ~/.config/icalingua cp addon.js ~/.config/icalingua - cp ./dist/main.mjs ~/.config/icalingua + cp ./dist/main.js ~/.config/icalingua + cp config.js ~/.config/icalingua echo "Done." else diff --git a/src/core/file-changes-listener.ts b/src/core/file-changes-listener.ts index e3d96d8..64aa888 100644 --- a/src/core/file-changes-listener.ts +++ b/src/core/file-changes-listener.ts @@ -1,3 +1,5 @@ +import { createConsole } from "../utils"; + const fs = require('fs'); const watcher = ["addon.js", "main.js", "style.css"] @@ -28,5 +30,6 @@ export function fileChangesListener() { } } }) + createConsole('FileChangesListener', 'File changes listener listening'); } \ No newline at end of file diff --git a/src/core/index.ts b/src/core/index.ts new file mode 100644 index 0000000..659357c --- /dev/null +++ b/src/core/index.ts @@ -0,0 +1,15 @@ +import { fileChangesListener } from "./file-changes-listener"; +import { injectCustomRootStyle } from "./inject-custom-root-style"; +import { listenRoomsPanelDragEvent } from "./listen-rooms-panel-drag-event"; +import { modifyChatBoxInterval } from "./modify-chat-box"; +import { themeListener } from "./theme-listener"; + +export const Cores = { + "inject-custom-root-style": injectCustomRootStyle, + "listen-rooms-panel-drag-event": listenRoomsPanelDragEvent, + "modify-chat-box-interval": modifyChatBoxInterval, + "file-changes-listener": fileChangesListener, + "theme-listener": themeListener, +}; + +export type CoresKey = keyof typeof Cores; \ No newline at end of file diff --git a/src/core/inject-custom-root-style.ts b/src/core/inject-custom-root-style.ts index 7c0197c..7175e57 100644 --- a/src/core/inject-custom-root-style.ts +++ b/src/core/inject-custom-root-style.ts @@ -11,6 +11,6 @@ export function injectCustomRootStyle() { } `; document.head.appendChild(style); - createConsole('ADDON', 'inject custom root style success'); + createConsole('InjectCustomRootStyle', 'Custom root style injected'); } diff --git a/src/core/listen-rooms-panel-drag-event.ts b/src/core/listen-rooms-panel-drag-event.ts index c03978e..0ccbb7e 100644 --- a/src/core/listen-rooms-panel-drag-event.ts +++ b/src/core/listen-rooms-panel-drag-event.ts @@ -1,4 +1,4 @@ -import { getRoomsPanelWidth, getRootStyle, setRootStyle } from '../utils.js'; +import { createConsole, getRoomsPanelWidth, getRootStyle, setRootStyle } from '../utils.js'; export function listenRoomsPanelDragEvent() { const elMain = document.querySelector('div.el-main.multipane.layout-v'); @@ -10,5 +10,6 @@ export function listenRoomsPanelDragEvent() { setRootStyle('rooms-panel-width', roomsPanelWidth); } }); + createConsole('ListenRoomsPanelDragEvent', 'Rooms panel drag event listening'); } } diff --git a/src/core/modify-chat-box.ts b/src/core/modify-chat-box.ts index 461e3f3..7b7e1e1 100644 --- a/src/core/modify-chat-box.ts +++ b/src/core/modify-chat-box.ts @@ -1,29 +1,6 @@ -import { betterImageDisplay } from "../functions/better-image-display"; -import { enhanceStickersDisplay } from "../functions/enhance-stickers-display"; -import { fixMessageContentWidth } from "../functions/fix-message-content-width"; -import { mergeSameUserMessage } from "../functions/merge-same-user-message"; -import { specialUsernameColor } from "../functions/special-username-color"; +import { Functions } from "../functions"; import { IMessageUserList } from "../types"; -import { createConsole } from "../utils"; - -function featuresFn(messageUserList: IMessageUserList) { - // === Feat1: Merge Same User Message === - mergeSameUserMessage(messageUserList); - // === Feat2: Better image display === - betterImageDisplay(messageUserList); - // === Feat3: Special Username Color === - specialUsernameColor(messageUserList); - // === Feat4: Enhance Stickers Display === - enhanceStickersDisplay(messageUserList); -} - -function fixsFn(messageUserList: IMessageUserList) { - // === Fix1: Fix message content width === - fixMessageContentWidth(messageUserList); - // === Fix(Better Image Display): Fix click event was destroyed === - // createConsole("FIX", "Fix click event was destroyed") - // fixImageClickEvent(messageUserList); -} +import { createConsoleGroup } from "../utils"; /** * 修改聊天框，对聊天框进行深度定制 @@ -67,12 +44,32 @@ export function modifyChatBox() { }); } }); - featuresFn(messageUserList); - fixsFn(messageUserList); + Promise.all( + window.theme.chatbox.map((fn) => { + return Functions[fn](messageUserList); + }) + ); } export function modifyChatBoxInterval() { - createConsole("ADDON", "modify chat box interval"); + createConsoleGroup( + "ModifyChatBox", + "These functions will be called:", + window.theme.chatbox.map((f) => { + // 将短横线转换为驼峰 + const text = f.replace(/-(\w)/g, function (_all, letter) { + return letter.toUpperCase(); + }) as keyof typeof Functions; + const isFunctionExist = Functions[f] !== undefined; + if (!isFunctionExist) { + window.theme.chatbox = window.theme.chatbox.filter((item) => item !== f); + } + return { + text: `${text} => ${isFunctionExist ? "✅" : "❌"}`, + type: isFunctionExist ? "log" : "warn", + }; + }) + ); setInterval(() => { modifyChatBox(); }, 500); diff --git a/src/core/theme-listener.ts b/src/core/theme-listener.ts index 541247b..0770f23 100644 --- a/src/core/theme-listener.ts +++ b/src/core/theme-listener.ts @@ -1,3 +1,5 @@ +import { createConsole } from "../utils"; + export function themeListener() { // https://github.com/wibus-wee/icalingua-theme-telegram/issues/21#issuecomment-1621126078 setInterval(async () => { @@ -21,4 +23,6 @@ export function themeListener() { document.documentElement.setAttribute('theme', newColorScheme); } }); + + createConsole('ThemeListener', 'Theme listener listening'); } diff --git a/src/functions/index.ts b/src/functions/index.ts new file mode 100644 index 0000000..c1be09a --- /dev/null +++ b/src/functions/index.ts @@ -0,0 +1,15 @@ +import { betterImageDisplay } from "./better-image-display"; +import { enhanceStickersDisplay } from "./enhance-stickers-display"; +import { fixMessageContentWidth } from "./fix-message-content-width"; +import { mergeSameUserMessage } from "./merge-same-user-message"; +import { specialUsernameColor } from "./special-username-color"; + +export const Functions = { + "merge-same-user-message": mergeSameUserMessage, + "better-image-display": betterImageDisplay, + "special-username-color": specialUsernameColor, + "enhance-stickers-display": enhanceStickersDisplay, + "fix-message-content-width": fixMessageContentWidth, +} + +export type FunctionsKey = keyof typeof Functions; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 38ba8c4..c476303 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,21 +1,40 @@ -import { fileChangesListener } from './core/file-changes-listener'; -import { injectCustomRootStyle } from './core/inject-custom-root-style'; -import { listenRoomsPanelDragEvent } from './core/listen-rooms-panel-drag-event'; -import { modifyChatBoxInterval } from './core/modify-chat-box'; -import { themeListener } from './core/theme-listener'; -import { createConsole, getRoomsPanelWidth } from './utils'; +import { Cores } from "./core"; +import { Functions } from "./functions"; +import { createConsole, createConsoleGroup, getRoomsPanelWidth } from "./utils"; function init() { - if (!getRoomsPanelWidth()) { + if (!getRoomsPanelWidth()) { setTimeout(init, 1000); - createConsole('ADDON', 'rooms-panel not found, try again after 1s'); + createConsole("ADDON", "rooms-panel not found, try again after 1s"); return; } - injectCustomRootStyle(); // 注入自定义根样式 - listenRoomsPanelDragEvent(); // 监听侧边栏拖拽事件 - modifyChatBoxInterval(); // 修改聊天框 - // refinedImageGallery(); // 优化图片显示 - fileChangesListener(); // 监听文件变化 - themeListener(); // 监听主题变化 + if (!window.theme.manual || window.theme.dev) { + // 如果不是手动控制功能启动, dev 模式下也会全部启动 + window.theme.core = Object.keys(Cores) as (keyof typeof Cores)[]; + window.theme.chatbox = Object.keys(Functions) as (keyof typeof Functions)[]; + } + createConsoleGroup( + "Init", + "These Core Functions will be executed:", + window.theme.core.map((f) => { + // 将短横线转换为驼峰 + const text = f.replace(/-(\w)/g, function (_all, letter) { + return letter.toUpperCase(); + }) as keyof typeof Cores; + const isCoreExist = Cores[f] !== undefined; + if (!isCoreExist) { + window.theme.core = window.theme.core.filter((c) => c !== f); + } + return { + text: `${text} => ${isCoreExist ? "✅" : "❌"}`, + type: isCoreExist ? "log" : "warn", + }; + }) + ); + Promise.all( + window.theme.core.map((fn) => { + return Cores[fn](); + }) + ); } -init(); \ No newline at end of file +init(); diff --git a/src/utils.ts b/src/utils.ts index daa9f46..bbbb701 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -45,7 +45,8 @@ export function getRootStyle(key: any) { } export function getRoomsPanelWidth() { - return (document.getElementsByClassName("rooms-panel")[0] as HTMLElement).style.width; + return (document.getElementsByClassName("rooms-panel")[0] as HTMLElement) + .style.width; } export function createConsole(code: string, desc: string) { @@ -55,3 +56,22 @@ export function createConsole(code: string, desc: string) { "background:unset;color:unset;" ); } + +export function createConsoleGroup( + code: string, + desc: string, + group: { + text: string; + type: "log" | "error" | "warn" | "info"; + }[] +) { + console.groupCollapsed( + `%c ${code} %c ${desc}`, + "background: #eaeffd;color:#335eea;padding: 4px 6px;border-radius:3px;", + "background:unset;color:unset;" + ); + group.forEach((item) => { + console[item.type](item.text); + }); + console.groupEnd(); +} diff --git a/types.d.ts b/types.d.ts index 0208baa..b86b606 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,3 +1,6 @@ +import { CoresKey } from "./src/core" +import { Functions, FunctionsKey } from "./src/functions" + declare global { interface Window { theme: { @@ -5,6 +8,9 @@ declare global { location: string, theme: "auto" | "light" | "dark", systemTheme: "light" | "dark", + chatbox: FunctionsKey[], + core: CoresKey[], + manual: boolean, // 是否手动控制功能启动 } } }