diff --git a/src/common.js b/src/common.js
index 6a0c7d1..3f6387f 100644
--- a/src/common.js
+++ b/src/common.js
@@ -16,6 +16,8 @@ import { Translator } from "./libs/translator";
import { sendIframeMsg, sendParentMsg } from "./libs/iframe";
import { matchRule } from "./libs/rules";
import Slection from "./views/Selection";
+import { touchTapListener } from "./libs/touch";
+import { debounce } from "./libs/utils";
export async function runTranslator(setting) {
const href = document.location.href;
@@ -120,10 +122,22 @@ export function windowListener(rule) {
});
}
-export function showErr(err) {
- console.error("[KISS-Translator]", err);
+export function showErr(message) {
const $err = document.createElement("div");
- $err.innerText = `KISS-Translator: ${err.message}`;
+ $err.innerText = `KISS-Translator: ${message}`;
$err.style.cssText = "background:red; color:#fff;";
document.body.prepend($err);
}
+
+export function touchOperation(translator) {
+ const { touchTranslate = 2 } = translator.setting;
+ if (touchTranslate === 0) {
+ return;
+ }
+
+ const handleTap = debounce(() => {
+ translator.toggle();
+ sendIframeMsg(MSG_TRANS_TOGGLE);
+ });
+ touchTapListener(handleTap, touchTranslate);
+}
diff --git a/src/config/i18n.js b/src/config/i18n.js
index a29fb80..3ade455 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -647,6 +647,10 @@ export const I18N = {
zh: `触屏设置`,
en: `Touch Setting`,
},
+ touch_translate_shortcut: {
+ zh: `触屏翻译快捷方式`,
+ en: `Touch Translate Shortcut`,
+ },
touch_tap_0: {
zh: `禁用`,
en: `Disable`,
diff --git a/src/config/index.js b/src/config/index.js
index 6d281ed..00083aa 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -404,14 +404,6 @@ 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", // 界面语言
@@ -431,7 +423,7 @@ export const DEFAULT_SETTING = {
shortcuts: DEFAULT_SHORTCUTS, // 快捷键
inputRule: DEFAULT_INPUT_RULE, // 输入框设置
tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
- touchOperations: DEFAULT_TOUCH_OPERATION, // 触屏操作
+ touchTranslate: 2, // 触屏翻译
};
export const DEFAULT_RULES = [GLOBLA_RULE];
diff --git a/src/content.js b/src/content.js
index 0c99f5e..d8fffe0 100644
--- a/src/content.js
+++ b/src/content.js
@@ -15,6 +15,7 @@ import {
showTransbox,
windowListener,
showErr,
+ touchOperation,
} from "./common";
function runtimeListener(translator) {
@@ -70,7 +71,11 @@ function runtimeListener(translator) {
// 浮球按钮
await showFab(translator);
+
+ // 触屏操作
+ touchOperation(translator);
} catch (err) {
- showErr(err);
+ console.error("[KISS-Translator]", err);
+ showErr(err.message);
}
})();
diff --git a/src/hooks/Touch.js b/src/hooks/Touch.js
deleted file mode 100644
index ca462d2..0000000
--- a/src/hooks/Touch.js
+++ /dev/null
@@ -1,19 +0,0 @@
-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 };
-}
diff --git a/src/libs/touch.js b/src/libs/touch.js
index 942e8e8..4b0e066 100644
--- a/src/libs/touch.js
+++ b/src/libs/touch.js
@@ -1,31 +1,12 @@
-export function touchTapListener(fn, setting) {
- const [touchLength, touchCount, touchTime] = setting;
-
- let lastTouch = 0;
- let curCount = 0;
+export function touchTapListener(fn, touchsLength) {
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;
+ if (e.touches.length === touchsLength) {
fn();
}
-
- lastTouch = now;
};
- document.addEventListener("touchend", handleTouchend);
+ document.addEventListener("touchstart", handleTouchend);
return () => {
- document.removeEventListener("touchend", handleTouchend);
+ document.removeEventListener("touchstart", handleTouchend);
};
}
diff --git a/src/userscript.js b/src/userscript.js
index 2b2d1bf..9df5ce6 100644
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -11,6 +11,7 @@ import {
showTransbox,
windowListener,
showErr,
+ touchOperation,
} from "./common";
function runSettingPage() {
@@ -69,9 +70,13 @@ function runSettingPage() {
// 浮球按钮
await showFab(translator);
+ // 触屏操作
+ touchOperation(translator);
+
// 同步订阅规则
await trySyncAllSubRules(setting);
} catch (err) {
- showErr(err);
+ console.error("[KISS-Translator]", err);
+ showErr(err.message);
}
})();
diff --git a/src/views/Options/Navigator.js b/src/views/Options/Navigator.js
index c796d8b..0b07f92 100644
--- a/src/views/Options/Navigator.js
+++ b/src/views/Options/Navigator.js
@@ -15,7 +15,6 @@ 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 TouchAppIcon from "@mui/icons-material/TouchApp";
function LinkItem({ label, url, icon }) {
const match = useMatch(url);
@@ -48,12 +47,6 @@ export default function Navigator(props) {
url: "/input",
icon: ,
},
- {
- id: "touch_setting",
- label: i18n("touch_setting"),
- url: "/touch",
- icon: ,
- },
{
id: "selection_translate",
label: i18n("selection_translate"),
diff --git a/src/views/Options/Setting.js b/src/views/Options/Setting.js
index a55e0c6..7b259fc 100644
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -60,6 +60,9 @@ export default function Settings() {
case "newlineLength":
value = limitNumber(value, 1, 1000);
break;
+ case "touchTranslate":
+ value = limitNumber(value, 0, 3);
+ break;
default:
}
updateSetting({
@@ -86,6 +89,7 @@ export default function Settings() {
newlineLength = TRANS_NEWLINE_LENGTH,
mouseKey = OPT_MOUSEKEY_DISABLE,
detectRemote = false,
+ touchTranslate = 2,
} = setting;
const { isHide = false } = fab || {};
@@ -169,6 +173,22 @@ export default function Settings() {
+
+ {i18n("touch_translate_shortcut")}
+
+
+
{i18n("hide_fab_button")}
} />
} />
} />
- } />
} />
} />
} />
diff --git a/src/views/Options/touchSetting.js b/src/views/Options/touchSetting.js
deleted file mode 100644
index 22adbb6..0000000
--- a/src/views/Options/touchSetting.js
+++ /dev/null
@@ -1,103 +0,0 @@
-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 (
-
-
-
-
- {[0, 2, 3].map((val) => (
-
- ))}
-
-
-
-
- {[1, 2, 3].map((val) => (
-
- ))}
-
-
-
-
-
-
-
- );
-}
-
-export default function TouchSetting() {
- return (
-
-
-
-
-
-
-
-
- );
-}