미디어위키:Gadget-dictionary.js

/* ▣ Dictionary gadget ▣
   ─ 검색창+버튼 / Enter
   ─ 전체·부분·완전 일치 모드
-------------------------------------------------- */
mw.loader.using( [
    'mediawiki.util',
    'oojs-ui-core',
    'oojs-ui.styles.icons-interactions'
], function () {

    /* ① 사전 JSON 읽어 두기 (key → 정의, 소문자 기준) */
    var dictHolder  = document.getElementById( 'dictionary-json' );
    var dictData    = dictHolder ? JSON.parse( dictHolder.textContent ) : {};
    var dictLower   = {};
    Object.keys( dictData ).forEach( function (k) {
        dictLower[ k.toLowerCase() ] = dictData[ k ];
    } );

    /* ② 페이지 내용이 로드·갱신될 때마다 실행 */
    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;  // 중복 생성 방지

        /* ── 검색창 + 버튼 ── */
        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', '8px' );

        $table.before( field );

        /* ── “완전 일치 전용” 표시 행(처음에는 숨김) ── */
        var $exactRow = $( '<tr class="dict-exact" style="display:none"><td colspan="2"></td></tr>' );
        $table.find( 'tr' ).first().after( $exactRow );  // 헤더 바로 아래에 삽입
        var $exactCell = $exactRow.children( 'td' );

        /* ── 필터 함수 ── */
        function applyFilter() {
            var q = input.getValue().trim();
            var qLow = q.toLowerCase();

            /* 1) 빈 검색어 → 모든 행 표시, exact 숨김 */
            if ( !q ) {
                $exactRow.hide();
                $table.find( 'tr' ).show();
                return;
            }

            /* 2) 완전 일치 → 전부 숨기고 한 줄로 치환 */
            if ( dictLower.hasOwnProperty( qLow ) ) {
                $table.find( 'tr' ).not( '.dict-exact' ).not( ':has(th)' ).hide();
                $exactCell.html( '<b>' + mw.html.escape( q ) + '</b> : ' +
                                 mw.html.escape( dictLower[ qLow ] ) );
                $exactRow.show();
                return;
            }

            /* 3) 부분 일치 → 기존 방식 */
            $exactRow.hide();
            $table.find( 'tr' ).each( function () {
                var $row = $( this );
                if ( $row.is( '.dict-exact' ) || $row.find( 'th' ).length ) return;

                var term = $row.children( 'td' ).eq( 0 ).text().toLowerCase();
                var defi = $row.children( 'td' ).eq( 1 ).text().toLowerCase();
                $row.toggle( term.includes( qLow ) || defi.includes( qLow ) );
            } );
        }

        /* ── 이벤트 연결 ── */
        button.on( 'click', applyFilter );   // 버튼
        input.on( 'enter', applyFilter );    // Enter 키
    } );
} );