Update with Google Translate

mantou132 · Dec 2, 2020 · 38c5812 · 38c5812
1 parent f9135dc
commit 38c5812
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 57 deletions.
diff --git a/src/preload/css.ts b/src/preload/css.ts
@@ -9,45 +9,39 @@ export default async () => {
 
   const style = document.createElement('style');
   style.innerText = css`
-    header {
+    header,
+    body > c-wiz > div:first-child > div:first-child {
       margin-top: -1px !important;
       height: 0 !important;
       overflow: hidden !important;
       padding: 0 !important;
     }
-    #source {
+    c-wiz c-wiz c-wiz c-wiz > h2 ~ span > span > div,
+    c-wiz c-wiz c-wiz c-wiz > h2 ~ span > span > div > div:last-child {
       max-height: none !important;
       padding-right: 50px !important;
     }
-    *:not(.moremenu) {
+    * {
       box-shadow: none !important;
     }
     ::-webkit-scrollbar,
-    .gt-md-bg,
-    .gt-md,
-    .go-wrap,
-    .ad-panel,
-    .notification-area {
+    h1#i5 + div c-wiz > h2 ~ div[jsaction] > div[aria-label],
+    body > c-wiz nav + div {
       display: none !important;
     }
     :focus {
       outline: none !important;
     }
-    .frame {
-      height: 100vh !important;
-    }
-    .jfk-button-flat:focus {
-      border-color: transparent !important;
-    }
-
     body {
-      background: transparent;
-      transform: translateX(100%);
+      background: transparent !important;
+      transform: translateX(100%) !important;
     }
-    .frame {
-      background: #f5f5f5;
-      margin: ${config.platform === 'win32' ? '20px' : '0'} 0 ${config.platform === 'linux' ? '20px' : '0'} 20px;
-      filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 0.5px);
+    body > c-wiz[view] {
+      overflow: auto;
+      height: 100vh !important;
+      background: #f5f5f5 !important;
+      margin: ${config.platform === 'win32' ? '20px' : '0'} 0 ${config.platform === 'linux' ? '20px' : '0'} 20px !important;
+      filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 0.5px) !important;
       box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15) !important;
     }
   `;

diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -6,12 +6,12 @@ import { CUSTOM_EVENT } from '../consts';
 import textBoxHistory from './textboxhistory';
 import injectCSS from './css';
 import lang from './lang';
-import { click, getTranslateString } from './utils';
+import { click, getTranslateString, dispatchInputEvent } from './utils';
 
 import './shortcut';
 import './animate';
 
-interface InitPageOption {
+export interface InitPageOption {
   sourceTextArea: string;
   responseContainer: string;
   sourceTTS: string;
@@ -21,11 +21,11 @@ interface InitPageOption {
   signOut: string;
 
   submit?: string;
-  sourceLabel?: string;
-  targetLabel?: string;
-  detectLabel?: string;
-  enLabel?: string;
-  zhLabel?: string;
+  sourceCurrentLabel?: string;
+  sourceDetectLabel?: string;
+  targetCurrentLabel?: string;
+  targetENLabel?: string;
+  targetZHCNLabel?: string;
   starButton?: string;
 }
 
@@ -41,6 +41,7 @@ const initTranslatePage = async (opt: InitPageOption) => {
     sourceTextAreaEle.focus();
     if (!arg) return; // 没有选择的文本
     sourceTextAreaEle.value = getTranslateString(arg);
+    dispatchInputEvent(sourceTextAreaEle);
   });
 
   window.addEventListener('keydown', e => {
@@ -92,40 +93,46 @@ const initTranslatePage = async (opt: InitPageOption) => {
     }
   });
 
-  if (opt.sourceLabel && opt.targetLabel && opt.enLabel && opt.zhLabel && opt.detectLabel) {
+  if (
+    opt.sourceCurrentLabel &&
+    opt.sourceDetectLabel &&
+    opt.targetCurrentLabel &&
+    opt.targetENLabel &&
+    opt.targetZHCNLabel
+  ) {
     const i18n = lang();
-    const sourceLabelEle = document.querySelector(opt.sourceLabel) as HTMLElement;
-    const targetLabelEle = document.querySelector(opt.targetLabel) as HTMLElement;
-    const enLabelEle = document.querySelector(opt.enLabel) as HTMLElement;
-    const zhLabelEle = document.querySelector(opt.zhLabel) as HTMLElement;
-    const detectLabelEle = document.querySelector(opt.detectLabel) as HTMLElement;
+    const sourceCurrentLabelEle = document.querySelector(opt.sourceCurrentLabel) as HTMLElement;
+    const sourceDetectLabelEle = document.querySelector(opt.sourceDetectLabel) as HTMLElement;
+    const targetCurrentLabelEle = document.querySelector(opt.targetCurrentLabel) as HTMLElement;
+    const targetENLabelEle = document.querySelector(opt.targetENLabel) as HTMLElement;
+    const targetZHCNLabelEle = document.querySelector(opt.targetZHCNLabel) as HTMLElement;
+
+    sourceDetectLabelEle.click();
 
     ipcRenderer.on(CUSTOM_EVENT.TRANSLATE, (_: any, arg: string) => {
       const { value } = sourceTextAreaEle;
       if (value === arg) return;
       sourceTextAreaEle.value = '';
-      targetLabelEle.click();
-      detectLabelEle.click();
+      sourceDetectLabelEle.click();
       sourceTextAreaEle.value = getTranslateString(value);
+      dispatchInputEvent(sourceTextAreaEle);
     });
 
     const observer = new MutationObserver(() => {
-      const sourceMatch = sourceLabelEle.textContent?.match(i18n.detectReg);
-      const sourceStr = sourceMatch ? sourceMatch[1] : '';
-      const targetStr = targetLabelEle.textContent;
+      const sourceStr = sourceCurrentLabelEle.textContent?.match(i18n.detectReg)?.[1];
+      const targetStr = targetCurrentLabelEle.textContent;
       if (sourceStr && targetStr?.includes(sourceStr)) {
-        targetLabelEle.click();
         if (sourceStr === i18n.detectZh) {
-          enLabelEle.click();
+          targetENLabelEle.click();
         } else {
-          zhLabelEle.click();
+          targetZHCNLabelEle.click();
         }
       }
     });
-    observer.observe(sourceLabelEle, {
-      attributes: false,
+    observer.observe(sourceCurrentLabelEle, {
+      subtree: true,
       childList: true,
-      subtree: false,
+      characterData: true,
     });
   }
 };
@@ -134,19 +141,21 @@ const { href } = window.location;
 if (href.startsWith(config.translateUrl) || href.startsWith(config.translateUrlFallback)) {
   injectCSS();
   initTranslatePage({
-    sourceTextArea: '#source',
-    responseContainer: '.tlid-translation',
-    sourceTTS: '.src-tts',
-    responseTTS: '.res-tts',
-    responseCopy: '.copybutton',
-    starButton: '.starbutton',
+    sourceTextArea: 'textarea[aria-autocomplete="list"]',
+    responseContainer: '[role="region"] > [jsaction][jsname] > [data-language] > div > span[lang][jsaction][jsname]',
+    sourceTTS: 'div[data-enable-toggle-playback-speed][data-location="1"] > button[aria-label][jscontroller][jsname]',
+    responseTTS: 'div[data-enable-toggle-playback-speed][data-location="2"] > button[aria-label][jscontroller][jsname]',
+    responseCopy: 'div[data-enable-toggle-playback-speed][data-location="2"] + button',
+    starButton: '[data-saved-translation-limit-reached] > button[aria-pressed]',
     signIn: 'a[href*="https://accounts.google.com/ServiceLogin"]',
     signOut: 'a[href*="https://accounts.google.com/Logout"]',
-    sourceLabel: '.tlid-open-small-source-language-list',
-    targetLabel: '.tlid-open-small-target-language-list',
-    detectLabel: '[onclick*=sl_list_auto]',
-    enLabel: '[onclick*=tl_list_en]',
-    zhLabel: '[onclick*=tl_list_zh-CN]',
+    sourceCurrentLabel: 'h1#i5 + div > div > c-wiz[jsmodel] > div[jsname][role="button"]:nth-of-type(1)',
+    sourceDetectLabel: 'div[data-auto-open-search] > div > div> div div[data-language-code="auto"]',
+    targetCurrentLabel: 'h1#i5 + div > div > c-wiz[jsmodel] > div[jsname][role="button"]:nth-of-type(3)',
+    targetENLabel:
+      'h1#i5 + div + div + div > c-wiz > div:nth-of-type(2) > div[data-auto-open-search] > div > div> div div[data-language-code="en"]',
+    targetZHCNLabel:
+      'h1#i5 + div + div + div > c-wiz > div:nth-of-type(2) > div[data-auto-open-search] > div > div> div div[data-language-code="zh-CN"]',
   });
   ipcRenderer.sendToHost('header-background-change', 'white');
 } else {

diff --git a/src/preload/textboxhistory.ts b/src/preload/textboxhistory.ts
@@ -1,4 +1,4 @@
-import { getTranslateString, throttle } from './utils';
+import { getTranslateString, throttle, dispatchInputEvent } from './utils';
 
 export default function(arg: HTMLTextAreaElement, submit?: string) {
   let isComposition = false;
@@ -34,12 +34,14 @@ export default function(arg: HTMLTextAreaElement, submit?: string) {
       valueHistory.currentPosition -= 1;
       textarea.value = valueHistory.historyValuePool[valueHistory.currentPosition];
     }
+    dispatchInputEvent(textarea);
   }
 
   function redo() {
     if (valueHistory.currentPosition + 1 < valueHistory.historyValuePool.length) {
       valueHistory.currentPosition += 1;
       textarea.value = valueHistory.historyValuePool[valueHistory.currentPosition];
+      dispatchInputEvent(textarea);
     }
   }
   const throttleAddValueToHistory = throttle(addValueToHistory, 1000);
@@ -87,6 +89,7 @@ export default function(arg: HTMLTextAreaElement, submit?: string) {
 
       const originStr = getTranslateString(newString);
       textarea.value = originStr;
+      dispatchInputEvent(textarea);
       addValueToHistory(originStr);
     }
   });

diff --git a/src/preload/utils.ts b/src/preload/utils.ts
@@ -59,3 +59,7 @@ export function click(ele: HTMLElement) {
     activeElement.focus();
   }
 }
+
+export function dispatchInputEvent(ele: HTMLElement) {
+  ele.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+}