미디어위키:Gadget-dictionary.js 문서 원본 보기

/* ▣ Dictionary gadget ▣
   * 표(class="mw-dictionary")가 있는 페이지에만 작동
   * 검색창은 OOUI → 실패 시 HTML <input>로 폴백
-------------------------------------------------- */
mw.loader.using( [
    'mediawiki.util',
    'oojs-ui-core',
    'oojs-ui.styles.icons-interactions'
], function () {

    /* 페이지 내용이 처음 로드되거나, Ajax로 다시 삽입될 때마다 실행 */
    mw.hook( 'wikipage.content' ).add( function ( $content ) {

        var $table = $content.find( '.mw-dictionary' ).first();
        if ( !$table.length ) return;                          // 표가 없다면 skip
        if ( $table.prev( '.dict-search-wrapper' ).length ) return; // 중복 생성 방지

        /* ---- 1) 검색창 만들기 ---- */
        var $wrapper = $( '<div>' ).addClass( 'dict-search-wrapper' )
                                   .css( 'margin-bottom', '8px' );

        var makeFilter = function ( getValue ) {
            return function () {
                var q = getValue().trim().toLowerCase();
                $table.find( 'tr' ).each( function () {
                    var $row = $( this );
                    if ( $row.find( 'th' ).length ) return;    // 헤더 row
                    var term = $row.children( 'td' ).eq(0).text().toLowerCase();
                    var defi = $row.children( 'td' ).eq(1).text().toLowerCase();
                    $row.toggle( !q || term.includes( q ) || defi.includes( q ) );
                } );
            };
        };

        /* 1-A) OOUI 위젯 시도 */
        try {
            var widget = new OO.ui.TextInputWidget( {
                placeholder: '단어·뜻 검색…',
                icons: [ 'search' ],
                indicator: null
            } );
            widget.on( 'change', makeFilter( function () {
                return widget.getValue();
            } ) );
            $wrapper.append( widget.$element );
        } catch ( e ) {
            /* 1-B) 실패하면 순수 HTML 입력창 */
            var $input = $( '<input type="search" placeholder="검색…">' )
                          .css( { width: '100%', padding: '4px' } );
            $input.on( 'input', makeFilter( function () {
                return $input.val();
            } ) );
            $wrapper.append( $input );
        }

        $table.before( $wrapper );   // 표 앞에 검색창 끼우기
    } );
} );