미디어위키:Gadget-dictionary.js

/* ▣ Dictionary gadget ▣
   검색창 + 버튼 → 클릭(또는 Enter) 때만 필터 적용
-------------------------------------------------- */
mw.loader.using( [
	'oojs-ui-core',
	'oojs-ui.styles.icons-interactions'
], function () {

	/* 페이지 내용이 로드·갱신될 때마다 실행 */
	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' ],
			indicator: null
		} );

		var button = new OO.ui.ButtonWidget( {
			label: '검색',
			icon: 'search',
			flags: [ 'progressive' ]
		} );

		/* OOUI ActionFieldLayout → 두 요소를 한 줄에 배치 */
		var field  = new OO.ui.ActionFieldLayout( input, button, {
			align: 'top'
		} ).$element
		  .addClass( 'dict-search-wrapper' )
		  .css( 'margin-bottom', '8px' );

		$table.before( field );

		/* ---------- 2) 필터 함수 ---------- */
		function applyFilter() {
			var q = input.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 ) );
			} );
		}

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