add: "do not respond in text box" option

chunibyocola · Apr 25, 2021 · 8f48391 · 8f48391
1 parent 84acec1
commit 8f48391
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 6 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -203,6 +203,12 @@
     "optionsTranslateDirectlyWhilePinning": {
         "message": "Translate directly while translate panel pinning"
     },
+    "optionsDoNotRespondInTextBox": {
+        "message": "Do not respond in text box"
+    },
+    "optionsDoNotRespondInTextBoxDescription": {
+        "message": "Extension will not show button and will not auto translate if you select some text in text box."
+    },
     "themePreset": {
         "message": "Preset"
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -203,6 +203,12 @@
     "optionsTranslateDirectlyWhilePinning": {
         "message": "翻訳パネルの固定中に直接翻訳する"
     },
+    "optionsDoNotRespondInTextBox": {
+        "message": "テキストボックスに応答しない"
+    },
+    "optionsDoNotRespondInTextBoxDescription": {
+        "message": "テキストボックスでテキストを選択するでも、拡張機能は「ボタンを表示」や「自動翻訳」をしません。"
+    },
     "themePreset": {
         "message": "プリセット"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -203,6 +203,12 @@
     "optionsTranslateDirectlyWhilePinning": {
         "message": "翻译面板固定时直接翻译"
     },
+    "optionsDoNotRespondInTextBox": {
+        "message": "不在文本框中响应"
+    },
+    "optionsDoNotRespondInTextBoxDescription": {
+        "message": "在文本框内选择文本时，扩展不会展示按钮和自动翻译。"
+    },
     "themePreset": {
         "message": "预设"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -203,6 +203,12 @@
     "optionsTranslateDirectlyWhilePinning": {
         "message": "翻譯面板固定時直接翻譯"
     },
+    "optionsDoNotRespondInTextBox": {
+        "message": "不在文本框中響應"
+    },
+    "optionsDoNotRespondInTextBoxDescription": {
+        "message": "在文本框內選擇文本時，擴充功能不會展示按鈕和自動翻譯。"
+    },
     "themePreset": {
         "message": "預設"
     },

diff --git a/src/components/TsBtn/index.js b/src/components/TsBtn/index.js
@@ -21,7 +21,7 @@ import './style.css';
 import { sendAudio, sendSeparate } from '../../public/send';
 import { stSetText } from '../../redux/actions/singleTranslateActions';
 import { getOptions } from '../../public/options';
-import { debounce } from '../../public/utils';
+import { debounce, isTextBox } from '../../public/utils';
 
 const initText = '';
 const initPos = { x: 5, y: 5 };
@@ -34,7 +34,8 @@ const useOptionsDependency = [
     'hideButtonAfterFixedTime',
     'hideButtonFixedTime',
     'respondToSeparateWindow',
-    'translateDirectlyWhilePinning'
+    'translateDirectlyWhilePinning',
+    'doNotRespondInTextBox'
 ];
 
 const calculateBtnPos = ({ x, y }) => {
@@ -74,7 +75,8 @@ const TsBtn = ({ multipleTranslateMode }) => {
         hideButtonAfterFixedTime,
         hideButtonFixedTime,
         respondToSeparateWindow,
-        translateDirectlyWhilePinning
+        translateDirectlyWhilePinning,
+        doNotRespondInTextBox
     } = useOptions(useOptionsDependency);
 
     const isEnableTranslate = useIsEnable('translate', window.location.host);
@@ -147,6 +149,8 @@ const TsBtn = ({ multipleTranslateMode }) => {
     useGetSelection(({ text, pos }) => {
         if (!isEnableTranslate) { return; }
 
+        if (doNotRespondInTextBox && isTextBox(document.activeElement)) { return; }
+
         const nextPos = calculateBtnPos(pos);
 
         if ((translateWithKeyPress && ctrlPressing.current) || translateDirectly || (pinning && translateDirectlyWhilePinning)) {

diff --git a/src/constants/defaultOptions.js b/src/constants/defaultOptions.js
@@ -45,7 +45,8 @@ const defaultOptions = {
     recentTranslateToList: [],
     rememberHistoryPanelStatus: false,
     historyPanelStatus: { pin: false, width: 200 },
-    translateDirectlyWhilePinning: false
+    translateDirectlyWhilePinning: false,
+    doNotRespondInTextBox: false
 };
 
 export default defaultOptions;
diff --git a/src/entry/options/Options/index.js b/src/entry/options/Options/index.js
@@ -57,7 +57,8 @@ const Options = () => {
         translatePanelWidth,
         translatePanelFontSize,
         rememberHistoryPanelStatus,
-        translateDirectlyWhilePinning
+        translateDirectlyWhilePinning,
+        doNotRespondInTextBox
     } = useOptions(useOptionsDependency);
 
     const updateStorage = useCallback((key, value) => (setLocalStorage({[key]: value})), []);
@@ -129,6 +130,7 @@ const Options = () => {
                 translateHostList={translateHostList}
                 respondToSeparateWindow={respondToSeparateWindow}
                 translateDirectlyWhilePinning={translateDirectlyWhilePinning}
+                doNotRespondInTextBox={doNotRespondInTextBox}
             />
             <div className='sub-title' id='history'>{getMessage('optionsHistory')}</div>
             <History

diff --git a/src/entry/options/Options/sections/Translate.js b/src/entry/options/Options/sections/Translate.js
@@ -26,7 +26,8 @@ const Translate = ({
     translateBlackListMode,
     translateHostList,
     respondToSeparateWindow,
-    translateDirectlyWhilePinning
+    translateDirectlyWhilePinning,
+    doNotRespondInTextBox
 }) => {
     return (
         <div className='opt-section'>
@@ -105,6 +106,15 @@ const Translate = ({
                     onClick={() => updateStorage('translateDirectlyWhilePinning', !translateDirectlyWhilePinning)}
                 />
             </div>
+            <div className='opt-section-row'>
+                <OptionToggle
+                    id='do-not-respond-in-text-box'
+                    message='optionsDoNotRespondInTextBox'
+                    checked={doNotRespondInTextBox}
+                    onClick={() => updateStorage('doNotRespondInTextBox', !doNotRespondInTextBox)}
+                />
+                <div className='item-description'>{getMessage('optionsDoNotRespondInTextBoxDescription')}</div>
+            </div>
             <div className='opt-section-row'>
                 <div className='options-mode'>
                     {getMessage('optionsDomainfilter')}

diff --git a/src/public/utils/index.js b/src/public/utils/index.js
@@ -101,4 +101,8 @@ export const mouseDrag = (mouseMoveCallback, mouseUpCallback) => {
     document.onselectstart = () => { return false; };
     document.addEventListener('mousemove', mouseMoveListener, true);
     document.addEventListener('mouseup', mouseUpListener, true);
+};
+
+export const isTextBox = (element) => {
+    return (element.tagName === 'INPUT' && element.type === 'text') || element.tagName === 'TEXTAREA' || element.isContentEditable;
 };