merge

2023-08-10 09:30:43 +08:00
parent faa4251e6c 077713cd64
commit a2b57da96b
6 changed files with 102 additions and 44 deletions
--- a/.env
+++ b/.env
@@ -6,3 +6,6 @@ REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 REACT_APP_OPTIONSPAGE=https://kiss-translator.rayjar.com/options
 REACT_APP_OPTIONSPAGE2=https://fishjar.github.io/kiss-translator/options.html
 REACT_APP_OPTIONSPAGE_DEV=http://localhost:3000/options.html
+REACT_APP_LOGOURL=https://raw.githubusercontent.com/fishjar/kiss-translator/master/public/images/logo192.png
+REACT_APP_USERSCRIPT_DOWNLOADURL=https://kiss-translator.rayjar.com/kiss-translator.user.js
+REACT_APP_USERSCRIPT_DOWNLOADURL2=https://raw.githubusercontent.com/fishjar/kiss-translator/master/dist/userscript/kiss-translator.user.js
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -79,9 +79,9 @@ const userscriptWebpack = (config, env) => {
 // @author        Gabe<yugang2002@gmail.com>
 // @homepageURL   ${process.env.REACT_APP_HOMEPAGE}
 // @match         *://*/*
-// @icon          https://raw.githubusercontent.com/fishjar/kiss-translator/master/public/images/logo192.png
-// @downloadURL   https://raw.githubusercontent.com/fishjar/kiss-translator/master/dist/userscript/kiss-translator.user.js
-// @updateURL     https://raw.githubusercontent.com/fishjar/kiss-translator/master/dist/userscript/kiss-translator.user.js
+// @icon          ${process.env.REACT_APP_LOGOURL}
+// @downloadURL   ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
+// @updateURL     ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @grant         GM_xmlhttpRequest
 // @grant         GM.xmlhttpRequest
 // @grant         GM_setValue
--- a/src/views/Action/Draggable.js
+++ b/src/views/Action/Draggable.js
@@ -1,17 +1,59 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";

-export default function Draggable(props) {
-  const [origin, setOrigin] = useState(null);
+const getSidePosition = (
+  windowWidth,
+  windowHeight,
+  width,
+  height,
+  left,
+  top
+) => {
+  const right = Math.abs(windowWidth - left - width);
+  const bottom = Math.abs(windowHeight - top - height);
+  left = Math.abs(left);
+  top = Math.abs(top);
+  const min = Math.min(left, top, right, bottom);
+  switch (min) {
+    case right:
+      left = windowWidth - width / 2;
+      break;
+    case left:
+      left = -width / 2;
+      break;
+    case bottom:
+      top = windowHeight - height / 2;
+      break;
+
+    default:
+      top = -height / 2;
+  }
+  return { x: left, y: top };
+};
+
+export default function Draggable({
+  windowSize,
+  width,
+  height,
+  left,
+  top,
+  show,
+  goside,
+  onStart,
+  onMove,
+  handler,
+  children,
+}) {
+  const [origin, setOrigin] = useState(goside ? {} : null);
  const [position, setPosition] = useState({
-    x: props.left,
-    y: props.top,
+    x: left,
+    y: top,
  });

  const handlePointerDown = (e) => {
    !isMobile && e.target.setPointerCapture(e.pointerId);
-    props?.onStart();
+    onStart && onStart();
    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    setOrigin({
      x: position.x,
@@ -22,37 +64,28 @@ export default function Draggable(props) {
  };

  const handlePointerMove = (e) => {
-    props?.onMove();
+    onMove && onMove();
    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    if (origin) {
      const dx = clientX - origin.px;
      const dy = clientY - origin.py;
      let x = origin.x + dx;
      let y = origin.y + dy;
-      const { w, h } = props.windowSize;
-      x = limitNumber(x, -props.width / 2, w - props.width / 2);
-      y = limitNumber(y, -props.height / 2, h - props.height / 2);
+      const { w, h } = windowSize;
+      x = limitNumber(x, -width / 2, w - width / 2);
+      y = limitNumber(y, -height / 2, h - height / 2);
      setPosition({ x, y });
    }
  };

  const handlePointerUp = (e) => {
    setOrigin(null);
-
-    if (!props.goside) {
+    if (!goside) {
      return;
    }
-
-    const { w, h } = props.windowSize;
-    let { x: left, y: top } = position;
-    const right = w - left - props.width;
-    const bottom = h - top - props.height;
-    const min = Math.min(left, top, right, bottom);
-    left === min && (left = -props.width / 2);
-    top === min && (top = -props.height / 2);
-    right === min && (left = w - props.width / 2);
-    bottom === min && (top = h - props.height / 2);
-    setPosition({ x: left, y: top });
+    setPosition((pre) =>
+      getSidePosition(windowSize.w, windowSize.h, width, height, pre.x, pre.y)
+    );
  };

  const handleClick = (e) => {
@@ -72,23 +105,33 @@ export default function Draggable(props) {
      };

  useEffect(() => {
-    const { w, h } = props.windowSize;
-    setPosition(({ x, y }) => ({
-      x: limitNumber(x, -props.width / 2, w - props.width / 2),
-      y: limitNumber(y, -props.height / 2, h - props.height / 2),
-    }));
-  }, [props.windowSize, props.width, props.height]);
+    setOrigin(null);
+    if (!goside) {
+      return;
+    }
+    setPosition((pre) =>
+      getSidePosition(windowSize.w, windowSize.h, width, height, pre.x, pre.y)
+    );
+  }, [goside, windowSize.w, windowSize.h, width, height]);
+
+  const opacity = useMemo(() => {
+    if (goside) {
+      return origin ? 1 : 0.3;
+    }
+    return origin ? 0.7 : 1;
+  }, [origin, goside]);

  return (
    <div
      style={{
+        opacity,
        position: "fixed",
        left: position.x,
        top: position.y,
        zIndex: 2147483647,
-        display: props.show ? "block" : "none",
+        display: show ? "block" : "none",
        transitionProperty: origin ? "none" : "all",
-        transitionDuration: "1s",
+        transitionDuration: "0.5s",
        transitionDelay: "0.5s",
      }}
      onClick={handleClick}
@@ -99,9 +142,9 @@ export default function Draggable(props) {
        }}
        {...touchProps}
      >
-        {props.handler}
+        {handler}
      </div>
-      <div>{props.children}</div>
+      <div>{children}</div>
    </div>
  );
 }
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -51,7 +51,7 @@ export default function Action({ translator }) {

  const popProps = useMemo(() => {
    const width = Math.min(windowSize.w, 300);
-    const height = Math.min(windowSize.h, 386);
+    const height = Math.min(windowSize.h, 442);
    const left = (windowSize.w - width) / 2;
    const top = (windowSize.h - height) / 2;
    return {
@@ -67,8 +67,8 @@ export default function Action({ translator }) {
    windowSize,
    width: fabWidth,
    height: fabWidth,
-    left: window.innerWidth - fabWidth - fabWidth / 2,
-    top: window.innerHeight - fabWidth - fabWidth,
+    left: window.innerWidth - fabWidth,
+    top: window.innerHeight / 2,
  };

  return (
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -9,6 +9,7 @@ import ThemeProvider from "../../hooks/Theme";
 import { useEffect, useState } from "react";
 import { isGm } from "../../libs/browser";
 import { sleep } from "../../libs/utils";
+import CircularProgress from "@mui/material/CircularProgress";

 export default function Options() {
  const [error, setError] = useState(false);
@@ -22,7 +23,6 @@ export default function Options() {
    (async () => {
      let i = 0;
      for (;;) {
-        await sleep(1000);
        if (window.APP_NAME === process.env.REACT_APP_NAME) {
          setReady(true);
          break;
@@ -32,6 +32,8 @@ export default function Options() {
          setError(true);
          break;
        }
+
+        await sleep(1000);
      }
    })();
  }, []);
@@ -41,11 +43,13 @@ export default function Options() {
      <center>
        <h2>
          Please confirm whether to install or enable{" "}
-          <a href={process.env.REACT_APP_OPTIONSPAGE}>KISS Translator</a>{" "}
+          <a href={process.env.REACT_APP_HOMEPAGE}>KISS Translator</a>{" "}
          GreaseMonkey script?
        </h2>
        <h2>
-          or <a href={process.env.REACT_APP_HOMEPAGE}>click here</a> for help
+          <a href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>Click here</a>{" "}
+          to install, or <a href={process.env.REACT_APP_HOMEPAGE}>click here</a>{" "}
+          for help.
        </h2>
      </center>
    );
@@ -54,7 +58,7 @@ export default function Options() {
  if (isGm && !ready) {
    return (
      <center>
-        <h2>loading...</h2>
+        <CircularProgress />
      </center>
    );
  }
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -89,7 +89,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
    );
  }

-  const { transOpen, translator, fromLang, toLang, textStyle } = rule;
+  const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;

  return (
    <Box minWidth={300} sx={{ p: 2 }}>
@@ -168,6 +168,14 @@ export default function Popup({ setShowPopup, translator: tran }) {
          ))}
        </TextField>

+        <TextField
+          size="small"
+          name="bgColor"
+          defaultValue={bgColor}
+          label={i18n("bg_color")}
+          onBlur={handleChange}
+        />
+
        <Button variant="text" onClick={handleOpenSetting}>
          {i18n("setting")}
        </Button>