add: "auto translate after input in input box" option

chunibyocola · May 12, 2021 · 3262b74 · 3262b74
1 parent c851beb
commit 3262b74
Show file tree

Hide file tree

Showing 15 changed files with 107 additions and 18 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -215,6 +215,12 @@
     "optionsChangeLog": {
         "message": "Change log"
     },
+    "optionsAutoTranslateAfterInput": {
+        "message": "Auto translate after input in input box"
+    },
+    "optionsAutoTranslateAfterInputDescription": {
+        "message": "Extension will send a translate request automatically with the text you input in input box in 0.6s. If you disable it, you will need to use \"Ctrl + Enter\" keyboard shortcut to trigger the translate request."
+    },
     "themePreset": {
         "message": "Preset"
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -215,6 +215,12 @@
     "optionsChangeLog": {
         "message": "更新ログ"
     },
+    "optionsAutoTranslateAfterInput": {
+        "message": "入力ボックスに入力した後に自動翻訳する"
+    },
+    "optionsAutoTranslateAfterInputDescription": {
+        "message": "あなたが入力ボックスに入力した0.6秒後に拡張機能が自動的に翻訳リクエストを送ります。無効にする場合は「Ctrl + Enter」キーボードショートカットを使って翻訳リクエストを送ります。"
+    },
     "themePreset": {
         "message": "プリセット"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -215,6 +215,12 @@
     "optionsChangeLog": {
         "message": "更新日志"
     },
+    "optionsAutoTranslateAfterInput": {
+        "message": "在输入框输入后自动翻译"
+    },
+    "optionsAutoTranslateAfterInputDescription": {
+        "message": "当你在输入框输入后，经过0.6秒，扩展会自动发送翻译请求。当不启用时，需要使用“Ctrl + Enter”快捷键来发送翻译请求。"
+    },
     "themePreset": {
         "message": "预设"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -215,6 +215,12 @@
     "optionsChangeLog": {
         "message": "更新日誌"
     },
+    "optionsAutoTranslateAfterInput": {
+        "message": "在輸入框輸入後自動翻譯"
+    },
+    "optionsAutoTranslateAfterInputDescription": {
+        "message": "當你在輸入框輸入后，經過0.6秒，擴充功能會自動發送翻譯請求。當不啟用時，需要使用「Ctrl + Enter」快速鍵來發送翻譯請求。鍵盤快速鍵"
+    },
     "themePreset": {
         "message": "預設"
     },

diff --git a/src/components/RawText/index.js b/src/components/RawText/index.js
@@ -1,9 +1,9 @@
-import React, { useRef, useCallback, useState, useEffect } from 'react';
+import React, { useRef, useCallback, useState, useEffect, useLayoutEffect } from 'react';
 import { getMessage } from '../../public/i18n';
 import useDebounce from '../../public/react-use/useDebounce';
 import './style.css';
 
-const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
+const RawText = ({ defaultValue, rawTextTranslate, focusDependency, autoTranslateAfterInput }) => {
     const [debounceDependency, setDebounceDependency] = useState(0);
 
     const lastTextRef = useRef('');
@@ -32,12 +32,12 @@ const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
 
     const onCompositionEnd = useCallback(() => {
         compositionStatus.current = false;
-        rawTextChanged();
-    }, [rawTextChanged]);
+        autoTranslateAfterInput && rawTextChanged();
+    }, [rawTextChanged, autoTranslateAfterInput]);
 
     const onChange = useCallback(() => {
-        !compositionStatus.current && rawTextChanged();
-    }, [rawTextChanged]);
+        autoTranslateAfterInput && !compositionStatus.current && rawTextChanged();
+    }, [rawTextChanged, autoTranslateAfterInput]);
 
     useEffect(() => {
         if (defaultValue) {
@@ -51,6 +51,21 @@ const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
         textareaEl.current.select();
     }, [focusDependency]);
 
+    useLayoutEffect(() => {
+        const tempRef = textareaEl.current;
+
+        const onRawTextKeyDown = (e) => {
+            if (e.ctrlKey && e.keyCode === 13) {
+                e.preventDefault();
+                handleRawTextChanged();
+            }
+        };
+
+        !autoTranslateAfterInput && tempRef.addEventListener('keydown', onRawTextKeyDown);
+
+        return () => !autoTranslateAfterInput && tempRef.removeEventListener('keydown', onRawTextKeyDown);
+    }, [handleRawTextChanged, autoTranslateAfterInput]);
+
     return (
         <div className='ts-raw-text'>
             <textarea

diff --git a/src/constants/defaultOptions.js b/src/constants/defaultOptions.js
@@ -46,7 +46,8 @@ const defaultOptions = {
     rememberHistoryPanelStatus: false,
     historyPanelStatus: { pin: false, width: 200 },
     translateDirectlyWhilePinning: false,
-    doNotRespondInTextBox: false
+    doNotRespondInTextBox: false,
+    autoTranslateAfterInput: true
 };
 
 export default defaultOptions;
diff --git a/src/entry/content/MultipleTranslateResult/index.js b/src/entry/content/MultipleTranslateResult/index.js
@@ -12,7 +12,7 @@ import { getMessage } from '../../../public/i18n';
 import { addHistory, updateHistoryError, updateHistoryFinish } from '../../../redux/actions/translateHistoryActions';
 import { useIsEnable } from '../../../public/react-use';
 
-const MultipleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
+const MultipleTranslateResult = ({ showRtAndLs, maxHeightGap, autoTranslateAfterInput }) => {
     const [resultMaxHeight, setResultMaxHeight] = useState(500);
 
     const translateIdRef = useRef(0);
@@ -89,6 +89,7 @@ const MultipleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
                     defaultValue={text}
                     rawTextTranslate={handleRawTextChange}
                     focusDependency={focusRawText}
+                    autoTranslateAfterInput={autoTranslateAfterInput}
                 />
                 <LanguageSelection
                     onChange={handleSelectionChange}

diff --git a/src/entry/content/ResultBox/index.js b/src/entry/content/ResultBox/index.js
@@ -10,7 +10,14 @@ import SingleTranslateResult from '../SingleTranslateResult';
 import './style.css';
 
 const initPos = { x: 5, y: 5 };
-const useOptionsDependency = ['pinThePanelWhileOpeningIt', 'rememberPositionOfPinnedPanel', 'positionOfPinnedPanel', 'translatePanelMaxHeight', 'translatePanelWidth'];
+const useOptionsDependency = [
+    'pinThePanelWhileOpeningIt',
+    'rememberPositionOfPinnedPanel',
+    'positionOfPinnedPanel',
+    'translatePanelMaxHeight',
+    'translatePanelWidth',
+    'autoTranslateAfterInput'
+];
 
 const ResultBox = ({ multipleTranslateMode }) => {
     const [pinPos, setPinPos] = useState(initPos);
@@ -26,7 +33,14 @@ const ResultBox = ({ multipleTranslateMode }) => {
 
     const dispatch = useDispatch();
 
-    const { pinThePanelWhileOpeningIt, rememberPositionOfPinnedPanel, positionOfPinnedPanel, translatePanelMaxHeight, translatePanelWidth } = useOptions(useOptionsDependency);
+    const {
+        pinThePanelWhileOpeningIt,
+        rememberPositionOfPinnedPanel,
+        positionOfPinnedPanel,
+        translatePanelMaxHeight,
+        translatePanelWidth,
+        autoTranslateAfterInput
+    } = useOptions(useOptionsDependency);
 
     const windowSize = useWindowSize();
 
@@ -134,9 +148,11 @@ const ResultBox = ({ multipleTranslateMode }) => {
                 {multipleTranslateMode ? <MultipleTranslateResult
                     showRtAndLs={showRtAndLs}
                     maxHeightGap={maxHeightGap}
+                    autoTranslateAfterInput={autoTranslateAfterInput}
                 /> : <SingleTranslateResult
                     showRtAndLs={showRtAndLs}
                     maxHeightGap={maxHeightGap}
+                    autoTranslateAfterInput={autoTranslateAfterInput}
                 />}
             </div>
         </div>

diff --git a/src/entry/content/SingleTranslateResult/index.js b/src/entry/content/SingleTranslateResult/index.js
@@ -19,7 +19,7 @@ import { addHistory, updateHistoryError, updateHistoryFinish } from '../../../re
 import { useIsEnable } from '../../../public/react-use';
 import './style.css';
 
-const SingleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
+const SingleTranslateResult = ({ showRtAndLs, maxHeightGap, autoTranslateAfterInput }) => {
     const [resultMaxHeight, setResultMaxHeight] = useState(500);
 
     const { text, source, from, to, status, result, translateId } = useSelector(state => state.singleTranslateState);
@@ -97,6 +97,7 @@ const SingleTranslateResult = ({ showRtAndLs, maxHeightGap }) => {
                     defaultValue={text}
                     rawTextTranslate={handleRawTextChange}
                     focusDependency={focusRawText}
+                    autoTranslateAfterInput={autoTranslateAfterInput}
                 />
                 <LanguageSelection
                     onChange={handleSelectionChange}

diff --git a/src/entry/options/Options/index.js b/src/entry/options/Options/index.js
@@ -58,7 +58,8 @@ const Options = () => {
         translatePanelFontSize,
         rememberHistoryPanelStatus,
         translateDirectlyWhilePinning,
-        doNotRespondInTextBox
+        doNotRespondInTextBox,
+        autoTranslateAfterInput
     } = useOptions(useOptionsDependency);
 
     const updateStorage = useCallback((key, value) => (setLocalStorage({[key]: value})), []);
@@ -100,6 +101,7 @@ const Options = () => {
                 translatePanelMaxHeight={translatePanelMaxHeight}
                 translatePanelWidth={translatePanelWidth}
                 translatePanelFontSize={translatePanelFontSize}
+                autoTranslateAfterInput={autoTranslateAfterInput}
             />
             <div className='sub-title' id='default-translate-options'>{getMessage('optionsDefaultTranslateOptions')}</div>
             <DefaultTranslateOptions

diff --git a/src/entry/options/Options/sections/TranslatePanel.js b/src/entry/options/Options/sections/TranslatePanel.js
@@ -35,7 +35,15 @@ const marksFontSize = [
 ];
 const pxLabelFormat = v => `${v}px`
 
-const TranslatePanel = ({ updateStorage, pinThePanelWhileOpeningIt, rememberPositionOfPinnedPanel, translatePanelMaxHeight, translatePanelWidth, translatePanelFontSize }) => {
+const TranslatePanel = ({
+    updateStorage,
+    pinThePanelWhileOpeningIt,
+    rememberPositionOfPinnedPanel,
+    translatePanelMaxHeight,
+    translatePanelWidth,
+    translatePanelFontSize,
+    autoTranslateAfterInput
+}) => {
     const { percentage: hPercentage, px: hPx, percent: hPercent } = translatePanelMaxHeight;
     const { percentage: wPercentage, px: wPx, percent: wPercent } = translatePanelWidth;
 
@@ -132,6 +140,15 @@ const TranslatePanel = ({ updateStorage, pinThePanelWhileOpeningIt, rememberPosi
                 />
                 <div className='item-description'>{getMessage('optionsRememberPositionOfPinnedPanelDescription')}</div>
             </div>
+            <div className='opt-section-row'>
+                <OptionToggle
+                    id='auto-translate-after-input'
+                    message='optionsAutoTranslateAfterInput'
+                    checked={autoTranslateAfterInput}
+                    onClick={() => updateStorage('autoTranslateAfterInput', !autoTranslateAfterInput)}
+                />
+                <div className='item-description'>{getMessage('optionsAutoTranslateAfterInputDescription')}</div>
+            </div>
         </div>
     );
 };

diff --git a/src/entry/popup/MultipleTranslateResult/index.js b/src/entry/popup/MultipleTranslateResult/index.js
@@ -10,7 +10,7 @@ import MtResult from '../../../components/MtResult';
 import { mtLangCode } from '../../../constants/langCode';
 import { getMessage } from '../../../public/i18n';
 
-const MultipleTranslateResult = () => {
+const MultipleTranslateResult = ({ autoTranslateAfterInput }) => {
     const { focusRawText } = useSelector(state => state.resultBoxState);
 
     const { text, from, to, translations, translateId } = useSelector(state => state.multipleTranslateState);
@@ -67,6 +67,7 @@ const MultipleTranslateResult = () => {
                 defaultValue={text}
                 rawTextTranslate={handleRawTextTranslate}
                 focusDependency={focusRawText}
+                autoTranslateAfterInput={autoTranslateAfterInput}
             />
             <LanguageSelection
                 onChange={handleSelectionChange}

diff --git a/src/entry/popup/ResultBox/index.js b/src/entry/popup/ResultBox/index.js
@@ -3,13 +3,22 @@ import './style.css';
 import PopupHeader from '../../../components/PopupHeader';
 import MultipleTranslateResult from '../MultipleTranslateResult';
 import SingleTranslateResult from '../SingleTranslateResult';
+import { useOptions } from '../../../public/react-use';
+
+const useOptionsDependency = ['autoTranslateAfterInput'];
 
 const ResultBox = ({ multipleTranslateMode }) => {
+    const { autoTranslateAfterInput } = useOptions(useOptionsDependency);
+
     return (
         <div id="sc-translator-root" className='container'>
             <PopupHeader />
             <div className="content">
-                {multipleTranslateMode ? <MultipleTranslateResult /> : <SingleTranslateResult />}
+                {multipleTranslateMode ? <MultipleTranslateResult
+                    autoTranslateAfterInput={autoTranslateAfterInput}
+                /> : <SingleTranslateResult
+                    autoTranslateAfterInput={autoTranslateAfterInput}
+                />}
             </div>
         </div>
     )

diff --git a/src/entry/popup/SingleTranslateResult/index.js b/src/entry/popup/SingleTranslateResult/index.js
@@ -9,7 +9,7 @@ import { stRequestFinish, stRequestStart, stRequestError, stSetFromAndTo, stSetT
 import TsVia from '../../../components/TsVia';
 import { switchTranslateSource } from '../../../public/switch-translate-source';
 
-const SingleTranslateResult = () => {
+const SingleTranslateResult = ({ autoTranslateAfterInput }) => {
     const { focusRawText } = useSelector(state => state.resultBoxState);
 
     const { status, result, source, from, to, text, translateId } = useSelector(state => state.singleTranslateState);
@@ -66,6 +66,7 @@ const SingleTranslateResult = () => {
                 defaultValue={text}
                 rawTextTranslate={handleRawTextTranslate}
                 focusDependency={focusRawText}
+                autoTranslateAfterInput={autoTranslateAfterInput}
             />
             <LanguageSelection
                 onChange={handleSelectionChange}

diff --git a/src/entry/separate/Separate/index.js b/src/entry/separate/Separate/index.js
@@ -14,7 +14,7 @@ import '../../../components/PopupHeader/style.css';
 import { useOptions } from '../../../public/react-use';
 import { getMessage } from '../../../public/i18n';
 
-const useOptionsDependency = ['styleVarsList', 'styleVarsIndex', 'rememberStwSizeAndPosition'];
+const useOptionsDependency = ['styleVarsList', 'styleVarsIndex', 'rememberStwSizeAndPosition', 'autoTranslateAfterInput'];
 
 const Separate = () => {
     const { text, from, to, translations, translateId } = useSelector(state => state.multipleTranslateState);
@@ -66,7 +66,7 @@ const Separate = () => {
         oldTranslateIdRef.current = translateId;
     }, [translateId, text, handleTranslate, translations, dispatch]);
 
-    const { styleVarsList, styleVarsIndex, rememberStwSizeAndPosition } = useOptions(useOptionsDependency);
+    const { styleVarsList, styleVarsIndex, rememberStwSizeAndPosition, autoTranslateAfterInput } = useOptions(useOptionsDependency);
 
     const handleThemeToggle = useCallback(() => {
         setLocalStorage({'styleVarsIndex': styleVarsIndex >= styleVarsList.length - 1 ? 0 : styleVarsIndex + 1});
@@ -120,6 +120,7 @@ const Separate = () => {
                     defaultValue={text}
                     rawTextTranslate={handleRawTextTranslate}
                     focusDependency={focusRawText}
+                    autoTranslateAfterInput={autoTranslateAfterInput}
                 />
                 <LanguageSelection
                     onChange={handleSelectionChange}