merge

.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

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
+// @icon          ${process.env.REACT_APP_LOGOURL}
-// @downloadURL   https://raw.githubusercontent.com/fishjar/kiss-translator/master/dist/userscript/kiss-translator.user.js
+// @downloadURL   ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
-// @updateURL     https://raw.githubusercontent.com/fishjar/kiss-translator/master/dist/userscript/kiss-translator.user.js
+// @updateURL     ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @grant         GM_xmlhttpRequest
 // @grant         GM.xmlhttpRequest
 // @grant         GM_setValue

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 getSidePosition = (
-  const [origin, setOrigin] = useState(null);
+  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,
+    x: left,
-    y: props.top,
+    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;
+      const { w, h } = windowSize;
-      x = limitNumber(x, -props.width / 2, w - props.width / 2);
+      x = limitNumber(x, -width / 2, w - width / 2);
-      y = limitNumber(y, -props.height / 2, h - props.height / 2);
+      y = limitNumber(y, -height / 2, h - height / 2);
       setPosition({ x, y });
     }
   };
 
   const handlePointerUp = (e) => {
     setOrigin(null);
-
+    if (!goside) {
-    if (!props.goside) {
       return;
     }
-
+    setPosition((pre) =>
-    const { w, h } = props.windowSize;
+      getSidePosition(windowSize.w, windowSize.h, width, height, pre.x, pre.y)
-    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 });
   };
 
   const handleClick = (e) => {
@@ -72,23 +105,33 @@ export default function Draggable(props) {
       };
 
   useEffect(() => {
-    const { w, h } = props.windowSize;
+    setOrigin(null);
-    setPosition(({ x, y }) => ({
+    if (!goside) {
-      x: limitNumber(x, -props.width / 2, w - props.width / 2),
+      return;
-      y: limitNumber(y, -props.height / 2, h - props.height / 2),
+    }
-    }));
+    setPosition((pre) =>
-  }, [props.windowSize, props.width, props.height]);
+      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>
   );
 }

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,
+    left: window.innerWidth - fabWidth,
-    top: window.innerHeight - fabWidth - fabWidth,
+    top: window.innerHeight / 2,
   };
 
   return (

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

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>