feat: Add more shortcut keys to popup

2025-10-01 01:47:15 +08:00
parent b60b770ed6
commit 7412b3a5c8
12 changed files with 505 additions and 269 deletions
--- a/src/libs/tranbox.js
+++ b/src/libs/tranbox.js
@@ -0,0 +1,95 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import Slection from "../views/Selection";
+import { DEFAULT_TRANBOX_SETTING, APP_CONSTS } from "../config";
+
+export class TransboxManager {
+  #container = null;
+  #reactRoot = null;
+  #shadowContainer = null;
+  #props = {};
+
+  constructor(initialProps = {}) {
+    this.#props = initialProps;
+
+    const { tranboxSetting = DEFAULT_TRANBOX_SETTING } = this.#props;
+    if (tranboxSetting?.transOpen) {
+      this.enable();
+    }
+  }
+
+  isEnabled() {
+    return (
+      !!this.#container && document.body.parentElement.contains(this.#container)
+    );
+  }
+
+  enable() {
+    if (!this.isEnabled()) {
+      this.#container = document.createElement("div");
+      this.#container.setAttribute("id", APP_CONSTS.boxID);
+      this.#container.style.cssText =
+        "font-size: 0; width: 0; height: 0; border: 0; padding: 0; margin: 0;";
+      document.body.parentElement.appendChild(this.#container);
+
+      this.#shadowContainer = this.#container.attachShadow({ mode: "closed" });
+      const emotionRoot = document.createElement("style");
+      const shadowRootElement = document.createElement("div");
+      shadowRootElement.classList.add(`${APP_CONSTS.boxID}_warpper`);
+      this.#shadowContainer.appendChild(emotionRoot);
+      this.#shadowContainer.appendChild(shadowRootElement);
+      const cache = createCache({
+        key: APP_CONSTS.boxID,
+        prepend: true,
+        container: emotionRoot,
+      });
+
+      this.#reactRoot = ReactDOM.createRoot(shadowRootElement);
+      this.CacheProvider = ({ children }) => (
+        <CacheProvider value={cache}>{children}</CacheProvider>
+      );
+    }
+
+    const AppProvider = this.CacheProvider;
+    this.#reactRoot.render(
+      <React.StrictMode>
+        <AppProvider>
+          <Slection {...this.#props} />
+        </AppProvider>
+      </React.StrictMode>
+    );
+  }
+
+  disable() {
+    if (!this.isEnabled() || !this.#reactRoot) {
+      return;
+    }
+    this.#reactRoot.unmount();
+    this.#container.remove();
+    this.#container = null;
+    this.#reactRoot = null;
+    this.#shadowContainer = null;
+    this.CacheProvider = null;
+  }
+
+  toggle() {
+    if (this.isEnabled()) {
+      this.disable();
+    } else {
+      this.enable();
+    }
+  }
+
+  update(newProps) {
+    this.#props = { ...this.#props, ...newProps };
+    if (this.isEnabled()) {
+      if (!this.#props.tranboxSetting?.transOpen) {
+        this.disable();
+      } else {
+        this.enable();
+      }
+    }
+  }
+}