미디어위키:Gadget-dictionary.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

/* ▣ Dictionary “검색 전용” 가젯 ▣
   - 표 없이: 검색 → 결과 카드 or “없음” 메시지
   - 단어(키)에 들어 있는 위키문법을 실제로 렌더링
-------------------------------------------------- */
mw.loader.using(
  ['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.api'],
  function () {

    /* ────────── Ⅰ. 사전 JSON 로드 ────────── */
    var jsonNode = document.getElementById('dictionary-json');
    if (!jsonNode) return;                        // 사전 없는 페이지
    var dictRaw  = JSON.parse(jsonNode.textContent);
    var dict     = {};                            // 소문자+정규화 키 → {rawKey, def}

    Object.keys(dictRaw).forEach(function (k) {
      const normKey = k.normalize('NFC').toLowerCase();   // ★ 정규화 추가
      dict[normKey] = { raw: k, def: dictRaw[k] };
    });

    /* ────────── Ⅱ. CSS 삽입(1회) ────────── */
    if (!document.getElementById('dict-card-style')) {
      mw.util.addCSS(`
.oo-ui-inputWidget-input, .oo-ui-buttonElement-button {
background: var(--bg) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
height: 36px !important;
}
.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;
}
        .dict-card    {padding:20px 20px 8px !important; border:1px solid light-dark(#ccc, #555);border-radius:0.8rem;
                       background:var(--altbg); padding-top: }
        .dict-card .term{font-weight:600;font-size:1.5em;margin-right:.4em; padding:8px; padding-bottom: 3px; margin-bottom: -15px; padding-top: 4px; }
.dict-card .def{padding-left:8px; padding-right:8px; margin-bottom: -3px;}
        .dict-none    {padding:8px;color:light-dark(#d33, HSL(0, 71%, 75%));}
      `).id = 'dict-card-style';
    }

    /* ────────── Ⅲ. 위키텍스트 → HTML 파서 헬퍼 ────────── */
    var api = new mw.Api();
    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);
      });
    }

    /* ────────── Ⅳ. 페이지 로드 때 UI 주입 ────────── */
    mw.hook('wikipage.content').add(function ($content) {
      $content.find('.dictionary-container').each(function () {
        var $box = $(this);
        if ($box.children().length) return;       // 이미 UI가 있음

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

        /* 2) 결과 영역 */
        var $result = $('<div class="dict-result"></div>');
        $box.append(field, $result);

        /* 3) 검색 실행 – 단어·뜻 모두 위키텍스트 → HTML */
        function run() {
          const qRaw  = input.getValue().trim();
          const q     = qRaw.normalize('NFC');        // ★ 정규화 추가
          const keyL  = q.toLowerCase();

          if (!qRaw) {                    // 검색어 비우면 결과 초기화
            $result.empty();
            return;
          }

          if (dict.hasOwnProperty(keyL)) {
            const entry = dict[keyL];

            Promise.all([
              parseWikitext(entry.raw),   // ① 단어
              parseWikitext(entry.def)    // ② 정의
            ]).then(function (parts) {
              const htmlKey = parts[0], htmlDef = parts[1];

              $result.html(
                '<div class="term">' + htmlKey + '</div>' +
                '<div class="def">'  + htmlDef + '</div>'
              );
            }).catch(function () {
              $result.html(
                '<div class="term">' + mw.html.escape(entry.raw) + '</div>' +
                '<div class="def">'  + mw.html.escape(entry.def) + '</div>'
              );
            });

          } else {
            $result.html('<div class="dict-none">해당 단어가 없습니다.</div>');
          }
        }

        button.on('click', run);
        input.on('enter', run);
      });
    });
  }
);