feat(selection): add selection inside dict panel crimx#165

src/_helpers/selection.ts

@@ -124,16 +124,22 @@ export function isSameSelection (a: SelectionInfo, b: SelectionInfo) {
   return a && b && a.text === b.text && a.context === b.context
 }
 
-export function getSelectionInfo (): SelectionInfo {
+export function getSelectionInfo (config: Partial<SelectionInfo> = {}): SelectionInfo {
   return {
-    text: getSelectionText(),
-    context: getSelectionSentence(),
-    title: window.pageTitle || document.title,
-    url: window.pageURL || document.URL,
+    text: config.text != null ? config.text : getSelectionText(),
+    context: config.context != null ? config.context : getSelectionSentence(),
+    title: config.title != null
+      ? config.title
+      : window.pageTitle || document.title || '',
+    url: config.url != null
+      ? config.url
+      : window.pageURL || document.URL || '',
     // set by chrome-api helper
-    favicon: window.faviconURL || '',
-    trans: '',
-    note: '',
+    favicon: config.favicon != null
+      ? config.favicon
+      : window.faviconURL || '',
+    trans: config.trans || '',
+    note: config.note || '',
   }
 }
 

src/_locales/options/messages.json

@@ -389,6 +389,16 @@
     "zh_CN": "添加生词",
     "zh_TW": "添加生字"
   },
+  "panelmode_description": {
+    "en": "Inside dict panel. See 'Search Mode' above. <p class=\"hl\">Note that it won't affect the dict panel on this page.</p>",
+    "zh_CN": "查词面板内部的查词模式。参见上方“查词模式”。<p class=\"hl\">注意在本页面的查词面板上没有效果。</p>",
+    "zh_TW": "字典視窗內部的查字模式。參見上方「查字模式」。<p class=\"hl\">注意在本窗口的字典視窗介面中沒有效果。</p>"
+  },
+  "panelmode_title": {
+    "en": "Panel Mode",
+    "zh_CN": "面板查词",
+    "zh_TW": "內部滑選"
+  },
   "pdf_sniff": {
     "en": "Enable PDF Viewer",
     "zh_CN": "默认用本扩展浏览 PDF",

src/app-config/index.ts

@@ -56,14 +56,6 @@ export interface AppConfigMutable {
   /** panel font-size */
   fontSize: number
 
-  /**
-   * panel double click search
-   * empty means no double click search
-   * 'double' means double click
-   * 'ctrl' means double click + ctrl/command pressed
-   */
-  panelDbSearch: '' | 'double' | 'ctrl'
-
   /** sniff pdf request */
   pdfSniff: boolean
 
@@ -112,6 +104,22 @@ export interface AppConfigMutable {
     }
   },
 
+  /** when and how to search text inside dict panel */
+  panelMode: {
+    /** direct: on mouseup */
+    direct: boolean
+    /** double: double click */
+    double: boolean
+    /** ctrl: search when double click ctrl + selection not empty */
+    ctrl: boolean
+    /** cursor instant capture */
+    instant: {
+      enable: boolean
+      key: 'direct' | 'ctrl' | 'alt'
+      delay: number
+    }
+  },
+
   /** instant capture delay, in ms */
   insCapDelay: number
 
@@ -178,7 +186,7 @@ export default appConfigFactory
 
 export function appConfigFactory (): AppConfig {
   return {
-    version: 7,
+    version: 8,
 
     active: true,
 
@@ -194,8 +202,6 @@ export function appConfigFactory (): AppConfig {
 
     fontSize: 13,
 
-    panelDbSearch: '',
-
     pdfSniff: true,
 
     searhHistory: false,
@@ -228,6 +234,17 @@ export function appConfigFactory (): AppConfig {
       },
     },
 
+    panelMode: {
+      direct: false,
+      double: false,
+      ctrl: false,
+      instant: {
+        enable: false,
+        key: 'alt',
+        delay: 600,
+      },
+    },
+
     insCapDelay: 600,
     doubleClickDelay: 450,
 

src/app-config/merge-config.ts

@@ -30,7 +30,6 @@ function mergeHistorical (config: AppConfig, baseConfig?: AppConfig): AppConfig
   mergeNumber('panelWidth')
   mergeNumber('panelMaxHeightRatio')
   mergeNumber('fontSize')
-  merge('panelDbSearch', val => val === '' || val === 'double' || val === 'ctrl')
   mergeBoolean('pdfSniff')
   mergeBoolean('searhHistory')
   mergeBoolean('searhHistoryInco')
@@ -52,6 +51,13 @@ function mergeHistorical (config: AppConfig, baseConfig?: AppConfig): AppConfig
   merge('pinMode.instant.key', val => val === 'direct' || val === 'ctrl' || val === 'alt')
   mergeNumber('pinMode.instant.delay')
 
+  mergeBoolean('panelMode.direct')
+  mergeBoolean('panelMode.double')
+  mergeBoolean('panelMode.ctrl')
+  mergeBoolean('panelMode.instant.enable')
+  merge('panelMode.instant.key', val => val === 'direct' || val === 'ctrl' || val === 'alt')
+  mergeNumber('panelMode.instant.delay')
+
   mergeNumber('doubleClickDelay')
 
   mergeBoolean('tripleCtrl')
@@ -99,9 +105,20 @@ function mergeHistorical (config: AppConfig, baseConfig?: AppConfig): AppConfig
   })
 
   // patch
-  if (config.version === 6) {
-    base.dicts.all.google.selectionWC.max = 999999999999999
-    base.dicts.all.youdao.selectionWC.max = 999999999999999
+  switch (config.version) {
+    case 6:
+      base.dicts.all.google.selectionWC.max = 999999999999999
+      base.dicts.all.youdao.selectionWC.max = 999999999999999
+      break
+    case 7:
+      if (config['panelDbSearch'] === 'double') {
+        base.panelMode.double = true
+      } else if (config['panelDbSearch'] === 'ctrl') {
+        base.panelMode.ctrl = true
+      }
+      break
+    default:
+      break
   }
 
   return base

src/content/__fake__/envContent.tsx

@@ -14,6 +14,9 @@ config.dicts.selected = ['bing', 'google', 'guoyu', 'cobuild', 'liangan']
 config.mode.double = true
 // config.mode.icon = false
 // config.animation = false
+config.panelMode.double = true
+config.panelMode.ctrl = true
+config.panelMode.instant.enable = true
 config.tripleCtrlAuto = true
 config.tripleCtrlLocation = TCDirection.right
 config.tripleCtrlPreload = 'selection'

src/content/components/DictItem/index.tsx

@@ -23,7 +23,6 @@ export interface DictItemProps extends DictItemDispatchers {
   readonly searchResult: any
 
   readonly fontSize: number
-  readonly panelDbSearch: '' | 'double' | 'ctrl'
   readonly panelWidth: number
 }
 
@@ -171,25 +170,6 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
     }
   }
 
