From ca84bdb2279d44f0b4e182db54c7dff24c458002 Mon Sep 17 00:00:00 2001 From: Gabe Yuan Date: Tue, 16 Apr 2024 12:47:55 +0800 Subject: [PATCH] feat: tranbox hover trigger --- src/config/i18n.js | 16 +++++++ src/config/index.js | 13 +++++- src/views/Options/Rules.js | 2 +- src/views/Options/Tranbox.js | 24 ++++++++++- src/views/Selection/TranBtn.js | 17 +++----- src/views/Selection/index.js | 78 ++++++++++++++++++++++------------ 6 files changed, 110 insertions(+), 40 deletions(-) diff --git a/src/config/i18n.js b/src/config/i18n.js index 1e0a91f..8503831 100644 --- a/src/config/i18n.js +++ b/src/config/i18n.js @@ -827,4 +827,20 @@ export const I18N = { zh: `获取小牛翻译密钥`, en: `Get NiuTrans APIKey`, }, + trigger_mode: { + zh: `触发方式`, + en: `Trigger Mode`, + }, + trigger_click: { + zh: `点击触发`, + en: `Click Trigger`, + }, + trigger_hover: { + zh: `鼠标悬停触发`, + en: `Hover Trigger`, + }, + trigger_select: { + zh: `选中触发`, + en: `Select Trigger`, + }, }; diff --git a/src/config/index.js b/src/config/index.js index 8d67290..39bf6a2 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -407,6 +407,14 @@ export const DEFAULT_INPUT_RULE = { }; // 划词翻译 +export const OPT_TRANBOX_TRIGGER_CLICK = "click"; +export const OPT_TRANBOX_TRIGGER_HOVER = "hover"; +export const OPT_TRANBOX_TRIGGER_SELECT = "select"; +export const OPT_TRANBOX_TRIGGER_ALL = [ + OPT_TRANBOX_TRIGGER_CLICK, + OPT_TRANBOX_TRIGGER_HOVER, + OPT_TRANBOX_TRIGGER_SELECT, +]; export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyS"]; export const DEFAULT_TRANBOX_SETTING = { transOpen: true, @@ -418,8 +426,9 @@ export const DEFAULT_TRANBOX_SETTING = { btnOffsetX: 10, btnOffsetY: 10, hideTranBtn: false, // 是否隐藏翻译按钮 - hideClickAway: false, // 默认是否点击外部关闭弹窗 - simpleStyle: false, // 默认是否简洁界面 + hideClickAway: false, // 是否点击外部关闭弹窗 + simpleStyle: false, // 是否简洁界面 + triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式 }; // 订阅列表 diff --git a/src/views/Options/Rules.js b/src/views/Options/Rules.js index 742da3e..f436dc1 100644 --- a/src/views/Options/Rules.js +++ b/src/views/Options/Rules.js @@ -366,7 +366,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) { fullWidth name="transTiming" value={transTiming} - label={i18n("translate_timing")} + label={i18n("trigger_mode")} disabled={disabled} onChange={handleChange} > diff --git a/src/views/Options/Tranbox.js b/src/views/Options/Tranbox.js index 6c1a902..b3822d7 100644 --- a/src/views/Options/Tranbox.js +++ b/src/views/Options/Tranbox.js @@ -3,7 +3,13 @@ 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_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config"; +import { + OPT_TRANS_ALL, + OPT_LANGS_FROM, + OPT_LANGS_TO, + OPT_TRANBOX_TRIGGER_CLICK, + OPT_TRANBOX_TRIGGER_ALL, +} from "../../config"; import ShortcutInput from "./ShortcutInput"; import FormControlLabel from "@mui/material/FormControlLabel"; import Switch from "@mui/material/Switch"; @@ -52,6 +58,7 @@ export default function Tranbox() { hideTranBtn = false, hideClickAway = false, simpleStyle = false, + triggerMode = OPT_TRANBOX_TRIGGER_CLICK, } = tranboxSetting; return ( @@ -186,6 +193,21 @@ export default function Tranbox() { {i18n("enable")} + + {OPT_TRANBOX_TRIGGER_ALL.map((item) => ( + + {i18n(`trigger_${item}`)} + + ))} + + {!isExt && ( { + setShowBtn(false); + setText(text || selectedText); + setShowBox(true); + }, + [selectedText] ); - const handleClick = (e) => { - e.stopPropagation(); - - setShowBtn(false); - setText(selectedText); - setShowBox(true); - }; - const handleTranbox = useCallback(() => { setShowBtn(false); @@ -62,10 +75,19 @@ export default function Slection({ setShowBox(true); }, []); + const btnEvent = useMemo(() => { + if (isMobile) { + return "onTouchEnd"; + } else if (triggerMode === OPT_TRANBOX_TRIGGER_HOVER) { + return "onMouseOver"; + } + return "onMouseUp"; + }, [triggerMode]); + useEffect(() => { async function handleMouseup(e) { e.stopPropagation(); - await sleep(100); + await sleep(200); const selectedText = window.getSelection()?.toString()?.trim() || ""; setSelText(selectedText); @@ -74,8 +96,13 @@ export default function Slection({ return; } + if (triggerMode === OPT_TRANBOX_TRIGGER_SELECT) { + handleTrigger(selectedText); + return; + } + const { clientX, clientY } = isMobile ? e.changedTouches[0] : e; - !tranboxSetting.hideTranBtn && setShowBtn(true); + setShowBtn(!hideTranBtn); // setPosition({ x: e.clientX, y: e.clientY }); setPosition({ x: clientX, y: clientY }); } @@ -89,22 +116,17 @@ export default function Slection({ handleMouseup ); }; - }, [tranboxSetting.hideTranBtn]); + }, [hideTranBtn, triggerMode, handleTrigger]); useEffect(() => { if (isExt) { return; } - - const clearShortcut = shortcutRegister( - tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT, - handleTranbox - ); - + const clearShortcut = shortcutRegister(tranboxShortcut, handleTranbox); return () => { clearShortcut(); }; - }, [tranboxSetting.tranboxShortcut, handleTranbox]); + }, [tranboxShortcut, handleTranbox]); useEffect(() => { window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox); @@ -178,7 +200,11 @@ export default function Slection({ { + e.stopPropagation(); + handleTrigger(); + }} /> )}