☰

WaniKani JJ External Definition

Get JJ External Definition from Weblio, Kanjipedia

// ==UserScript==
// @name         WaniKani JJ External Definition
// @namespace    http://www.wanikani.com
// @version      1.4.2
// @description  Get JJ External Definition from Weblio, Kanjipedia
// @author       polv
// @author       NicoleRauch
// @match        *://www.wanikani.com/*
// @match        *://preview.wanikani.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=weblio.jp
// @license      MIT
// @require      https://unpkg.com/dexie@3/dist/dexie.js
// @require      https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1276163
// @grant        GM_xmlhttpRequest
// @connect      kanjipedia.jp
// @connect      weblio.jp
// @homepage     https://github.com/patarapolw/wanikani-userscript/blob/master/userscripts/external-definition.user.js
// ==/UserScript==

// @ts-check
/// <reference path="./types/item-info.d.ts" />
/// <reference path="./types/gm.d.ts" />
(function () {
  'use strict';

  const AFTER_EN_MEANING = false;

  /** @type {number | undefined} */
  const MAX_ENTRIES = 3;
  /** @type {number | undefined} */
  const HTML_MAX_CHAR = 10000;

  const entryClazz = 'wkexternaldefinition';

  const style = document.createElement('style');
  style.appendChild(
    document.createTextNode(/* css */ `

  .${entryClazz} {
    --kanji-variant-size: 64px;
  }

  .${entryClazz} details {
    margin-top: 1em;
  }

  .${entryClazz} details summary {
    display: revert;
    margin-bottom: 1em;
    cursor: pointer;
  }

  .${entryClazz} .spoiler:not(:hover), .${entryClazz} .spoiler:not(:hover) * {
    background-color: #ccc;
    color: #ccc;
    text-shadow: none;
  }

  .${entryClazz} .keep-10em {
    display: inline-block;
    width: 10em;
    min-width: fit-content;
    max-width: 100%;
  }

  /* Weblio fixes */
  .${entryClazz} p {
    margin-bottom: 0.5em;
  }
  .${entryClazz} a.crosslink {
    color: #023e8a;
  }
  .${entryClazz} a {
    text-decoration: none;
  }
  .${entryClazz} a.external {
    text-decoration: underline;
  }
  .${entryClazz} ol {
    list-style: revert;
    padding: revert;
  }
  .${entryClazz} ul {
    list-style: revert;
    padding: revert;
  }
  .${entryClazz} .wnryjNotice {
    border: #b5b6b5 solid 1px;
    font-size: 0.8em;
    line-height: 1.32em;
    margin: 16px 0 0 0;
    padding: 10px;
    width: auto;
  }
  .${entryClazz} .SgkdjImg img {
    width: 40%;
    height: 40%;
  }
  .${entryClazz} .synonymsUnderDictWrp {
    margin-top: 1em;
  }
  .${entryClazz} .synonymsUnderDict {
    background-color: #f7f7f7;
    clear: both;
    margin: 0 0 0 8px;
    padding: 2px 8px;
  }
  .${entryClazz} .synonymsUnderDict a {
    padding-right: 1em;
  }
  .${entryClazz} .tssmjC {
    background-color: #f0f0f0;
    border: #666666 solid 1px;
    color: #363636;
    font-size: 0.9em;
    line-height: 1.0em;
    margin-right: 5px;
    padding: 1px;
  }

  /* Kanjipedia fixes */
  .${entryClazz}-kanjipedia-reading-horizontal * {
    display: inline-block;
  }
  .${entryClazz}-kanjipedia-reading-horizontal li {
    margin-right: 1em;
  }
  .${entryClazz}-kanjipedia-reading-horizontal .kanji-variant-header {
    display: none;
  }

  .${entryClazz} .kanji-variant {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--kanji-variant-size, 64px);
    font-family: "HiraMinProN-W3", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "MS Mincho", serif; /* Font list from Jisho.org */
    margin-top: 0;
    margin-bottom: 0;
  }
  .${entryClazz} .kanji-variant img {
    height: var(--kanji-variant-size, 64px);
  }
  .${entryClazz} .kanji-variant + .kanji-variant {
    margin-left: 1em;
  }
  .${entryClazz} .okurigana {
    color: #ab9b96;
  }
  @media only screen and (min-width: 768px) {
    .subject-readings__reading {
      flex: 1;
    }
  }
  `),
  );
  document.head.appendChild(style);

  const radicalMap = {
    Gun: ['𠂉'],
    Leaf: ['丆'],
    Beggar: ['丂'],
    Spikes: ['业'],
    Kick: ['𧘇'],
    Viking: ['𤇾', '𦥯'],
    Cape: ['𠃌'],
    Hills: [],
    Gladiator: ['龹'],
    Pope: [],
    Spring: ['𡗗'],
    Squid: ['㑒', '僉'],
    Yurt: [],
    Chinese: ['𦰩', '堇'],
    Bear: ['㠯'],
    Blackjack: ['龷'],
    Trash: ['𠫓'],
    Tofu: [],
    Creeper: [],
    Bar: ['㦮', '戔'],
    Saw: ['巩'],
    Zombie: ['袁'],
    Explosion: [],
    Morning: ['𠦝', '龺'],
    'Death Star': ['俞'],
    Comb: [],
    Elf: [],
    Coral: ['丞'],
    Cactus: [],
    Satellite: ['䍃'],
    Psychopath: ['鬯'], // Except this one; but it's a smaller radical not elsewhere described.
  };

  ///////////////////////////////////////////////////////////////////////////////////////////////////

  // @ts-ignore
  const _Dexie = /** @type {typeof import('dexie').default} */ (Dexie);
  /**
   * @typedef {{ id: string; url: string; definition: string; reading: string; variant: string }} EntryKanjipedia
   * @typedef {{ id: string; url: string; definitions: string[] }} EntryWeblio
   */

  class Database extends _Dexie {
    /** @type {import('dexie').Table<EntryKanjipedia, string>} */
    kanjipedia;

    /** @type {import('dexie').Table<EntryWeblio, string>} */
    weblio;

    constructor() {
      super(entryClazz);
      this.version(1).stores({
        kanjipedia: 'id,url',
        weblio: 'id,url',
      });
    }
  }

  const db = new Database();

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Updating the kanji and vocab we are looking for
  /** @type {string | undefined} */
  let kanji;
  /** @type {string | undefined} */
  let vocab;

  let isSuru = false;

  let isSuffix = false;
  /** @type {string[]} */
  let reading = [];

  let kanjipediaDefinition;
  let weblioDefinition;
  let kanjipediaReading;

  let qType = '';
  let sType = '';

  window.addEventListener('willShowNextQuestion', (e) => {
    // First, remove any already existing entries to avoid displaying entries for other items:
    document.querySelectorAll('.' + entryClazz).forEach((el) => el.remove());
    kanji = undefined;
    vocab = undefined;
    reading = [];
    qType = '';

    kanjipediaDefinition = undefined;
    kanjipediaReading = undefined;
    weblioDefinition = undefined;

    if ('detail' in e) {
      const { subject, questionType } = /** @type {any} */ (e.detail);
      qType = questionType;
      sType = subject.subject_category || subject.type;
      if (sType === 'Vocabulary') {
        vocab = fixVocab(subject.characters);
        reading = subject.readings
          ? subject.readings.map((r) => r.reading)
          : [subject.characters];
      } else {
        kanji =
          typeof subject.characters === 'string'
            ? subject.characters
            : getRadicalKanji(subject.meanings);
      }
    }

    updateInfo();
  });

  /**
   *
   * @param {string} v
   * @returns
   */
  function fixVocab(v) {
    const suru = 'する';
    isSuru = v.endsWith(suru) && v !== suru;
    if (isSuru) {
      v = v.substring(0, v.length - suru.length);
      reading = reading.map((r) => r.replace(new RegExp(suru + '$'), ''));
    }

    const extMark = '〜';
    isSuffix = v.startsWith(extMark);
    if (isSuffix) {
      v = v.substring(extMark.length);
    }

    return v.replace(/(.)々/g, '$1$1');
  }

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  /**
   * Loading the information and updating the webpage
   *
   * @returns {Promise<void>}
   */
  async function updateInfo() {
    /**
     *
     * @param {string} definition
     * @param {string} full_url
     * @param {string} name
     * @returns {string}
     */
    function insertDefinition(definition, full_url, name) {
      const output = document.createElement('div');
      output.className = entryClazz;
      output.lang = 'ja';
      output.innerHTML = definition;

      if (full_url) {
        const a = document.createElement('a');
        a.className = 'external';
        a.innerText = 'Click for full entry';
        a.href = full_url;

        const p = document.createElement('p');
        p.style.marginTop = '0.5em';
        p.append(a);
        output.append(p);
      }

      output.querySelectorAll('a').forEach((a) => {
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
      });

      if (name === 'Kanjipedia') {
        kanjipediaDefinition = output;
        kanjipediaInserter.renew();
      } else {
        weblioDefinition = output;
        weblioInserter.renew();
      }

      return output.outerHTML;
    }

    /**
     *
     * @param {string} kanji
     * @returns {Promise<string>}
     */
    async function searchKanjipedia(kanji) {
      /**
       *
       * @param {EntryKanjipedia} r
       */
      const setContent = (r) => {
        kanjipediaReading = r.reading;

        let htmlVar = '';

        if (r.variant) {
          r.variant = r.variant.trim();
          if (!r.variant.startsWith('<')) {
            r.variant = `<div>${r.variant}</div>`;
          }

          const el = document.createElement('div');
          el.innerHTML = r.variant;
          el.querySelectorAll('img').forEach((it) => {
            it.removeAttribute('style');
          });

          htmlVar = [
            '<li class="kanji-variant-header">異体字</li>',
            `<div class="kanji-variant">${el.innerHTML}</div>`,
          ].join('\n');

          kanjipediaReading += htmlVar;
        }

        kanjipediaReadingInserter.renew();

        return insertDefinition(
          (qType === 'meaning' && sType !== 'Radical'
            ? htmlVar
            : `<ul class="${entryClazz}-kanjipedia-reading-horizontal">${kanjipediaReading}</ul>`) +
            r.definition
              .split('<br>')
              .map((s) => `<p>${s}</p>`)
              .join('\n'),
          r.url,
          'Kanjipedia',
        );
      };

      const r = await db.kanjipedia.get(kanji);
      if (r) {
        return setContent(r);
      }

      const kanjipediaUrlBase = 'https://www.kanjipedia.jp/';
      const regexImgSrc = /img src="/g;
      const replacementImgSrc = 'img width="16px" src="' + kanjipediaUrlBase;
      const regexTxtNormal = /class="txtNormal">/g;
      const replacementTxtNormal = '>.';
      const regexSpaceBeforeCircledNumber = / ([\u2460-\u2473])/g;

      return new Promise((resolve, reject) => {
        function onerror(e) {
          (window.unsafeWindow || window).console.error(arguments);
          reject(e);
        }

        GM_xmlhttpRequest({
          method: 'GET',
          url: kanjipediaUrlBase + 'search?k=' + kanji + '&kt=1&sk=leftHand',
          onerror,
          onload: function (data) {
            const div = document.createElement('div');
            div.innerHTML = data.responseText.replace(
              regexImgSrc,
              replacementImgSrc,
            );

            const firstResult = /** @type {HTMLAnchorElement} */ (
              div.querySelector('#resultKanjiList a')
            );
            if (!firstResult) {
              resolve('');
              return;
            }

            const rawKanjiURL = firstResult.href;
            const kanjiPageURL = kanjipediaUrlBase + rawKanjiURL.slice(25);
            GM_xmlhttpRequest({
              method: 'GET',
              url: kanjiPageURL,
              onerror,
              onload: function (data) {
                const rawResponseNode = document.createElement('div');
                rawResponseNode.innerHTML = data.responseText
                  .replace(regexImgSrc, replacementImgSrc)
                  .replace(regexTxtNormal, replacementTxtNormal)
                  .replace(regexSpaceBeforeCircledNumber, '<br/>$1');

                const readingNode = rawResponseNode.querySelector(
                  '#kanjiLeftSection #onkunList',
                );
                if (!readingNode) return;

                // Okurigana dot removal, so that it can be read as a vocabulary with Yomichan
                readingNode.querySelectorAll('span').forEach((it) => {
                  const text = it.innerText;
                  if (text[0] === '.') {
                    it.innerText = text.substring(1);
                    it.classList.add('okurigana');
                    it.style.color = '#ab9b96';
                  }
                });

                const r = {
                  id: kanji,
                  url: kanjiPageURL,
                  reading: readingNode.innerHTML,
                  definition: Array.from(
                    rawResponseNode.querySelectorAll('#kanjiRightSection p'),
                  )
                    .map((p) => p.innerHTML)
                    .join('\n'),
                  variant: (() => {
                    const vs = [
                      ...rawResponseNode.querySelectorAll('#kanjiOyaji'),
                      ...rawResponseNode.querySelectorAll('.subKanji'),
                    ].filter(
                      (n) => n.textContent !== decodeURIComponent(kanji || ''),
                    );

                    if (!vs.length) return '';

                    vs.map((v) => {
                      v.classList.add('kanji-variant');
                      v.querySelectorAll('img').forEach((img) => {
                        img.removeAttribute('width');
                      });
                    });

                    return vs.map((v) => v.innerHTML).join('\n');
                  })(),
                };

                db.kanjipedia.add(r);
                resolve(setContent(r));
              },
            });
          },
        });
      });
    }

    /**
     *
     * @param {string} vocab
     * @returns {Promise<string>}
     */
    async function searchWeblio(vocab) {
      /**
       *
       * @param {EntryWeblio} [r]
       */
      const setContent = (r) => {
        if (!r || !r.definitions.length) {
          if (kanji) {
            return insertDefinition(
              `No entries found. Try <a class="external" href="https://en.wiktionary.org/wiki/${kanji}" target="_blank" rel="noopener noreferrer">${kanji} - Wiktionary</a>`,
              '',
              'Wiktionary',
            );
          }

          return '';
        }
        const reYomi = /(読み方：)([\p{sc=Katakana}\p{sc=Hiragana}ー]+)/gu;
        const makeYomiSpoiler = (s) =>
          qType === 'meaning' && sType !== 'Radical'
            ? s
                .replace(reYomi, '$1<span class="spoiler keep-10em">$2</span>')
                .replace(/<p(>.*?［[音訓]］.*?<\/p>)/s, '<p class="spoiler"$1')
            : s;

        const sortedDef = r.definitions
          .sort((t1, t2) => {
            /**
             *
             * @param {string} t
             * @returns {number}
             */
            const fn = (t) => {
              let isKanji = /［[音訓]］/.exec(t);
              if (kanji && isKanji) return -10;

              reYomi.lastIndex = 0;
              const m = reYomi.exec(t);
              if (m) {
                if (!reading.length) return 0;
                if (isKanji) return reading.length;

                let readingIdx = reading.indexOf(m[2]);
                if (readingIdx === -1) return 100;

                if (isSuffix && t.includes('接尾')) {
                  readingIdx -= 0.5;
                }

                if (isSuru && t.includes('スル')) {
                  readingIdx -= 0.5;
                }

                return readingIdx;
              }

              return 1000;
            };
            return fn(t1) - fn(t2);
          })
          .map((html) => {
            if (!HTML_MAX_CHAR || html.length < HTML_MAX_CHAR) {
              return makeYomiSpoiler(html);
            }

            const div = document.createElement('div');
            div.innerHTML = makeYomiSpoiler(html.substring(0, HTML_MAX_CHAR));

            const mark = document.createElement('mark');
            mark.style.cursor = 'pointer';
            mark.setAttribute('data-html', html);
            mark.textContent = '...';

            html = div.outerHTML.replace(
              /<\/div>$/,
              mark.outerHTML.replace(
                /^<mark /,
                '$&' +
                  'onclick="parentElement.innerHTML=getAttribute(\'data-html\')" ',
              ) + '$&',
            );
            div.remove();

            return html;
          });

        let vocabDefinition = sortedDef.splice(0, MAX_ENTRIES).join('<hr>');

        if (sortedDef.length) {
          vocabDefinition += `<details><summary>Show more</summary>${sortedDef.join(
            '<hr>',
          )}</details>`;
        }

        return insertDefinition(vocabDefinition, r.url, 'Weblio');
      };

      const r = await db.weblio.get(vocab);
      if (r) {
        return setContent(r);
      }

      const vocabPageURL = 'https://www.weblio.jp/content/' + vocab;

      return new Promise((resolve, reject) => {
        function onerror(e) {
          (window.unsafeWindow || window).console.error(arguments);
          setContent();
          reject(e);
        }

        GM_xmlhttpRequest({
          method: 'GET',
          url: vocabPageURL,
          onerror,
          onload: function (data) {
            if (!data.responseText) {
              resolve(setContent());
              return;
            }

            const div = document.createElement('div');
            div.innerHTML = data.responseText;
            const definitions = Array.from(div.querySelectorAll('.kiji'))
              .flatMap((el) => {
                return Array.from(el.children).filter(
                  (el) => el instanceof HTMLDivElement,
                );
              })
              .map((el) => {
                if (el instanceof HTMLElement) {
                  if (el.querySelector('script')) return '';
                  return el.innerHTML;
                }
                return '';
              })
              .filter((s) => s);
            div.remove();

            if (!definitions.length) {
              resolve(setContent());
              return;
            }

            const r = {
              id: vocab,
              url: vocabPageURL,
              definitions,
            };

            db.weblio.add(r);
            resolve(setContent(r));
          },
        });
      });
    }

    if (kanji) {
      await Promise.allSettled([searchKanjipedia(kanji), searchWeblio(kanji)]);
    } else if (vocab) {
      await searchWeblio(vocab);
    }
  }

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Triggering updates on lessons and reviews

  const kanjipediaInserter = wkItemInfo
    .on('lesson,lessonQuiz,review,extraStudy,itemPage')
    .forType('kanji,radical')
    .under('meaning')
    .spoiling('meaning')
    .notify((state) => {
      if (
        !(
          kanji &&
          (kanji === state.characters ||
            kanji === getRadicalKanji(state.meaning))
        )
      ) {
        return;
      }

      if (!kanjipediaDefinition) return;

      const title = 'Kanjipedia Explanation';
      if (
        AFTER_EN_MEANING ||
        state.on === 'itemPage' ||
        (state.type === 'radical' && state.on === 'lesson')
      ) {
        state.injector.append(title, kanjipediaDefinition);
      } else {
        state.injector.appendAtTop(title, kanjipediaDefinition);
      }
    });

  const weblioInserter = wkItemInfo
    .on('lesson,lessonQuiz,review,extraStudy,itemPage')
    .under('meaning')
    .spoiling('meaning')
    .notify((state) => {
      if (state.on === 'itemPage') {
        qType = '';
      }

      const isVocabulary = state.type
        .toLocaleLowerCase()
        .endsWith('vocabulary');

      let fixedCharacters = state.characters;
      if (isVocabulary) {
        fixedCharacters = fixVocab(state.characters);
      }

      if (state.on === 'itemPage') {
        if (isVocabulary) {
          kanji = '';
          if (vocab !== fixedCharacters) {
            reading = state.reading;
            vocab = fixedCharacters;

            updateInfo();
            return;
          }
        } else {
          vocab = '';
          reading = [];
          const newKanji = state.characters || getRadicalKanji(state.meaning);

          if (kanji !== newKanji) {
            kanji = newKanji;
            updateInfo();
            return;
          }

          if (!kanji) return;
        }
      } else {
        if (isVocabulary) {
          if (fixedCharacters !== vocab) return;
        } else if (kanji) {
          if (
            typeof state.characters === 'string'
              ? kanji !== state.characters
              : kanji !== getRadicalKanji(state.meaning)
          )
            return;
        }
      }

      if (!weblioDefinition) return;

      const title = 'Weblio Explanation';
      if (
        AFTER_EN_MEANING ||
        state.on === 'itemPage' ||
        (state.type === 'radical' && state.on === 'lesson')
      ) {
        state.injector.append(title, weblioDefinition);
      } else {
        state.injector.appendAtTop(title, weblioDefinition);
      }
    });

  let kanjipediaReadingPanelInterval = 0;

  const kanjipediaReadingInserter = wkItemInfo
    .on('lesson,lessonQuiz,review,extraStudy,itemPage')
    .forType('kanji')
    .under('reading')
    .notify((state) => {
      if (!(kanji && kanji === state.characters)) {
        return;
      }

      if (!kanjipediaReading) return;
      clearInterval(kanjipediaReadingPanelInterval);

      if (state.on === 'itemPage') {
        document
          .querySelectorAll(`.${entryClazz}-reading`)
          .forEach((el) => el.remove());

        const dst = document.querySelector('.subject-readings');

        if (dst) {
          const el = document.createElement('div');
          el.className = `subject-readings__reading subject-readings__reading--primary ${entryClazz} ${entryClazz}-reading`;

          const h = document.createElement('h3');
          h.className = 'subject-readings__reading-title';
          h.innerText = 'Kanjipedia';

          const content = document.createElement('div');
          content.className = 'subject-readings__reading-items';
          content.lang = 'ja';
          content.innerHTML = kanjipediaReading;

          el.append(h, content);
          dst.append(el);
        }
      } else {
        kanjipediaReadingPanelInterval = setInterval(() => {
          const node = document.querySelector('.subject-readings');
          if (node) {
            if (node.querySelector(`.${entryClazz}`)) {
              return clearInterval(kanjipediaReadingPanelInterval);
            }
            node.insertAdjacentHTML(
              'beforeend',
              '<div class="subject-readings__reading subject-readings__reading--primary ' +
                entryClazz +
                ' ' +
                entryClazz +
                '-reading' +
                '"><h3 class="subject-readings__reading-title">Kanjipedia</h3>' +
                `<p class="subject-readings__reading-items" lang="ja">${kanjipediaReading}</p>` +
                '</div>',
            );
            return clearInterval(kanjipediaReadingPanelInterval);
          }
        }, 100);
      }
    });

  /**
   *
   * @param {string[]} meanings
   * @returns {string | undefined}
   */
  function getRadicalKanji(meanings) {
    const [en] = meanings;
    if (!en) return;
    const ks = radicalMap[en];
    if (!ks) return;
    console.log(
      `${entryClazz}: ${
        ks.length
          ? `converted ${en} to ${ks.join(', ')}`
          : `cannot convert ${en} to Kanji`
      }`,
    );
    return ks[0];
  }
})();