미디어위키:Gadget-newtoolbar.js: 두 판 사이의 차이

/* MediaWiki:Gadget-NewToolbar.js */
( function ( mw, $ ) {
	'use strict';

	/**
	 * 선택 영역을 앞뒤 텍스트로 감싸기 (간단 버전)
	 */
	function surroundSelection( textarea, before, after ) {
		var $ta = $( textarea );
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;

		if ( start == null || end == null ) {
			// 구형 브라우저 fallback (거의 안 씀)
			$ta.text( $ta.text() + before + after );
			return;
		}

		var text = $ta.val();
		var selected = text.slice( start, end );
		var newText = text.slice( 0, start ) + before + selected + after + text.slice( end );

		$ta.val( newText );

		// 커서/선택 다시 잡기
		var newStart = start + before.length;
		var newEnd = newStart + selected.length;
		textarea.selectionStart = newStart;
		textarea.selectionEnd = newEnd;
		$ta.trigger( 'change' );
	}

	/**
	 * 현재 커서 위치에 텍스트 삽입
	 */
	function insertAtCursor( textarea, snippet ) {
		var $ta = $( textarea );
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		var text = $ta.val();

		if ( start == null || end == null ) {
			$ta.val( text + snippet );
			return;
		}

		var newText = text.slice( 0, start ) + snippet + text.slice( end );
		$ta.val( newText );
		var pos = start + snippet.length;
		textarea.selectionStart = textarea.selectionEnd = pos;
		$ta.trigger( 'change' );
	}
	
		/**
	 * 간단 알림 (mw.notify 있으면 그걸 쓰고, 없으면 alert)
	 */
	function notify( msg ) {
		if ( mw && mw.notify ) {
			mw.notify( msg );
		} else {
			alert( msg );
		}
	}

	/**
	 * 찾기/바꾸기 상태
	 */
	var findState = {
		open: false
	};

	/**
	 * 찾기/바꾸기 패널 만들기 (없으면 생성, 있으면 그대로 반환)
	 */
	function createFindPanel( textarea ) {
		var $panel = $( '#ntb-find-panel' );
		if ( $panel.length ) {
			return $panel;
		}

		$panel = $( '<div>' )
			.attr( 'id', 'ntb-find-panel' )
			.addClass( 'ntb-find-panel' );

		var $rowFind = $( '<div>' ).addClass( 'ntb-find-row' );
		$rowFind.append(
			$( '<label>' ).text( '찾기' ),
			$( '<input>' ).attr( { type: 'text', id: 'ntb-find-text' } )
		);

		var $rowReplace = $( '<div>' ).addClass( 'ntb-find-row' );
		$rowReplace.append(
			$( '<label>' ).text( '바꾸기' ),
			$( '<input>' ).attr( { type: 'text', id: 'ntb-replace-text' } )
		);

		var $btns = $( '<div>' ).addClass( 'ntb-find-buttons' );
		var $btnNext = $( '<button>' ).attr( 'type', 'button' ).text( '다음 찾기' );
		var $btnReplace = $( '<button>' ).attr( 'type', 'button' ).text( '바꾸기' );
		var $btnReplaceAll = $( '<button>' ).attr( 'type', 'button' ).text( '모두 바꾸기' );
		var $btnClose = $( '<button>' ).attr( 'type', 'button' ).text( '닫기' );

		$btns.append( $btnNext, $btnReplace, $btnReplaceAll, $btnClose );
		$panel.append( $rowFind, $rowReplace, $btns );

		// 버튼 동작 정의
		$btnNext.on( 'click', function () {
			findNext( textarea );
		} );

		$btnReplace.on( 'click', function () {
			replaceOne( textarea );
		} );

		$btnReplaceAll.on( 'click', function () {
			replaceAll( textarea );
		} );

		$btnClose.on( 'click', function () {
			closeFindPanel();
		} );

		return $panel;
	}

	/**
	 * 찾기/바꾸기 패널 열기/닫기 토글
	 */
	function toggleFindPanel( textarea ) {
		var $panel = createFindPanel( textarea );
		if ( findState.open ) {
			closeFindPanel();
		} else {
			openFindPanel( $panel, textarea );
		}
	}

	function openFindPanel( $panel, textarea ) {
		// 툴바 바로 아래에 붙이기
		var $toolbar = $( '#ntb-toolbar' );
		if ( !$panel.parent().length ) {
			$toolbar.after( $panel );
		}
		$panel.show();
		findState.open = true;
		findState.term = '';
		findState.lastIndex = 0;

		// 현재 선택 텍스트가 있으면 "찾기" 칸에 채우기
		var sel = textarea.value.slice( textarea.selectionStart, textarea.selectionEnd );
		if ( sel ) {
			$( '#ntb-find-text' ).val( sel );
		}
		$( '#ntb-find-text' ).focus().select();
	}

	function closeFindPanel() {
		var $panel = $( '#ntb-find-panel' );
		$panel.hide();
		findState.open = false;
	}

	/**
	 * 다음 찾기
	 */
	function findNext( textarea ) {
		var $findInput = $( '#ntb-find-text' );
		if ( !$findInput.length ) {
			return;
		}
		var term = $findInput.val();
		if ( !term ) {
			notify( '찾을 문자열을 입력하세요.' );
			return;
		}

		var text = textarea.value;
		var startFrom;

		// 검색어가 바뀌면 처음부터
		if ( findState.term !== term ) {
			findState.term = term;
			findState.lastIndex = textarea.selectionEnd || 0;
		}

		startFrom = textarea.selectionEnd || 0;

		var idx = text.indexOf( term, startFrom );
		if ( idx === -1 && startFrom !== 0 ) {
			// 못 찾으면 처음부터 다시
			idx = text.indexOf( term, 0 );
		}

		if ( idx === -1 ) {
			notify( '더 이상 찾을 문자열이 없습니다.' );
			return;
		}

		textarea.selectionStart = idx;
		textarea.selectionEnd = idx + term.length;
		textarea.focus();
		findState.lastIndex = idx + term.length;
	}

	/**
	 * 현재 선택된 항목 한 번만 바꾸기
	 */
	function replaceOne( textarea ) {
		var $findInput = $( '#ntb-find-text' );
		var $replaceInput = $( '#ntb-replace-text' );
		if ( !$findInput.length || !$replaceInput.length ) {
			return;
		}

		var term = $findInput.val();
		var replacement = $replaceInput.val();
		if ( !term ) {
			notify( '찾을 문자열을 입력하세요.' );
			return;
		}

		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		var text = textarea.value;
		var selected = text.slice( start, end );

		if ( selected && selected === term ) {
			// 현재 선택 영역이 검색어와 일치하면 교체
			var newText = text.slice( 0, start ) + replacement + text.slice( end );
			textarea.value = newText;
			var newEnd = start + replacement.length;
			textarea.selectionStart = start;
			textarea.selectionEnd = newEnd;
			textarea.focus();
			findState.lastIndex = newEnd;
		} else {
			// 선택이 없거나 일치하지 않으면 "다음 찾기" 먼저
			findNext( textarea );
		}
	}

	/**
	 * 전체 텍스트 모두 바꾸기
	 */
	function replaceAll( textarea ) {
		var $findInput = $( '#ntb-find-text' );
		var $replaceInput = $( '#ntb-replace-text' );
		if ( !$findInput.length || !$replaceInput.length ) {
			return;
		}

		var term = $findInput.val();
		var replacement = $replaceInput.val();
		if ( !term ) {
			notify( '찾을 문자열을 입력하세요.' );
			return;
		}

		if ( term === replacement ) {
			notify( '같은 문자열로 바꾸려고 합니다.' );
			return;
		}

		var text = textarea.value;
		if ( text.indexOf( term ) === -1 ) {
			notify( '문서 안에 해당 문자열이 없습니다.' );
			return;
		}

		// 간단하게 split/join 사용
		var count = ( text.match( new RegExp( term.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ), 'g' ) ) || [] ).length;
		textarea.value = text.split( term ).join( replacement );
		textarea.selectionStart = textarea.selectionEnd = 0;
		textarea.focus();
		notify( count + '개를 모두 바꿨습니다.' );
	}

	/**
	 * 버튼 생성 헬퍼
	 */
	function createButton( opts ) {
		var $btn = $( '<button>' )
			.attr( 'type', 'button' )
			.addClass( 'ntb-button' )
			.append(
				$( '<span>' )
					.addClass( 'ntb-icon ' + ( opts.icon || '' ) )
			)
			.append(
				$( '<span>' )
					.addClass( 'ntb-label' )
					.text( opts.label )
			)
			.on( 'click', function () {
				var textarea = document.getElementById( 'wpTextbox1' );
				if ( textarea && typeof opts.onClick === 'function' ) {
					opts.onClick( textarea );
					textarea.focus();
				}
			} );

		if ( opts.title ) {
			$btn.attr( 'title', opts.title );
		}

		return $btn;
	}

	/**
	 * 새 툴바 초기화
	 */
	function initNewToolbar( $textarea ) {
		var $oldToolbar = $( '#wikiEditor-ui-toolbar' );

		// wikiEditor 없는 페이지 or 이미 생성된 경우
		if ( !$oldToolbar.length || $( '#ntb-toolbar' ).length ) {
			return;
		}

		var $toolbar = $( '<div>' )
			.attr( 'id', 'ntb-toolbar' )
			.addClass( 'ntb-toolbar' );

		// --- 그룹 1: 텍스트 스타일 ---
		var $groupText = $( '<div>' )
			.addClass( 'ntb-group ntb-group-text' )
			.append(
				$( '<span>' ).addClass( 'ntb-group-label' ).text( '텍스트' )
			);

		$groupText.append(
			createButton( {
				icon: 'ntb-icon-bold',
				label: '굵게',
				title: "'''굵게'''",
				onClick: function ( ta ) {
					surroundSelection( ta, "'''", "'''" );
				}
			} ),
			createButton( {
				icon: 'ntb-icon-italic',
				label: '기울임',
				title: "''기울임''",
				onClick: function ( ta ) {
					surroundSelection( ta, "''", "''" );
				}
			} )
		);

		// --- 그룹 2: 문단/목록 ---
		var $groupBlock = $( '<div>' )
			.addClass( 'ntb-group ntb-group-block' )
			.append(
				$( '<span>' ).addClass( 'ntb-group-label' ).text( '문단' )
			);

		$groupBlock.append(
			createButton( {
				icon: 'ntb-icon-heading',
				label: '제목',
				title: '== 문단 제목 ==',
				onClick: function ( ta ) {
					insertAtCursor( ta, '\n== 새 문단 제목 ==\n' );
				}
			} ),
			createButton( {
				icon: 'ntb-icon-ul',
				label: '글머리 목록',
				title: '* 글머리',
				onClick: function ( ta ) {
					insertAtCursor( ta, '\n* 항목\n' );
				}
			} ),
			createButton( {
				icon: 'ntb-icon-ol',
				label: '번호 목록',
				title: '# 번호 항목',
				onClick: function ( ta ) {
					insertAtCursor( ta, '\n# 항목\n' );
				}
			} )
		);

		// --- 그룹 3: 삽입 ---
		var $groupInsert = $( '<div>' )
			.addClass( 'ntb-group ntb-group-insert' )
			.append(
				$( '<span>' ).addClass( 'ntb-group-label' ).text( '삽입' )
			);

		$groupInsert.append(
			createButton( {
				icon: 'ntb-icon-link',
				label: '링크',
				title: '[[문서 링크]] 또는 [https://example.com 외부 링크]',
				onClick: function ( ta ) {
					insertAtCursor( ta, '[[링크 대상|표시 텍스트]]' );
				}
			} ),
			createButton( {
				icon: 'ntb-icon-file',
				label: '파일',
				title: '[[파일:Example.png|thumb|캡션]]',
				onClick: function ( ta ) {
					insertAtCursor( ta, '[[파일:Example.png|thumb|캡션]]' );
				}
			} ),
			createButton( {
				icon: 'ntb-icon-ref',
				label: '각주',
				title: '<ref>내용</ref>',
				onClick: function ( ta ) {
					surroundSelection( ta, '<ref>', '</ref>' );
				}
			} )
		);

		// --- 그룹 4: 기타 도구 ---
		var $groupTools = $( '<div>' )
			.addClass( 'ntb-group ntb-group-tools' )
			.append(
				$( '<span>' ).addClass( 'ntb-group-label' ).text( '도구' )
			);

		$groupTools.append(
			createButton( {
				icon: 'ntb-icon-search',
				label: '찾기/바꾸기',
				title: '문서 안에서 텍스트 찾기/바꾸기',
				onClick: function ( ta ) {
					toggleFindPanel( ta );
				}
			} )
		 );
$groupTools.append(
	createButton( {
		icon: 'ntb-icon-preview',
		label: '미리보기',
		title: '실시간 미리보기 토글',
		onClick: function ( ta ) {
			togglePreview( ta );
		}
	} )
);


		$toolbar
			.append( $groupText )
			.append( $groupBlock )
			.append( $groupInsert )
			.append( $groupTools );

		// 기존 툴바 숨기고, 새 툴바 삽입
		$oldToolbar.hide().before( $toolbar );
	}

	// wikiEditor 준비되면 호출
	mw.hook( 'wikiEditor.toolbarReady' ).add( initNewToolbar );

}( mediaWiki, jQuery) );
/* -----------------------------
 * 실시간 미리보기
 * ----------------------------- */

