admin/kiss-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

touch operation

Browse Source
This commit is contained in:
Gabe Yuan
2023-11-11 16:59:38 +08:00
parent 46428b7c7f
commit 4b23ee733f
11 changed files with 58 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/common.js
View File

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

4
src/config/i18n.js
View File

@@ -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`,

10
src/config/index.js
View File

@@ -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];

7
src/content.js
View File

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

19
src/hooks/Touch.js
View File

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

27
src/libs/touch.js
View File

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

7
src/userscript.js
View File

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

7
src/views/Options/Navigator.js
View File

@@ -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: <InputIcon />,
},
{
id: "touch_setting",
label: i18n("touch_setting"),
url: "/touch",
icon: <TouchAppIcon />,
},
{
id: "selection_translate",
label: i18n("selection_translate"),

20
src/views/Options/Setting.js
View File

@@ -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() {
</Select>
</FormControl>
<FormControl size="small">
<InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
<Select
name="touchTranslate"
value={touchTranslate}
label={i18n("touch_translate_shortcut")}
onChange={handleChange}
>
{[0, 2, 3].map((item) => (
<MenuItem key={item} value={item}>
{i18n(`touch_tap_${item}`)}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl size="small">
<InputLabel>{i18n("hide_fab_button")}</InputLabel>
<Select

2
src/views/Options/index.js
View File

@@ -22,7 +22,6 @@ 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("");
@@ -123,7 +122,6 @@ 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 />} />

103
src/views/Options/touchSetting.js
View File

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