-  handleDictItemDbClick = (e: React.MouseEvent<HTMLElement>) => {
-    const { t, id, searchText, panelDbSearch } = this.props
-    if (!panelDbSearch || (panelDbSearch === 'ctrl' && !(e.ctrlKey || e.metaKey))) {
-      return
-    }
-    const win = e.currentTarget.ownerDocument.defaultView
-    const text = getSelectionText(win)
-    if (text) {
-      searchText({
-        info: getDefaultSelectionInfo({
-          text,
-          context: getSelectionSentence(win),
-          title: `${t('fromSaladict')}: ${t(`dict:${id}`)}`,
-          favicon: `https://raw.githubusercontent.com/crimx/ext-saladict/dev/src/components/dictionaries/${id}/favicon.png`
-        }),
-      })
-    }
-  }
-
   handleDictURLClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation()
     e.preventDefault()
@@ -252,7 +232,6 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
       id,
       dictURL,
       fontSize,
-      panelDbSearch,
       searchStatus,
       searchResult,
     } = this.props
@@ -267,7 +246,6 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
     return (
       <section className='panel-DictItem'
         onClick={this.handleDictItemClick}
-        onDoubleClick={panelDbSearch ? this.handleDictItemDbClick : undefined}
       >
         <header className='panel-DictItem_Header' onClick={this.toggleFolding}>
           <img className='panel-DictItem_Logo' src={require('@/components/dictionaries/' + id + '/favicon.png')} alt='dict logo' />

src/content/components/DictPanel/index.tsx

@@ -53,7 +53,6 @@ export default class DictPanel extends React.Component<DictPanelProps> {
       allDictsConfig,
       panelWidth,
       fontSize,
-      panelDbSearch,
 
       updateItemHeight,
     } = this.props
@@ -90,7 +89,6 @@ export default class DictPanel extends React.Component<DictPanelProps> {
               text: (dictionaries.searchHistory[0] || selection.selectionInfo).text,
               dictURL,
               fontSize,
-              panelDbSearch,
               preferredHeight: allDictsConfig[id].preferredHeight,
               panelWidth,
               searchStatus: (dictsInfo[id] as any).searchStatus,

src/content/components/DictPanelPortal/index.tsx

@@ -249,7 +249,7 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
       <PortalFrame
         className={frameClassName}
         bodyClassName={isAnimation ? 'isAnimate' : undefined}
-        name='saladict-frame'
+        name='saladict-dictpanel'
         frameBorder='0'
         head={this.frameHead}
         frameDidMount={this.frameDidMount}

src/content/components/WordEditorPortal/index.tsx

@@ -73,7 +73,7 @@ export default class WordEditorPortal extends React.Component<WordEditorPortalPr
     return (
       <PortalFrame
         className={'saladict-WordEditor' + (isAnimation ? ' isAnimate' : '')}
-        name='saladict-frame'
+        name='saladict-wordeditor'
         frameBorder='0'
         head={this.frameHead}
       >

src/content/containers/DictPanelContainer.tsx

@@ -20,7 +20,6 @@ export const mapStateToProps = ({
     isAnimation: config.animation,
     allDictsConfig: config.dicts.all,
     fontSize: config.fontSize,
-    panelDbSearch: config.panelDbSearch,
     langCode: config.langCode,
 
     selection,

src/content/redux/modules/widget.ts

@@ -5,7 +5,7 @@ import { message } from '@/_helpers/browser-api'
 import { createAppConfigStream } from '@/_helpers/config-manager'
 import { MsgSelection, MsgType, MsgTempDisabledState, MsgEditWord, MsgOpenUrl } from '@/typings/message'
 import { searchText, restoreDicts } from '@/content/redux/modules/dictionaries'
-import { SelectionInfo } from '@/_helpers/selection'
+import { SelectionInfo, getDefaultSelectionInfo } from '@/_helpers/selection'
 import { Mutable } from '@/typings/helpers'
 
 const isSaladictOptionsPage = !!window.__SALADICT_OPTIONS_PAGE__
@@ -555,13 +555,36 @@ function listenNewSelection (
 ) {
   message.self.addListener<MsgSelection>(MsgType.Selection, message => {
     const state = getState()
+    const { selectionInfo, dbClick, ctrlKey, instant, mouseX, mouseY, self } = message
+
+    if (self) {
+      // inside dict panel
+      const { direct, double, ctrl } = state.config.panelMode
+      const { text, context } = selectionInfo
+      if (text && (
+            instant ||
+            direct ||
+            (double && dbClick) ||
+            (ctrl && ctrlKey)
+          )
+      ) {
+        dispatch(searchText({
+          info: getDefaultSelectionInfo({
+            text,
+            context,
+            title: 'Saladict Panel',
+            favicon: 'https://raw.githubusercontent.com/crimx/ext-saladict/dev/public/static/icon-16.png',
+          })
+        }))
+      }
+      return
+    }
 
-    if (isSaladictPopupPage) { return }
+    if (isSaladictPopupPage || isSaladictOptionsPage) { return }
 
     const isActive = state.config.active && !state.widget.isTempDisabled
 
     const { direct, ctrl, double, icon } = state.config.mode
-    const { selectionInfo, dbClick, ctrlKey, instant, mouseX, mouseY } = message
     const {
       isPinned,
       shouldPanelShow: lastShouldPanelShow,
@@ -578,7 +601,6 @@ function listenNewSelection (
         (ctrl && ctrlKey) ||
         instant
       )) ||
-      isSaladictOptionsPage ||
       isSaladictPopupPage
     )
 
@@ -591,7 +613,6 @@ function listenNewSelection (
       !(double && dbClick) &&
       !(ctrl && ctrlKey) &&
       !instant &&
-      !isSaladictOptionsPage &&
       !isSaladictPopupPage
     )
 
@@ -620,14 +641,12 @@ function listenNewSelection (
 
     // should search text?
     const { pinMode } = state.config
-    if ((shouldPanelShow && selectionInfo.text && (
-            !isPinned ||
-            pinMode.direct ||
-            (pinMode.double && dbClick) ||
-            (pinMode.ctrl && ctrlKey)
-          )
-        ) ||
-        isSaladictOptionsPage
+    if (shouldPanelShow && selectionInfo.text && (
+          !isPinned ||
+          pinMode.direct ||
+          (pinMode.double && dbClick) ||
+          (pinMode.ctrl && ctrlKey)
+        )
     ) {
       dispatch(searchText({ info: selectionInfo }))
     } else if (!shouldPanelShow && lastShouldPanelShow) {

src/options/OptDictPanel.vue

@@ -4,16 +4,6 @@
       <strong>{{ $t('opt:dict_panel_title') }}</strong>
     </div>
     <div class="opt-item__body">
-      <div class="select-box-container">
-         <label class="select-box">
-           <span class="select-label">{{ $t('opt:dict_panel_db_search') }}</span>
-           <select class="form-control" v-model="panelDbSearch">
-             <option value="">{{ $t('opt:dict_panel_db_search_none') }}</option>
-             <option value="double">{{ $t('opt:dict_panel_db_search_double') }}</option>
-             <option value="ctrl">{{ $t('opt:dict_panel_db_search_ctrl') }}</option>
-           </select>
-         </label>
-      </div>
       <div class="input-group">
         <div class="input-group-addon">{{ $t('opt:dict_panel_height_ratio') }}</div>
         <input type="number" step="1" min="10" max="90" class="form-control"
@@ -51,7 +41,6 @@ export default {
     panelWidth: 'config.panelWidth',
     panelMaxHeightRatio: 'config.panelMaxHeightRatio',
     fontSize: 'config.fontSize',
-    panelDbSearch: 'config.panelDbSearch',
     searchText: 'searchText',
   },
   watch: {