feat: manual control function switch (#32)

.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

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|

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);
+  };
 }

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,
+}

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) {

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

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');
 
 }

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;

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');
 }
 

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');
   }
 }

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);

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');
 }

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;

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();
+init();