미디어위키:Gadget-dictionary.js

/* ▣ Dictionary “검색 전용” 가젯 ▣
   - 페이지에 .dictionary-container 가 있을 때만 동작
   - 표 없이: 검색 → 결과 카드 or “없음” 메시지
-------------------------------------------------- */
mw.loader.using(
  ['oojs-ui-core', 'oojs-ui.styles.icons-interactions'],
  function () {

    /* 사전 JSON 로드 */
    var jsonNode = document.getElementById('dictionary-json');
    if (!jsonNode) return;                        // 사전 없는 페이지
    var dictRaw  = JSON.parse(jsonNode.textContent);
    var dict     = {};                            // 소문자 키 → 정의
    Object.keys(dictRaw).forEach(function (k) {
      dict[k.toLowerCase()] = dictRaw[k];
    });

    /* 한 번만 카드/없음 CSS 삽입 */
    if (!document.getElementById('dict-card-style')) {
      mw.util.addCSS(`
        .dict-card    {padding:12px 16px;border:1px solid #ccc;border-radius:8px;
                       background:var(--background-color, #f9f9f9);}
        .dict-card .term{font-weight:600;font-size:1.1em;margin-right:.4em;}
        .dict-none    {padding:8px;color:#d33;}
      `).id = 'dict-card-style';
    }

    /* 콘텐츠 훅: 컨테이너마다 UI 주입 */
    mw.hook('wikipage.content').add(function ($content) {
      $content.find('.dictionary-container').each(function () {
        var $box = $(this);
        if ($box.children().length) return;       // 중복 방지

        /* 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) 검색 실행 */
        function run() {
          var q = input.getValue().trim();
          var key = q.toLowerCase();

          if (!q) {
            $result.empty();
            return;
          }
          if (dict.hasOwnProperty(key)) {
            $result.html(
              '<div class="dict-card">' +
                '<span class="term">' + mw.html.escape(q) + '</span>' +
                '<span class="def">'  + mw.html.escape(dict[key]) + '</span>' +
              '</div>'
            );
          } else {
            $result.html('<div class="dict-none">해당 단어가 없습니다.</div>');
          }
        }

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