feat: more touch operations
This commit is contained in:
Gabe
@@ -4,14 +4,14 @@ import ThemeProvider from "../../hooks/Theme";
|
||||
import Draggable from "./Draggable";
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { SettingProvider } from "../../hooks/Setting";
|
||||
import { MSG_TRANS_TOGGLE } from "../../config";
|
||||
import { MSG_TRANS_TOGGLE, MSG_POPUP_TOGGLE } from "../../config";
|
||||
import { sendIframeMsg } from "../../libs/iframe";
|
||||
import useWindowSize from "../../hooks/WindowSize";
|
||||
|
||||
export default function ContentFab({
|
||||
translator,
|
||||
fabConfig: { x: fabX, y: fabY, fabClickAction = 0 } = {},
|
||||
popupManager,
|
||||
processActions,
|
||||
}) {
|
||||
const fabWidth = 40;
|
||||
const windowSize = useWindowSize();
|
||||
@@ -31,10 +31,10 @@ export default function ContentFab({
|
||||
translator.toggle();
|
||||
sendIframeMsg(MSG_TRANS_TOGGLE);
|
||||
} else {
|
||||
popupManager.toggle();
|
||||
processActions({ action: MSG_POPUP_TOGGLE });
|
||||
}
|
||||
}
|
||||
}, [moved, translator, popupManager, fabClickAction]);
|
||||
}, [moved, translator, fabClickAction, processActions]);
|
||||
|
||||
const fabProps = useMemo(
|
||||
() => ({
|
||||
|
||||
@@ -1,27 +1,59 @@
|
||||
import ThemeProvider from "../../hooks/Theme";
|
||||
import Draggable from "./Draggable";
|
||||
import { useEffect, useMemo, useCallback } from "react";
|
||||
import { useEffect, useMemo, useCallback, useState } from "react";
|
||||
import { SettingProvider } from "../../hooks/Setting";
|
||||
import Popup from "../Popup";
|
||||
import Header from "../Popup/Header";
|
||||
import Box from "@mui/material/Box";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import useWindowSize from "../../hooks/WindowSize";
|
||||
import { EVENT_KISS, MSG_OPEN_OPTIONS, MSG_POPUP_TOGGLE } from "../../config";
|
||||
import PopupCont from "../Popup/PopupCont";
|
||||
import { isExt } from "../../libs/client";
|
||||
import { sendBgMsg } from "../../libs/msg";
|
||||
|
||||
export default function Action({ translator, onClose }) {
|
||||
export default function Action({ translator, processActions }) {
|
||||
const [showPopup, setShowPopup] = useState(true);
|
||||
const [rule, setRule] = useState(translator.rule);
|
||||
const [setting, setSetting] = useState(translator.setting);
|
||||
const windowSize = useWindowSize();
|
||||
|
||||
const handleWindowClick = useCallback(() => {
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
const handleOpenSetting = useCallback(() => {
|
||||
if (isExt) {
|
||||
sendBgMsg(MSG_OPEN_OPTIONS);
|
||||
} else {
|
||||
window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowClick = () => {
|
||||
setShowPopup(false);
|
||||
};
|
||||
window.addEventListener("click", handleWindowClick);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("click", handleWindowClick);
|
||||
};
|
||||
}, [handleWindowClick]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleStatusUpdate = (event) => {
|
||||
if (event.detail?.action === MSG_POPUP_TOGGLE) {
|
||||
setShowPopup((pre) => !pre);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener(EVENT_KISS, handleStatusUpdate);
|
||||
return () => {
|
||||
document.removeEventListener(EVENT_KISS, handleStatusUpdate);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showPopup) {
|
||||
setRule(translator.rule);
|
||||
setSetting(translator.setting);
|
||||
}
|
||||
}, [showPopup, translator]);
|
||||
|
||||
const popProps = useMemo(() => {
|
||||
const width = Math.min(windowSize.w, 360);
|
||||
@@ -40,19 +72,35 @@ export default function Action({ translator, onClose }) {
|
||||
return (
|
||||
<SettingProvider>
|
||||
<ThemeProvider>
|
||||
<Draggable
|
||||
key="pop"
|
||||
{...popProps}
|
||||
usePaper
|
||||
handler={
|
||||
<Box style={{ cursor: "move" }}>
|
||||
<Header onClose={onClose} />
|
||||
<Divider />
|
||||
{showPopup && (
|
||||
<Draggable
|
||||
key="pop"
|
||||
{...popProps}
|
||||
usePaper
|
||||
handler={
|
||||
<Box style={{ cursor: "move" }}>
|
||||
<Header
|
||||
onClose={() => {
|
||||
setShowPopup(false);
|
||||
}}
|
||||
/>
|
||||
<Divider />
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box width={360}>
|
||||
<PopupCont
|
||||
rule={rule}
|
||||
setting={setting}
|
||||
setRule={setRule}
|
||||
setSetting={setSetting}
|
||||
handleOpenSetting={handleOpenSetting}
|
||||
processActions={processActions}
|
||||
isContent={true}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Popup translator={translator} />
|
||||
</Draggable>
|
||||
</Draggable>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
</SettingProvider>
|
||||
);
|
||||
|
||||
@@ -273,7 +273,7 @@ export default function Settings() {
|
||||
label={i18n("touch_translate_shortcut")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{[0, 2, 3, 4].map((item) => (
|
||||
{[0, 2, 3, 4, 5, 6, 7].map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
{i18n(`touch_tap_${item}`)}
|
||||
</MenuItem>
|
||||
|
||||
422
src/views/Popup/PopupCont.js
Normal file
422
src/views/Popup/PopupCont.js
Normal file
@@ -0,0 +1,422 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Button from "@mui/material/Button";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { sendBgMsg, sendTabMsg, getCurTab } from "../../libs/msg";
|
||||
import { isExt } from "../../libs/client";
|
||||
import { useI18n } from "../../hooks/I18n";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import {
|
||||
MSG_TRANS_TOGGLE,
|
||||
MSG_TRANS_PUTRULE,
|
||||
MSG_SAVE_RULE,
|
||||
MSG_COMMAND_SHORTCUTS,
|
||||
MSG_TRANSBOX_TOGGLE,
|
||||
MSG_MOUSEHOVER_TOGGLE,
|
||||
MSG_TRANSINPUT_TOGGLE,
|
||||
OPT_LANGS_FROM,
|
||||
OPT_LANGS_TO,
|
||||
OPT_STYLE_ALL,
|
||||
} from "../../config";
|
||||
import { saveRule } from "../../libs/rules";
|
||||
import { tryClearCaches } from "../../libs/cache";
|
||||
import { kissLog } from "../../libs/log";
|
||||
import { parseUrlPattern } from "../../libs/utils";
|
||||
|
||||
export default function PopupCont({
|
||||
rule,
|
||||
setting,
|
||||
setRule,
|
||||
setSetting,
|
||||
handleOpenSetting,
|
||||
processActions,
|
||||
isContent = false,
|
||||
}) {
|
||||
const i18n = useI18n();
|
||||
const [commands, setCommands] = useState({});
|
||||
|
||||
const handleTransToggle = async (e) => {
|
||||
try {
|
||||
setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });
|
||||
|
||||
if (!processActions) {
|
||||
await sendTabMsg(MSG_TRANS_TOGGLE);
|
||||
} else {
|
||||
processActions({ action: MSG_TRANS_TOGGLE });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle trans", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTransboxToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
tranboxSetting: { ...pre.tranboxSetting, transOpen: e.target.checked },
|
||||
}));
|
||||
|
||||
if (!processActions) {
|
||||
await sendTabMsg(MSG_TRANSBOX_TOGGLE);
|
||||
} else {
|
||||
processActions({ action: MSG_TRANSBOX_TOGGLE });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle transbox", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMousehoverToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
mouseHoverSetting: {
|
||||
...pre.mouseHoverSetting,
|
||||
useMouseHover: e.target.checked,
|
||||
},
|
||||
}));
|
||||
|
||||
if (!processActions) {
|
||||
await sendTabMsg(MSG_MOUSEHOVER_TOGGLE);
|
||||
} else {
|
||||
processActions({ action: MSG_MOUSEHOVER_TOGGLE });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle mousehover", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputTransToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
inputRule: {
|
||||
...pre.inputRule,
|
||||
transOpen: e.target.checked,
|
||||
},
|
||||
}));
|
||||
|
||||
if (!processActions) {
|
||||
await sendTabMsg(MSG_TRANSINPUT_TOGGLE);
|
||||
} else {
|
||||
processActions({ action: MSG_TRANSINPUT_TOGGLE });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle inputtrans", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = async (e) => {
|
||||
try {
|
||||
const { name, value } = e.target;
|
||||
setRule((pre) => ({ ...pre, [name]: value }));
|
||||
|
||||
if (!processActions) {
|
||||
await sendTabMsg(MSG_TRANS_PUTRULE, { [name]: value });
|
||||
} else {
|
||||
processActions({ action: MSG_TRANS_PUTRULE, args: { [name]: value } });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("update rule", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCache = () => {
|
||||
tryClearCaches();
|
||||
};
|
||||
|
||||
const handleSaveRule = async () => {
|
||||
try {
|
||||
let href = "";
|
||||
if (!isContent) {
|
||||
const tab = await getCurTab();
|
||||
href = tab.url;
|
||||
} else {
|
||||
href = window.location?.href;
|
||||
}
|
||||
|
||||
if (!href || typeof href !== "string") {
|
||||
return;
|
||||
}
|
||||
|
||||
const pattern = parseUrlPattern(href);
|
||||
const curRule = { ...rule, pattern };
|
||||
if (isExt && isContent) {
|
||||
sendBgMsg(MSG_SAVE_RULE, curRule);
|
||||
} else {
|
||||
saveRule(curRule);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("save rule", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const commands = {};
|
||||
if (isExt) {
|
||||
const res = await sendBgMsg(MSG_COMMAND_SHORTCUTS);
|
||||
res.forEach(({ name, shortcut }) => {
|
||||
commands[name] = shortcut;
|
||||
});
|
||||
} else {
|
||||
const shortcuts = setting.shortcuts;
|
||||
if (shortcuts) {
|
||||
Object.entries(shortcuts).forEach(([key, val]) => {
|
||||
commands[key] = val.join("+");
|
||||
});
|
||||
}
|
||||
}
|
||||
setCommands(commands);
|
||||
} catch (err) {
|
||||
kissLog("query cmds", err);
|
||||
}
|
||||
})();
|
||||
}, [setting.shortcuts]);
|
||||
|
||||
const optApis = useMemo(
|
||||
() =>
|
||||
setting.transApis
|
||||
.filter((api) => !api.isDisabled)
|
||||
.map((api) => ({
|
||||
key: api.apiSlug,
|
||||
name: api.apiName || api.apiSlug,
|
||||
})),
|
||||
[setting.transApis]
|
||||
);
|
||||
|
||||
const tranboxEnabled = setting.tranboxSetting.transOpen;
|
||||
const mouseHoverEnabled = setting.mouseHoverSetting.useMouseHover;
|
||||
const inputTransEnabled = setting.inputRule.transOpen;
|
||||
|
||||
const {
|
||||
transOpen,
|
||||
apiSlug,
|
||||
fromLang,
|
||||
toLang,
|
||||
textStyle,
|
||||
autoScan,
|
||||
transOnly,
|
||||
hasRichText,
|
||||
hasShadowroot,
|
||||
} = rule;
|
||||
|
||||
return (
|
||||
<Stack sx={{ p: 2 }} spacing={2}>
|
||||
<Grid container columns={12} spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={transOpen === "true"}
|
||||
onChange={handleTransToggle}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
commands["toggleTranslate"]
|
||||
? `${i18n("translate_alt")}(${commands["toggleTranslate"]})`
|
||||
: i18n("translate_alt")
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="autoScan"
|
||||
value={autoScan === "true" ? "false" : "true"}
|
||||
checked={autoScan === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("autoscan_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="hasShadowroot"
|
||||
value={hasShadowroot === "true" ? "false" : "true"}
|
||||
checked={hasShadowroot === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("shadowroot_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="hasRichText"
|
||||
value={hasRichText === "true" ? "false" : "true"}
|
||||
checked={hasRichText === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("richtext_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="transOnly"
|
||||
value={transOnly === "true" ? "false" : "true"}
|
||||
checked={transOnly === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("transonly_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="tranboxEnabled"
|
||||
value={!tranboxEnabled}
|
||||
checked={tranboxEnabled}
|
||||
onChange={handleTransboxToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("selection_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="mouseHoverEnabled"
|
||||
value={!mouseHoverEnabled}
|
||||
checked={mouseHoverEnabled}
|
||||
onChange={handleMousehoverToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("mousehover_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="inputTransEnabled"
|
||||
value={!inputTransEnabled}
|
||||
checked={inputTransEnabled}
|
||||
onChange={handleInputTransToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("input_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={apiSlug}
|
||||
name="apiSlug"
|
||||
label={i18n("translate_service")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{optApis.map(({ key, name }) => (
|
||||
<MenuItem key={key} value={key}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={fromLang}
|
||||
name="fromLang"
|
||||
label={i18n("from_lang")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_LANGS_FROM.map(([lang, name]) => (
|
||||
<MenuItem key={lang} value={lang}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={toLang}
|
||||
name="toLang"
|
||||
label={i18n("to_lang")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_LANGS_TO.map(([lang, name]) => (
|
||||
<MenuItem key={lang} value={lang}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={textStyle}
|
||||
name="textStyle"
|
||||
label={
|
||||
commands["toggleStyle"]
|
||||
? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
|
||||
: i18n("text_style_alt")
|
||||
}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_STYLE_ALL.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
{i18n(item)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
{/* {OPT_STYLE_USE_COLOR.includes(textStyle) && (
|
||||
<TextField
|
||||
size="small"
|
||||
name="bgColor"
|
||||
value={bgColor}
|
||||
label={i18n("bg_color")}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
spacing={2}
|
||||
>
|
||||
<Button variant="text" onClick={handleSaveRule}>
|
||||
{i18n("save_rule")}
|
||||
</Button>
|
||||
<Button variant="text" onClick={handleClearCache}>
|
||||
{i18n("clear_cache")}
|
||||
</Button>
|
||||
<Button variant="text" onClick={handleOpenSetting}>
|
||||
{i18n("setting")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,181 +1,26 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Button from "@mui/material/Button";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { sendBgMsg, sendTabMsg, getCurTab } from "../../libs/msg";
|
||||
import { sendTabMsg } from "../../libs/msg";
|
||||
import { browser } from "../../libs/browser";
|
||||
import { isExt } from "../../libs/client";
|
||||
import { useI18n } from "../../hooks/I18n";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Header from "./Header";
|
||||
import {
|
||||
MSG_TRANS_TOGGLE,
|
||||
MSG_TRANS_GETRULE,
|
||||
MSG_TRANS_PUTRULE,
|
||||
MSG_OPEN_OPTIONS,
|
||||
MSG_SAVE_RULE,
|
||||
MSG_COMMAND_SHORTCUTS,
|
||||
MSG_TRANSBOX_TOGGLE,
|
||||
MSG_MOUSEHOVER_TOGGLE,
|
||||
MSG_TRANSINPUT_TOGGLE,
|
||||
OPT_LANGS_FROM,
|
||||
OPT_LANGS_TO,
|
||||
OPT_STYLE_ALL,
|
||||
} from "../../config";
|
||||
import { sendIframeMsg } from "../../libs/iframe";
|
||||
import { saveRule } from "../../libs/rules";
|
||||
import { tryClearCaches } from "../../libs/cache";
|
||||
import { MSG_TRANS_GETRULE } from "../../config";
|
||||
import { kissLog } from "../../libs/log";
|
||||
import { parseUrlPattern } from "../../libs/utils";
|
||||
import PopupCont from "./PopupCont";
|
||||
|
||||
// 插件popup没有参数
|
||||
// 网页弹框有
|
||||
export default function Popup({ translator }) {
|
||||
export default function Popup() {
|
||||
const i18n = useI18n();
|
||||
const [rule, setRule] = useState(translator?.rule);
|
||||
const [setting, setSetting] = useState(translator?.setting);
|
||||
const [commands, setCommands] = useState({});
|
||||
const [rule, setRule] = useState(null);
|
||||
const [setting, setSetting] = useState(null);
|
||||
|
||||
const handleOpenSetting = () => {
|
||||
if (!translator) {
|
||||
browser?.runtime.openOptionsPage();
|
||||
} else if (isExt) {
|
||||
sendBgMsg(MSG_OPEN_OPTIONS);
|
||||
} else {
|
||||
window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTransToggle = async (e) => {
|
||||
try {
|
||||
setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });
|
||||
|
||||
if (!translator) {
|
||||
await sendTabMsg(MSG_TRANS_TOGGLE);
|
||||
} else {
|
||||
translator.toggle();
|
||||
sendIframeMsg(MSG_TRANS_TOGGLE);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle trans", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTransboxToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
tranboxSetting: { ...pre.tranboxSetting, transOpen: e.target.checked },
|
||||
}));
|
||||
|
||||
if (!translator) {
|
||||
await sendTabMsg(MSG_TRANSBOX_TOGGLE);
|
||||
} else {
|
||||
translator.toggleTransbox();
|
||||
sendIframeMsg(MSG_TRANSBOX_TOGGLE);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle transbox", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMousehoverToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
mouseHoverSetting: {
|
||||
...pre.mouseHoverSetting,
|
||||
useMouseHover: e.target.checked,
|
||||
},
|
||||
}));
|
||||
|
||||
if (!translator) {
|
||||
await sendTabMsg(MSG_MOUSEHOVER_TOGGLE);
|
||||
} else {
|
||||
translator.toggleMouseHover();
|
||||
sendIframeMsg(MSG_MOUSEHOVER_TOGGLE);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle mousehover", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputTransToggle = async (e) => {
|
||||
try {
|
||||
setSetting((pre) => ({
|
||||
...pre,
|
||||
inputRule: {
|
||||
...pre.inputRule,
|
||||
transOpen: e.target.checked,
|
||||
},
|
||||
}));
|
||||
|
||||
if (!translator) {
|
||||
await sendTabMsg(MSG_TRANSINPUT_TOGGLE);
|
||||
} else {
|
||||
translator.toggleInputTranslate();
|
||||
sendIframeMsg(MSG_TRANSINPUT_TOGGLE);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("toggle inputtrans", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = async (e) => {
|
||||
try {
|
||||
const { name, value } = e.target;
|
||||
setRule((pre) => ({ ...pre, [name]: value }));
|
||||
|
||||
if (!translator) {
|
||||
await sendTabMsg(MSG_TRANS_PUTRULE, { [name]: value });
|
||||
} else {
|
||||
translator.updateRule({ [name]: value });
|
||||
sendIframeMsg(MSG_TRANS_PUTRULE, { [name]: value });
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("update rule", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCache = () => {
|
||||
tryClearCaches();
|
||||
};
|
||||
|
||||
const handleSaveRule = async () => {
|
||||
try {
|
||||
let href = "";
|
||||
if (!translator) {
|
||||
const tab = await getCurTab();
|
||||
href = tab.url;
|
||||
} else {
|
||||
href = window.location?.href;
|
||||
}
|
||||
|
||||
if (!href || typeof href !== "string") {
|
||||
return;
|
||||
}
|
||||
|
||||
const pattern = parseUrlPattern(href);
|
||||
const curRule = { ...rule, pattern };
|
||||
if (isExt && translator) {
|
||||
sendBgMsg(MSG_SAVE_RULE, curRule);
|
||||
} else {
|
||||
saveRule(curRule);
|
||||
}
|
||||
} catch (err) {
|
||||
kissLog("save rule", err);
|
||||
}
|
||||
};
|
||||
const handleOpenSetting = useCallback(() => {
|
||||
browser?.runtime.openOptionsPage();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (translator) {
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
try {
|
||||
const res = await sendTabMsg(MSG_TRANS_GETRULE);
|
||||
@@ -187,297 +32,27 @@ export default function Popup({ translator }) {
|
||||
kissLog("query rule", err);
|
||||
}
|
||||
})();
|
||||
}, [translator]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const commands = {};
|
||||
if (isExt) {
|
||||
const res = await sendBgMsg(MSG_COMMAND_SHORTCUTS);
|
||||
res.forEach(({ name, shortcut }) => {
|
||||
commands[name] = shortcut;
|
||||
});
|
||||
} else {
|
||||
const shortcuts = translator.setting.shortcuts;
|
||||
if (shortcuts) {
|
||||
Object.entries(shortcuts).forEach(([key, val]) => {
|
||||
commands[key] = val.join("+");
|
||||
});
|
||||
}
|
||||
}
|
||||
setCommands(commands);
|
||||
} catch (err) {
|
||||
kissLog("query cmds", err);
|
||||
}
|
||||
})();
|
||||
}, [translator]);
|
||||
|
||||
const optApis = useMemo(
|
||||
() =>
|
||||
setting?.transApis
|
||||
.filter((api) => !api.isDisabled)
|
||||
.map((api) => ({
|
||||
key: api.apiSlug,
|
||||
name: api.apiName || api.apiSlug,
|
||||
})),
|
||||
[setting]
|
||||
);
|
||||
|
||||
const tranboxEnabled = setting?.tranboxSetting.transOpen;
|
||||
const mouseHoverEnabled = setting?.mouseHoverSetting.useMouseHover;
|
||||
const inputTransEnabled = setting?.inputRule.transOpen;
|
||||
|
||||
if (!rule) {
|
||||
return (
|
||||
<Box minWidth={360}>
|
||||
{!translator && (
|
||||
<>
|
||||
<Header />
|
||||
<Divider />
|
||||
</>
|
||||
)}
|
||||
return (
|
||||
<Box width={360}>
|
||||
<Header />
|
||||
<Divider />
|
||||
{rule && setting ? (
|
||||
<PopupCont
|
||||
rule={rule}
|
||||
setting={setting}
|
||||
setRule={setRule}
|
||||
setSetting={setSetting}
|
||||
handleOpenSetting={handleOpenSetting}
|
||||
/>
|
||||
) : (
|
||||
<Stack sx={{ p: 2 }} spacing={3}>
|
||||
<Button variant="text" onClick={handleOpenSetting}>
|
||||
{i18n("setting")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const {
|
||||
transOpen,
|
||||
apiSlug,
|
||||
fromLang,
|
||||
toLang,
|
||||
textStyle,
|
||||
autoScan,
|
||||
transOnly,
|
||||
hasRichText,
|
||||
hasShadowroot,
|
||||
} = rule;
|
||||
|
||||
return (
|
||||
<Box width={360}>
|
||||
{!translator && (
|
||||
<>
|
||||
<Header />
|
||||
<Divider />
|
||||
</>
|
||||
)}
|
||||
<Stack sx={{ p: 2 }} spacing={2}>
|
||||
<Grid container columns={12} spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={transOpen === "true"}
|
||||
onChange={handleTransToggle}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
commands["toggleTranslate"]
|
||||
? `${i18n("translate_alt")}(${commands["toggleTranslate"]})`
|
||||
: i18n("translate_alt")
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="autoScan"
|
||||
value={autoScan === "true" ? "false" : "true"}
|
||||
checked={autoScan === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("autoscan_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="hasShadowroot"
|
||||
value={hasShadowroot === "true" ? "false" : "true"}
|
||||
checked={hasShadowroot === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("shadowroot_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="hasRichText"
|
||||
value={hasRichText === "true" ? "false" : "true"}
|
||||
checked={hasRichText === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("richtext_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="transOnly"
|
||||
value={transOnly === "true" ? "false" : "true"}
|
||||
checked={transOnly === "true"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
}
|
||||
label={i18n("transonly_alt")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="tranboxEnabled"
|
||||
value={!tranboxEnabled}
|
||||
checked={tranboxEnabled}
|
||||
onChange={handleTransboxToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("selection_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="mouseHoverEnabled"
|
||||
value={!mouseHoverEnabled}
|
||||
checked={mouseHoverEnabled}
|
||||
onChange={handleMousehoverToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("mousehover_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
size="small"
|
||||
name="inputTransEnabled"
|
||||
value={!inputTransEnabled}
|
||||
checked={inputTransEnabled}
|
||||
onChange={handleInputTransToggle}
|
||||
/>
|
||||
}
|
||||
label={i18n("input_translate")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={apiSlug}
|
||||
name="apiSlug"
|
||||
label={i18n("translate_service")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{optApis.map(({ key, name }) => (
|
||||
<MenuItem key={key} value={key}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={fromLang}
|
||||
name="fromLang"
|
||||
label={i18n("from_lang")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_LANGS_FROM.map(([lang, name]) => (
|
||||
<MenuItem key={lang} value={lang}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={toLang}
|
||||
name="toLang"
|
||||
label={i18n("to_lang")}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_LANGS_TO.map(([lang, name]) => (
|
||||
<MenuItem key={lang} value={lang}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
SelectProps={{ MenuProps: { disablePortal: true } }}
|
||||
size="small"
|
||||
value={textStyle}
|
||||
name="textStyle"
|
||||
label={
|
||||
commands["toggleStyle"]
|
||||
? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
|
||||
: i18n("text_style_alt")
|
||||
}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{OPT_STYLE_ALL.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
{i18n(item)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
{/* {OPT_STYLE_USE_COLOR.includes(textStyle) && (
|
||||
<TextField
|
||||
size="small"
|
||||
name="bgColor"
|
||||
value={bgColor}
|
||||
label={i18n("bg_color")}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
spacing={2}
|
||||
>
|
||||
<Button variant="text" onClick={handleSaveRule}>
|
||||
{i18n("save_rule")}
|
||||
</Button>
|
||||
<Button variant="text" onClick={handleClearCache}>
|
||||
{i18n("clear_cache")}
|
||||
</Button>
|
||||
<Button variant="text" onClick={handleOpenSetting}>
|
||||
{i18n("setting")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ import { isMobile } from "../../libs/mobile";
|
||||
import TranForm from "./TranForm.js";
|
||||
|
||||
function Header({
|
||||
setShowPopup,
|
||||
setShowBox,
|
||||
simpleStyle,
|
||||
setSimpleStyle,
|
||||
hideClickAway,
|
||||
@@ -98,7 +98,7 @@ function Header({
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setShowPopup(false);
|
||||
setShowBox(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
@@ -111,6 +111,7 @@ function Header({
|
||||
}
|
||||
|
||||
export default function TranBox({
|
||||
showBox,
|
||||
text,
|
||||
setText,
|
||||
setShowBox,
|
||||
@@ -134,43 +135,45 @@ export default function TranBox({
|
||||
return (
|
||||
<SettingProvider>
|
||||
<ThemeProvider styles={extStyles}>
|
||||
<DraggableResizable
|
||||
position={boxPosition}
|
||||
size={boxSize}
|
||||
setSize={setBoxSize}
|
||||
setPosition={setBoxPosition}
|
||||
header={
|
||||
<Header
|
||||
setShowPopup={setShowBox}
|
||||
simpleStyle={simpleStyle}
|
||||
setSimpleStyle={setSimpleStyle}
|
||||
hideClickAway={hideClickAway}
|
||||
setHideClickAway={setHideClickAway}
|
||||
followSelection={followSelection}
|
||||
setFollowSelection={setFollowSelection}
|
||||
mouseHover={mouseHover}
|
||||
/>
|
||||
}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseEnter={() => setMouseHover(true)}
|
||||
onMouseLeave={() => setMouseHover(false)}
|
||||
>
|
||||
<Box sx={{ p: simpleStyle ? 1 : 2 }}>
|
||||
<TranForm
|
||||
text={text}
|
||||
setText={setText}
|
||||
apiSlugs={apiSlugs}
|
||||
fromLang={fromLang}
|
||||
toLang={toLang}
|
||||
toLang2={toLang2}
|
||||
transApis={transApis}
|
||||
simpleStyle={simpleStyle}
|
||||
langDetector={langDetector}
|
||||
enDict={enDict}
|
||||
enSug={enSug}
|
||||
/>
|
||||
</Box>
|
||||
</DraggableResizable>
|
||||
{showBox && (
|
||||
<DraggableResizable
|
||||
position={boxPosition}
|
||||
size={boxSize}
|
||||
setSize={setBoxSize}
|
||||
setPosition={setBoxPosition}
|
||||
header={
|
||||
<Header
|
||||
setShowBox={setShowBox}
|
||||
simpleStyle={simpleStyle}
|
||||
setSimpleStyle={setSimpleStyle}
|
||||
hideClickAway={hideClickAway}
|
||||
setHideClickAway={setHideClickAway}
|
||||
followSelection={followSelection}
|
||||
setFollowSelection={setFollowSelection}
|
||||
mouseHover={mouseHover}
|
||||
/>
|
||||
}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseEnter={() => setMouseHover(true)}
|
||||
onMouseLeave={() => setMouseHover(false)}
|
||||
>
|
||||
<Box sx={{ p: simpleStyle ? 1 : 2 }}>
|
||||
<TranForm
|
||||
text={text}
|
||||
setText={setText}
|
||||
apiSlugs={apiSlugs}
|
||||
fromLang={fromLang}
|
||||
toLang={toLang}
|
||||
toLang2={toLang2}
|
||||
transApis={transApis}
|
||||
simpleStyle={simpleStyle}
|
||||
langDetector={langDetector}
|
||||
enDict={enDict}
|
||||
enSug={enSug}
|
||||
/>
|
||||
</Box>
|
||||
</DraggableResizable>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
</SettingProvider>
|
||||
);
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
OPT_TRANBOX_TRIGGER_CLICK,
|
||||
OPT_TRANBOX_TRIGGER_HOVER,
|
||||
OPT_TRANBOX_TRIGGER_SELECT,
|
||||
EVENT_KISS,
|
||||
} from "../../config";
|
||||
import { isMobile } from "../../libs/mobile";
|
||||
import { kissLog } from "../../libs/log";
|
||||
@@ -167,12 +168,26 @@ export default function Slection({
|
||||
};
|
||||
}, [tranboxShortcut, handleTranbox]);
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
if (showBox) {
|
||||
setShowBox(false);
|
||||
} else {
|
||||
handleTranbox();
|
||||
}
|
||||
}, [showBox, handleTranbox]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox);
|
||||
return () => {
|
||||
window.removeEventListener(MSG_OPEN_TRANBOX, handleTranbox);
|
||||
const handleStatusUpdate = (event) => {
|
||||
if (event.detail?.action === MSG_OPEN_TRANBOX) {
|
||||
handleToggle();
|
||||
}
|
||||
};
|
||||
}, [handleTranbox]);
|
||||
|
||||
document.addEventListener(EVENT_KISS, handleStatusUpdate);
|
||||
return () => {
|
||||
document.removeEventListener(EVENT_KISS, handleStatusUpdate);
|
||||
};
|
||||
}, [handleToggle]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isGm) {
|
||||
@@ -217,8 +232,9 @@ export default function Slection({
|
||||
|
||||
return (
|
||||
<>
|
||||
{showBox && (
|
||||
{
|
||||
<TranBox
|
||||
showBox={showBox}
|
||||
text={text}
|
||||
setText={setText}
|
||||
boxSize={boxSize}
|
||||
@@ -237,7 +253,7 @@ export default function Slection({
|
||||
// extStyles={extStyles}
|
||||
langDetector={langDetector}
|
||||
/>
|
||||
)}
|
||||
}
|
||||
|
||||
{showBtn && (
|
||||
<TranBtn
|
||||
|
||||
Reference in New Issue
Block a user