var previewState = {
	open: false,
	lastText: ''
};

function togglePreview() {
	var $textarea = $('#wpTextbox1');
	var $preview = $('#ntb-live-preview');

	// 최초 생성
	if (!$preview.length) {
		$preview = $('<div>')
			.attr('id', 'ntb-live-preview')
			.addClass('ntb-live-preview');
		$textarea.after($preview);
	}

	if (previewState.open) {
		closePreview($textarea, $preview);
	} else {
		openPreview($textarea, $preview);
	}
}

function openPreview($textarea, $preview) {
	previewState.open = true;
	previewState.lastText = '';

	// textarea 숨기기 + preview 보여주기
	$textarea.hide();
	$preview.show();

	// 높이 동일하게 설정
	$preview.css({
		height: $textarea.outerHeight(),
		overflow: 'auto'
	});

	// 즉시 한 번 렌더
	renderPreview();

	// 0.5초 간격으로 내용 변하면 자동 미리보기
	previewState.interval = setInterval(function () {
		var text = $('#wpTextbox1').val();
		if (text !== previewState.lastText) {
			previewState.lastText = text;
			renderPreview();
		}
	}, 500);
}

function closePreview($textarea, $preview) {
	previewState.open = false;
	clearInterval(previewState.interval);
	$preview.hide();
	$textarea.show();
}

function renderPreview() {
	var text = $('#wpTextbox1').val();

	$.ajax({
		url: mw.util.wikiScript('api'),
		method: 'POST',
		data: {
			action: 'parse',
			format: 'json',
			prop: 'text',
			contentmodel: 'wikitext',
			text: text
		}
	}).done(function (data) {
		if (data?.parse?.text['*']) {
			$('#ntb-live-preview').html(data.parse.text['*']);
		} else {
			$('#ntb-live-preview').html('<div style="color:red">렌더링 실패</div>');
		}
	});
}