미디어위키:Gadget-dictionary.js

/* ▣ Dictionary gadget ▣
   ─ 검색창 + 버튼/Enter
   ─ 완전 일치 → 카드형 결과
   ─ 미일치 → “단어가 없습니다” 한 줄
-------------------------------------------------- */
mw.loader.using(
  ['oojs-ui-core', 'oojs-ui.styles.icons-interactions'],
  function () {

    /* Ⅰ. 사전 JSON을 메모리에 로드 (소문자 키) */
    var dataNode   = document.getElementById('dictionary-json');
    var dict       = dataNode ? JSON.parse(dataNode.textContent) : {};
    var dictLower  = {};
    Object.keys(dict).forEach(function (k) {
      dictLower[k.toLowerCase()] = dict[k];
    });

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

    /* Ⅲ. 페이지(또는 Ajax 미리보기)가 로드될 때마다 */
    mw.hook('wikipage.content').add(function ($content) {

      var $table = $content.find('.mw-dictionary').first();
      if (!$table.length) return;
      if ($table.prev('.dict-search-wrapper').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.addClass('dict-search-wrapper')
                   .css('margin-bottom', '10px');
      $table.before(field);

      /* 2) 결과 행 2종 (카드 / 없음) ─ 처음에는 숨김 */
      var $cardRow = $('<tr class="dict-row-card" style="display:none"><td colspan="2"></td></tr>');
      var $noneRow = $('<tr class="dict-row-none" style="display:none"><td colspan="2" class="dict-no-match">해당 단어가 없습니다.</td></tr>');
      var $tbody   = $table;                 // Lua 모듈이 <tbody> 없이 직접 <tr> 나열했음
      $tbody.find('tr').first().after($cardRow, $noneRow);  // 헤더 바로 뒤 삽입
      var $cardCell = $cardRow.children('td');

      /* 3) 검색 로직 */
      function apply() {
        var key   = input.getValue().trim();
        var lower = key.toLowerCase();

        /* 입력 없으면 표 리셋 */
        if (!key) {
          $cardRow.hide(); $noneRow.hide();
          $table.find('tr').not('.dict-row-card, .dict-row-none').show();
          return;
        }

        /* 완전 일치 */
        if (dictLower.hasOwnProperty(lower)) {
          var defi = mw.html.escape(dictLower[lower]);
          $cardCell.html(
            '<div class="dict-result-card">' +
              '<span class="term">' + mw.html.escape(key) + '</span>' +
              '<span class="def">'  + defi + '</span>' +
            '</div>'
          );
          $cardRow.show();   $noneRow.hide();
          $table.find('tr').not('.dict-row-card, .dict-row-none').not(':has(th)').hide();
          return;
        }

        /* 미일치 */
        $cardRow.hide();
        $noneRow.show();
        $table.find('tr').not('.dict-row-card, .dict-row-none').not(':has(th)').hide();
      }

      /* 4) 이벤트 연결 */
      button.on('click', apply);
      input.on('enter', apply);
    });
  }
);