feat(dicts): add oald

config/fake-env/fake-ajax.js

@@ -214,6 +214,33 @@ const fakeFetchData = [
       text: () => require('raw-loader!../../test/specs/components/dictionaries/websterlearner/response/jumblish.html')
     },
   },
+  {
+    test: {
+      method: /.*/,
+      url: /oxfordlearnersdictionaries\.com.*love$/,
+    },
+    response: {
+      text: () => require('raw-loader!../../test/specs/components/dictionaries/oald/response/love.html')
+    },
+  },
+  {
+    test: {
+      method: /.*/,
+      url: /oxfordlearnersdictionaries\.com.*love_2$/,
+    },
+    response: {
+      text: () => require('raw-loader!../../test/specs/components/dictionaries/oald/response/love_2.html')
+    },
+  },
+  {
+    test: {
+      method: /.*/,
+      url: /oxfordlearnersdictionaries\.com.*jumblish$/,
+    },
+    response: {
+      text: () => require('raw-loader!../../test/specs/components/dictionaries/oald/response/jumblish.html')
+    },
+  },
 ]
 
 /*-----------------------------------------------*\

src/app-config/dicts.ts

@@ -279,6 +279,37 @@ export function getALlDicts () {
         related: true,
       }
     },
+    oald: {
+      /**
+       * Full content page to jump to when user clicks the title.
+       * %s will be replaced with the current word.
+       * %z will be replaced with the traditional Chinese version of the current word.
+       * %h will be replaced with the current word joining with hyphen "-".
+       */
+      page: 'https://www.oxfordlearnersdictionaries.com/definition/english/%h',
+      /**
+       * If set to true, the dict start searching automatically.
+       * Otherwise it'll only start seaching when user clicks the unfold button.
+       * Default MUST be true and let user decide.
+       */
+      defaultUnfold: true,
+      /**
+       * This is the default height when the dict first renders the result.
+       * If the content height is greater than the preferred height,
+       * the preferred height is used and a mask with a view-more button is shown.
+       * Otherwise the content height is used.
+       */
+      preferredHeight: 265,
+      /** Only start searching if the selection contains the language. */
+      selectionLang: {
+        eng: true,
+        chs: true,
+      },
+      /** Optional dict custom options. Can only be boolean or number. */
+      options: {
+        related: true,
+      },
+    },
     urban: {
       /**
        * Full content page to jump to when user clicks the title.

src/app-config/index.ts

@@ -206,7 +206,17 @@ export function appConfigFactory (): AppConfig {
       },
       en: {
         dict: '',
-        list: ['bing', 'youdao', 'macmillan', 'longman', 'cobuild', 'urban', 'eudic'],
+        list: [
+          'bing',
+          'youdao',
+          'macmillan',
+          'longman',
+          'cobuild',
+          'websterlearner',
+          'oald',
+          'urban',
+          'eudic',
+        ],
         accent: 'uk' as ('us' | 'uk')
       }
     },

src/components/dictionaries/oald/View.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Speaker from '@/components/Speaker'
+import { OALDResult, OALDResultLex, OALDResultRelated } from './engine'
+
+export default class DictOALD extends React.PureComponent<{ result: OALDResult }> {
+  handleEntryClick = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.nativeEvent.target as HTMLSpanElement
+    if (target.classList && target.classList.contains('heading')) {
+      (target.parentElement as HTMLDivElement).classList.toggle('is-active')
+    }
+  }
+
+  renderLex (result: OALDResultLex) {
+    return result.items.map(entry => (
+      <section key={entry.title} className='dictOALD-Entry' onClick={this.handleEntryClick}>
+        <header className='dictOALD-Header'>
+          <div className='webtop-g' dangerouslySetInnerHTML={{ __html: entry.title }} />
+          {entry.prons.length > 0 &&
+            <div className='pron-gs ei-g'>
+              {entry.prons.map(p => (
+                <React.Fragment key={p.phsym}>
+                  <span className='pron-g' dangerouslySetInnerHTML={{ __html: p.phsym }} />
+                  <Speaker src={p.pron} />
+                </React.Fragment>
+              ))}
+            </div>
+          }
+        </header>
+        <span className='h-g' dangerouslySetInnerHTML={{ __html: entry.defs }} />
+      </section>
+    ))
+  }
+
+  renderRelated (result: OALDResultRelated) {
+    return (
+      <>
+        <p>Did you mean:</p>
+        <ul className='dictOALD-Related' dangerouslySetInnerHTML={{ __html: result.list }} />
+      </>
+    )
+  }
+
+  render () {
+    const { result } = this.props
+    switch (result.type) {
+      case 'lex':
+        return this.renderLex(result)
+      case 'related':
+        return this.renderRelated(result)
+      default:
+        return null
+    }
+  }
+}

src/components/dictionaries/oald/_locales.json

@@ -0,0 +1,14 @@
+{
+  "name": {
+    "en": "OALD",
+    "zh_CN": "OALD",
+    "zh_TW": "OALD"
+  },
+  "options": {
+    "related": {
+      "en": "Show related results",
+      "zh_CN": "失败时显示备选",
+      "zh_TW": "失敗時顯示備選"
+    }
+  }
+}