touch operation...

src/config/i18n.js

@@ -643,4 +643,20 @@ export const I18N = {
     zh: `收藏词汇`,
     en: `Favorite Words`,
   },
+  touch_setting: {
+    zh: `触屏设置`,
+    en: `Touch Setting`,
+  },
+  touch_tap_0: {
+    zh: `禁用`,
+    en: `Disable`,
+  },
+  touch_tap_2: {
+    zh: `双指轻触`,
+    en: `Two finger tap`,
+  },
+  touch_tap_3: {
+    zh: `三指轻触`,
+    en: `Three finger tap`,
+  },
 };

src/config/index.js

@@ -404,6 +404,14 @@ export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
 export const TRANS_MAX_LENGTH = 5000; // 最长翻译长度
 export const TRANS_NEWLINE_LENGTH = 20; // 换行字符数
 
+// 触屏操作
+export const DEFAULT_TOUCH_OPERATION = {
+  [OPT_SHORTCUT_TRANSLATE]: [2, 1, 500],
+  [OPT_SHORTCUT_STYLE]: [3, 1, 500],
+  [OPT_SHORTCUT_POPUP]: [0, 1, 500],
+  [OPT_SHORTCUT_SETTING]: [3, 2, 500],
+};
+
 export const DEFAULT_SETTING = {
   darkMode: false, // 深色模式
   uiLang: "en", // 界面语言
@@ -423,6 +431,7 @@ export const DEFAULT_SETTING = {
   shortcuts: DEFAULT_SHORTCUTS, // 快捷键
   inputRule: DEFAULT_INPUT_RULE, // 输入框设置
   tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
+  touchOperations: DEFAULT_TOUCH_OPERATION, // 触屏操作
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];

src/hooks/Touch.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { DEFAULT_TOUCH_OPERATION } from "../config";
+import { useSetting } from "./Setting";
+
+export function useTouch(action) {
+  const { setting, updateSetting } = useSetting();
+  const touchOperations = setting?.touchOperations || DEFAULT_TOUCH_OPERATION;
+  const touchOperation = touchOperations[action];
+
+  const setTouchOperation = useCallback(
+    async (val, idx) => {
+      touchOperations[action][idx] = val;
+      await updateSetting({ touchOperations: { ...touchOperations } });
+    },
+    [action, touchOperations, updateSetting]
+  );
+
+  return { touchOperation, setTouchOperation };
+}

src/libs/touch.js

@@ -0,0 +1,31 @@
+export function touchTapListener(fn, setting) {
+  const [touchLength, touchCount, touchTime] = setting;
+
+  let lastTouch = 0;
+  let curCount = 0;
+  const handleTouchend = (e) => {
+    if (e.touches.length !== touchLength) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      curCount = 0;
+    }, touchTime);
+
+    curCount++;
+    const now = Date.now();
+    if (curCount === touchCount && now - lastTouch <= touchTime) {
+      timer && clearTimeout(timer);
+      curCount = 0;
+      fn();
+    }
+
+    lastTouch = now;
+  };
+
+  document.addEventListener("touchend", handleTouchend);
+  return () => {
+    document.removeEventListener("touchend", handleTouchend);
+  };
+}

src/views/Options/Navigator.js

@@ -13,8 +13,9 @@ import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
 import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
-import SelectAllIcon from '@mui/icons-material/SelectAll';
-import EventNoteIcon from '@mui/icons-material/EventNote';
+import SelectAllIcon from "@mui/icons-material/SelectAll";
+import EventNoteIcon from "@mui/icons-material/EventNote";
+import TouchAppIcon from "@mui/icons-material/TouchApp";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -47,6 +48,12 @@ export default function Navigator(props) {
       url: "/input",
       icon: <InputIcon />,
     },
+    {
+      id: "touch_setting",
+      label: i18n("touch_setting"),
+      url: "/touch",
+      icon: <TouchAppIcon />,
+    },
     {
       id: "selection_translate",
       label: i18n("selection_translate"),

src/views/Options/index.js

@@ -22,6 +22,7 @@ import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
 import FavWords from "./FavWords";
+import TouchSetting from "./touchSetting";
 
 export default function Options() {
   const [error, setError] = useState("");
@@ -122,6 +123,7 @@ export default function Options() {
                 <Route index element={<Setting />} />
                 <Route path="rules" element={<Rules />} />
                 <Route path="input" element={<InputSetting />} />
+                <Route path="touch" element={<TouchSetting />} />
                 <Route path="tranbox" element={<Tranbox />} />
                 <Route path="apis" element={<Apis />} />
                 <Route path="sync" element={<SyncSetting />} />

src/views/Options/touchSetting.js

@@ -0,0 +1,103 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { useI18n } from "../../hooks/I18n";
+import {
+  OPT_SHORTCUT_TRANSLATE,
+  OPT_SHORTCUT_STYLE,
+  OPT_SHORTCUT_POPUP,
+  OPT_SHORTCUT_SETTING,
+} from "../../config";
+import Grid from "@mui/material/Grid";
+import { limitNumber } from "../../libs/utils";
+import { useTouch } from "../../hooks/Touch";
+
+function TouchItem({ action, name }) {
+  const i18n = useI18n();
+  const { touchOperation, setTouchOperation } = useTouch(action);
+  const [triggerShortcut, triggerCount, triggerTime] = touchOperation;
+
+  const handleChangeShortcut = (e) => {
+    const value = limitNumber(e.target.value, 0, 3);
+    setTouchOperation(value, 0);
+  };
+
+  const handleChangeCount = (e) => {
+    const value = limitNumber(e.target.value, 1, 3);
+    setTouchOperation(value, 2);
+  };
+
+  const handleChangeTime = (e) => {
+    const value = limitNumber(e.target.value, 100, 1000);
+    setTouchOperation(value, 3);
+  };
+
+  return (
+    <Box>
+      <Grid container spacing={2} columns={12}>
+        <Grid item xs={12} sm={12} md={4} lg={4}>
+          <TextField
+            select
+            fullWidth
+            size="small"
+            name="triggerShortcut"
+            value={triggerShortcut}
+            label={i18n(name)}
+            onChange={handleChangeShortcut}
+          >
+            {[0, 2, 3].map((val) => (
+              <MenuItem key={val} value={val}>
+                {i18n(`touch_tap_${val}`)}
+              </MenuItem>
+            ))}
+          </TextField>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4} lg={4}>
+          <TextField
+            select
+            fullWidth
+            size="small"
+            name="triggerCount"
+            value={triggerCount}
+            label={i18n("shortcut_press_count")}
+            onChange={handleChangeCount}
+          >
+            {[1, 2, 3].map((val) => (
+              <MenuItem key={val} value={val}>
+                {val}
+              </MenuItem>
+            ))}
+          </TextField>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4} lg={4}>
+          <TextField
+            fullWidth
+            size="small"
+            label={i18n("combo_timeout")}
+            type="number"
+            name="triggerTime"
+            defaultValue={triggerTime}
+            onChange={handleChangeTime}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default function TouchSetting() {
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <TouchItem
+          action={OPT_SHORTCUT_TRANSLATE}
+          name="toggle_translate_shortcut"
+        />
+        <TouchItem action={OPT_SHORTCUT_STYLE} name="toggle_style_shortcut" />
+        <TouchItem action={OPT_SHORTCUT_POPUP} name="toggle_popup_shortcut" />
+        <TouchItem action={OPT_SHORTCUT_SETTING} name="open_setting_shortcut" />
+      </Stack>
+    </Box>
+  );
+}