미디어위키:Gadget-dictionary.js: 두 판 사이의 차이

mw.loader.using(
  ['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.api'],

  function () {
    var jsonNode = document.getElementById('dictionary-json');
    if (!jsonNode) return; 
    var dictRaw  = JSON.parse(jsonNode.textContent);
    var dict     = {};  

    Object.keys(dictRaw).forEach(function (k) {
      const normKey = k.normalize('NFC').toLowerCase(); 
      dict[normKey] = {
        raw: k,
        def: dictRaw[k],
        rawNorm: k.normalize('NFC').toLowerCase(),
        defNorm: dictRaw[k].normalize('NFC').toLowerCase()
      };
    });

    if (!document.getElementById('dict-card-style')) {
      mw.util.addCSS(`
        .dictionary-container .oo-ui-inputWidget-input, .dictionary-container .oo-ui-buttonElement-button {
            background: var(--bg) !important;
            color: var(--text) !important;
            border: 1px solid var(--border) !important;
            height: 36px !important;
            padding-top: 6.25px !important;
            padding-bottom: 6.25px !important;
            font-family: 'Source', 'Noto Sans KR', 'Noto Sans', 'Noto Sans CJK KR'; 
        }
        .oo-ui-inputWidget-input {
            border-radius: 0.5rem 0 0 0.5rem !important;
            padding-left: 11px !important;
        }
        .oo-ui-buttonElement-button {
            border-radius: 0 0.5rem 0.5rem 0 !important;
            padding-top: 6px;
            padding-bottom: 6px;
            width: 100px;
        }
        .dict-card {
            padding: 20px 20px 8px !important;
            border:1px solid light-dark(#ccc, #555);
            border-radius:0.8rem;
            margin: 1em 0 0.5em !important;
            background:var(--altbg); 
            padding-top: 
            font-family: 'Source', 'Noto Sans KR', 'Noto Sans', 'Noto Sans CJK KR'; 
        }
        .dict-card .term p, .dict-card .def p,
        .dict-card .term p *, .dict-card .def p * {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            font-family: 'Source', 'Noto Sans KR', 'Noto Sans', 'Noto Sans CJK KR'; 
        }
        .dict-card .term {
            font-weight: 600;
            font-size: 1.5em;
            margin-right: .4em;
            padding: 8px;
            padding-bottom: 8px;
            padding-top: 6px;
        }
        .dict-card .def {
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 10px;
            }
        .dict-none {
            padding: 8px;
            color: light-dark(#d33, HSL(0, 71%, 75%));
        }
        .dict-result { margin-top: 5px; }
      `).id = 'dict-card-style';
    }

    var api = new mw.Api();

    function debounce(fn, delay) {
      let timer;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
      };
    }

    function parseWikitext(wikitext) {
      return api.get({
        action: 'parse',
        format: 'json',
        contentmodel: 'wikitext',
        prop: 'text',
        text: wikitext,
        disablelimitreport: 1,
        disableeditsection: 1,
        pst: 0, wrapshtml: 1
      }).then(function (data) {
        return (data.parse && data.parse.text) ? data.parse.text['*'] : mw.html.escape(wikitext);
      });
    }

    function matchLevel(entry, q) {
      if (entry.rawNorm === q) return 1;
      if (entry.rawNorm.startsWith(q)) return 2;
      if (entry.rawNorm.includes(q)) return 3;
      if (entry.defNorm.includes(q)) return 4;
      return 0;
    }

    async function renderResults($result, results) {
      if (!results.length) {
        $result.html('<div class="dict-none">해당 단어가 없습니다.</div>');
        return;
      }

      const chunks = await Promise.all(
        results.map(async r => {
          const termHtml = await parseWikitext(r.entry.raw);
          const defHtml  = await parseWikitext(r.entry.def);

          return `<div class="term">${termHtml}</div><div class="def">${defHtml}</div>`;
        })
      );

      $result.html(chunks.join(''));
    }

    mw.hook('wikipage.content').add(function ($content) {
      $content.find('.dictionary-container').each(function () {
        var $box = $(this);
        if ($box.children().length) return; 

        var input  = new OO.ui.TextInputWidget({ placeholder: '검색어 입력…', icons: ['search'] });
        var button = new OO.ui.ButtonWidget({ label: '검색', flags: ['progressive'] });
        var field  = new OO.ui.ActionFieldLayout(input, button, {align:'top'})
                     .$element.css('margin-bottom','10px');

        var $result = $('<div class="dict-result"></div>');
        $box.append(field, $result);

        function run() {
          const qRaw = input.getValue();
          const q = qRaw.trim().normalize('NFC').toLowerCase();

          if (!q) {
            $result.empty();
            return;
          }

          const hits = [];

          Object.values(dict).forEach(entry => {
            const level = matchLevel(entry, q);
            if (level) {
              hits.push({ entry, level });
            }
          });

          hits.sort((a, b) => {
            if (a.level !== b.level) return a.level - b.level;
            return a.entry.rawNorm.localeCompare(b.entry.rawNorm);
          });

          renderResults($result, hits.slice(0, 11));
        }

        button.on('click', run);
        input.on('enter', run);
        const runDebounced = debounce(run, 200);
        input.on('change', runDebounced);
      });
    });
  }
);