add 'call out extension in web page' command

chunibyocola · Sep 14, 2020 · b27c032 · b27c032
1 parent 99f75a2
commit b27c032
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 12 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -11,6 +11,9 @@
     "extListenCommandDescription": {
         "message": "Listen the text you select"
     },
+    "extCallOutCommandDescription": {
+        "message": "Call out extension in web page"
+    },
     "optionsTitle": {
         "message": "Options"
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -11,6 +11,9 @@
     "extListenCommandDescription": {
         "message": "選択したテキストを聞く"
     },
+    "extCallOutCommandDescription": {
+        "message": "ウェブページで拡張機能を呼び出す"
+    },
     "optionsTitle": {
         "message": "オプション"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -11,6 +11,9 @@
     "extListenCommandDescription": {
         "message": "朗读您选择的文本"
     },
+    "extCallOutCommandDescription": {
+        "message": "在网页中唤出扩展"
+    },
     "optionsTitle": {
         "message": "常规选项"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -11,6 +11,9 @@
     "extListenCommandDescription": {
         "message": "讀讀您選擇的文字"
     },
+    "extCallOutCommandDescription": {
+        "message": "在網頁中喚出擴充功能"
+    },
     "optionsTitle": {
         "message": "常規選項"
     },

diff --git a/public/manifest.json b/public/manifest.json
@@ -31,6 +31,12 @@
         "default": "Alt+X"
       },
       "description": "__MSG_extListenCommandDescription__"
+    },
+    "sc-call-out": {
+      "suggested_key": {
+        "default": "Alt+C"
+      },
+      "description": "__MSG_extCallOutCommandDescription__"
     }
   },
   "permissions": [

diff --git a/src/components/MultipleTranslate/index.js b/src/components/MultipleTranslate/index.js
@@ -23,11 +23,16 @@ const MultipleTranslate = () => {
     const pinPosRef = useRef(initPos);
     const mtEle = useRef(null);
 
-    const { show, pos } = useSelector(state => state.resultBoxState);
+    const { show, pos, focusRawText } = useSelector(state => state.resultBoxState);
     const { text, from, to, translations } = useSelector(state => state.multipleTranslateState);
 
     const dispatch = useDispatch();
 
+    // show 'RawText' and 'LanguageSelection' when "call out"'s keyboard shortcut pressed
+    useEffect(() => {
+        focusRawText && setShowRtAndLs(true);
+    }, [focusRawText]);
+
     // position start
     const changePinPos = useCallback((pos) => {
         setPinPos(pos);
@@ -100,7 +105,11 @@ const MultipleTranslate = () => {
                 </span>
             </div>
             <div style={{display: showRtAndLs ? 'block' : 'none', width: '246px', margin: '0px auto'}}>
-                <RawText defaultValue={text} rawTextTranslate={handleRawTextChange} />
+                <RawText
+                    defaultValue={text}
+                    rawTextTranslate={handleRawTextChange}
+                    focusDependency={focusRawText}
+                />
                 <LanguageSelection
                     selectionChange={handleSelectionChange}
                     from={from}

diff --git a/src/components/RawText/index.js b/src/components/RawText/index.js
@@ -10,7 +10,7 @@ const debounce = (cb, time) => {
     };
 };
 
-const RawText = ({ defaultValue, rawTextTranslate }) => {
+const RawText = ({ defaultValue, rawTextTranslate, focusDependency }) => {
     const [lastText, setLastText] = useState('');
 
     const textareaEl = useRef(null);
@@ -53,6 +53,10 @@ const RawText = ({ defaultValue, rawTextTranslate }) => {
         textareaEl.current.focus();
     }, []);
 
+    useEffect(() => {
+        focusDependency && setTimeout(() => textareaEl.current.focus(), 0);
+    }, [focusDependency]);
+
     return (
         <div className='ts-raw-text'>
             <textarea

diff --git a/src/components/ResultBox/index.js b/src/components/ResultBox/index.js
@@ -26,7 +26,7 @@ const ResultBox = () => {
     const { text, source, from, to, status, result, history, resultFromHistory } = useSelector(state => state.singleTranslateState);
     const { requesting, requestEnd } = status;
 
-    const { show, pos } = useSelector(state => state.resultBoxState);
+    const { show, pos, focusRawText } = useSelector(state => state.resultBoxState);
 
     const [pinning, setPinning] = useState(false);
     const [pinPos, setPinPos] = useState(initPos);
@@ -37,6 +37,11 @@ const ResultBox = () => {
 
     const dispatch = useDispatch();
 
+    // show 'RawText' and 'LanguageSelection' when "call out"'s keyboard shortcut pressed
+    useEffect(() => {
+        focusRawText && setShowRtAndLs(true);
+    }, [focusRawText]);
+
     // position start
     const pinningToggle = useCallback(() => {
         pinning && dispatch(setResultBoxShowAndPosition(pinPosRef.current));
@@ -146,6 +151,7 @@ const ResultBox = () => {
                     <RawText
                         defaultValue={text}
                         rawTextTranslate={handleRawTextChange}
+                        focusDependency={focusRawText}
                     />
                     <LanguageSelection
                         selectionChange={handleSelectionChange}

diff --git a/src/components/TsBtn/index.js b/src/components/TsBtn/index.js
@@ -2,15 +2,17 @@ import React, {useState, useEffect, useCallback, useRef} from 'react';
 import { useDispatch } from 'react-redux';
 import {
     setResultBoxShowAndPosition,
-    hideResultBox
+    hideResultBox,
+    callOutResultBox
 } from '../../redux/actions/resultBoxActions';
 import { mtSetText } from '../../redux/actions/multipleTranslateActions';
 import getSelection, { getSelectedText } from '../../public/utils/get-selection';
 import { useOptions, useOnExtensionMessage, useIsEnable } from '../../public/react-use';
 import {
     SCTS_CONTEXT_MENUS_CLICKED,
     SCTS_TRANSLATE_COMMAND_KEY_PRESSED,
-    SCTS_AUDIO_COMMAND_KEY_PRESSED
+    SCTS_AUDIO_COMMAND_KEY_PRESSED,
+    SCTS_CALL_OUT_COMMAND_KEY_PRESSED
 } from '../../constants/chromeSendMessageTypes';
 import IconFont from '../IconFont';
 import './style.css';
@@ -122,7 +124,10 @@ const TsBtn = ({ multipleTranslateMode }) => {
             const text = getSelectedText();
             text && sendAudio(text, {});
         }
-    }, [chromeMsg, isEnableTranslate, handleForwardTranslate]);
+        else if (chromeMsg?.type === SCTS_CALL_OUT_COMMAND_KEY_PRESSED) {
+            dispatch(callOutResultBox());
+        }
+    }, [chromeMsg, isEnableTranslate, handleForwardTranslate, dispatch]);
 
     useEffect(() => {
         const unsubscribe = getSelection(selectCb, unselectCb);

diff --git a/src/constants/chromeSendMessageTypes.js b/src/constants/chromeSendMessageTypes.js
@@ -2,4 +2,5 @@ export const SCTS_TRANSLATE = 'SCTS_TRANSLATE';
 export const SCTS_AUDIO = 'SCTS_AUDIO';
 export const SCTS_CONTEXT_MENUS_CLICKED = 'SCTS_CONTEXT_MENUS_CLICKED';
 export const SCTS_TRANSLATE_COMMAND_KEY_PRESSED = 'SCTS_TRANSLATE_COMMAND_KEY_PRESSED';
-export const SCTS_AUDIO_COMMAND_KEY_PRESSED = 'SCTS_AUDIO_COMMAND_KEY_PRESSED';
+export const SCTS_AUDIO_COMMAND_KEY_PRESSED = 'SCTS_AUDIO_COMMAND_KEY_PRESSED';
+export const SCTS_CALL_OUT_COMMAND_KEY_PRESSED = 'SCTS_CALL_OUT_COMMAND_KEY_PRESSED';
diff --git a/src/entry/background/commands.js b/src/entry/background/commands.js
@@ -2,11 +2,13 @@
 import { getCurrentTab } from '../../public/utils';
 import {
     SCTS_TRANSLATE_COMMAND_KEY_PRESSED,
-    SCTS_AUDIO_COMMAND_KEY_PRESSED
+    SCTS_AUDIO_COMMAND_KEY_PRESSED,
+    SCTS_CALL_OUT_COMMAND_KEY_PRESSED
 } from '../../constants/chromeSendMessageTypes';
 
 const SC_TRANSLATE = 'sc-translate';
 const SC_AUDIO = 'sc-audio';
+const SC_CALL_OUT = 'sc-call-out';
 
 chrome.commands.onCommand.addListener((cmd) => {
     switch (cmd) {
@@ -16,6 +18,8 @@ chrome.commands.onCommand.addListener((cmd) => {
         case SC_AUDIO:
             getCurrentTab(tab => tab && chrome.tabs.sendMessage(tab.id, { type: SCTS_AUDIO_COMMAND_KEY_PRESSED }));
             break;
+        case SC_CALL_OUT:
+            getCurrentTab(tab => tab && chrome.tabs.sendMessage(tab.id, { type: SCTS_CALL_OUT_COMMAND_KEY_PRESSED }));
         default: break;
     }
 });
diff --git a/src/redux/actionTypes/resultBoxTypes.js b/src/redux/actionTypes/resultBoxTypes.js
@@ -1,3 +1,4 @@
 export const SET_RESULT_BOX_SHOW_AND_POSITION = 'SET_RESULT_BOX_SHOW_AND_POSITION';
 export const HIDE_RESULT_BOX = 'HIDE_RESULT_BOX';
-export const INIT_RESULT_BOX_STATE = 'INIT_RESULT_BOX_STATE';
+export const INIT_RESULT_BOX_STATE = 'INIT_RESULT_BOX_STATE';
+export const CALL_OUT_RESULT_BOX = 'CALL_OUT_RESULT_BOX';
diff --git a/src/redux/actions/resultBoxActions.js b/src/redux/actions/resultBoxActions.js
@@ -10,4 +10,6 @@ export const hideResultBox = () => ({ type: types.HIDE_RESULT_BOX });
 export const initResultBoxState = (multiMode) => ({
     type: types.INIT_RESULT_BOX_STATE,
     payload: multiMode
-});
+});
+
+export const callOutResultBox = () => ({ type: types.CALL_OUT_RESULT_BOX });
diff --git a/src/redux/reducers/resultBoxState.js b/src/redux/reducers/resultBoxState.js
@@ -2,7 +2,8 @@ import * as types from '../actionTypes/resultBoxTypes';
 
 const initState = {
     show: false,
-    pos: { x: 5, y: 5},
+    pos: { x: 5, y: 5 },
+    focusRawText: 0,
     multipleMode: false
 };
 
@@ -14,6 +15,8 @@ const resultBoxState = (state = initState, { type, payload }) => {
             return { ...state, show: false };
         case types.INIT_RESULT_BOX_STATE:
             return { ...state, multipleMode: payload, show: false, pos: { x: 5, y: 5 } };
+        case types.CALL_OUT_RESULT_BOX:
+            return { ...state, show: true, focusRawText: state.focusRawText + 1 };
         default:
             return state;
     }