미디어위키:Gadget-CreatePageUw.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

( function () {
	'use strict';

	if (
		mw.config.get( 'wgCanonicalSpecialPageName' ) !==
		'CreatePage'
	) {
		return;
	}

	function createNativeInput( originalInput ) {
		var fieldLayout;
		var fieldContainer;
		var nativeInput;

		if (
			originalInput.classList.contains(
				'pvz-createpage-input'
			)
		) {
			originalInput.placeholder =
				'새로 재배할 문서의 제목을 입력하세요';

			return originalInput;
		}

		fieldLayout = originalInput.closest(
			'.oo-ui-fieldLayout'
		);

		fieldContainer = originalInput.closest(
			'.oo-ui-fieldLayout-field'
		);

		if ( !fieldContainer ) {
			return originalInput;
		}

		/*
		 * 기존 input의 이름·ID·필수값·최대 길이 등은 유지하되,
		 * OOUI 클래스와 인라인 디자인은 모두 제거한다.
		 */
		nativeInput = originalInput.cloneNode( false );

		nativeInput.value = originalInput.value;
		nativeInput.className =
			'pvz-createpage-input';

		nativeInput.removeAttribute( 'style' );
		nativeInput.removeAttribute( 'role' );
		nativeInput.removeAttribute( 'aria-invalid' );

		nativeInput.placeholder =
			'새로 재배할 문서의 제목을 입력하세요';

		nativeInput.setAttribute(
			'aria-label',
			'새로 재배할 문서의 제목을 입력하세요'
		);

		/*
		 * OOUI 입력창 래퍼 전체를 삭제하고
		 * 일반 입력창 하나만 남긴다.
		 */
		fieldContainer.replaceChildren(
			nativeInput
		);

		if ( fieldLayout ) {
			fieldLayout.classList.add(
				'pvz-createpage-input-layout'
			);
		}

		return nativeInput;
	}

	function createNativeSubmitButton(
		form,
		originalButton
	) {
		var fieldLayout;
		var fieldContainer;
		var nativeButton;
		var attributes;

		if ( !originalButton ) {
			return;
		}

		if (
			originalButton.classList.contains(
				'pvz-createpage-submit-button'
			)
		) {
			originalButton.textContent = '제출';
			originalButton.setAttribute(
				'aria-label',
				'제출'
			);

			return;
		}

		fieldLayout = originalButton.closest(
			'.oo-ui-fieldLayout'
		);

		fieldContainer = originalButton.closest(
			'.oo-ui-fieldLayout-field'
		);

		if ( !fieldContainer ) {
			return;
		}

		nativeButton =
			document.createElement( 'button' );

		nativeButton.type = 'submit';
		nativeButton.className =
			'pvz-createpage-submit-button';

		nativeButton.textContent = '제출';
		nativeButton.setAttribute(
			'aria-label',
			'제출'
		);

		/*
		 * 기존 버튼의 제출 관련 속성을 유지한다.
		 */
		attributes = [
			'id',
			'name',
			'value',
			'title',
			'formaction',
			'formmethod',
			'formenctype',
			'formtarget'
		];

		attributes.forEach( function ( attribute ) {
			if (
				originalButton.hasAttribute(
					attribute
				)
			) {
				nativeButton.setAttribute(
					attribute,
					originalButton.getAttribute(
						attribute
					)
				);
			}
		} );

		if ( originalButton.disabled ) {
			nativeButton.disabled = true;
		}

		if (
			originalButton.hasAttribute(
				'formnovalidate'
			)
		) {
			nativeButton.setAttribute(
				'formnovalidate',
				''
			);
		}

		/*
		 * OOUI 버튼 래퍼 전체를 삭제하고
		 * 일반 제출 버튼 하나만 남긴다.
		 */
		fieldContainer.replaceChildren(
			nativeButton
		);

		if ( fieldLayout ) {
			fieldLayout.classList.add(
				'pvz-createpage-submit-layout'
			);
		}
	}

	function insertSproutImage(
		input,
		fieldLayout
	) {
		var imageBox;
		var image;
		var insertionTarget;

		if (
			document.querySelector(
				'.pvz-createpage-sprout'
			)
		) {
			return;
		}

		imageBox =
			document.createElement( 'div' );

		imageBox.className =
			'pvz-createpage-sprout';

		image =
			document.createElement( 'img' );

		image.src = mw.util.getUrl(
			'Special:Redirect/file/' +
			'Sprout_PvZ2.png'
		);

		image.alt = '';
		image.className =
			'pvz-design-critical';

		imageBox.appendChild( image );

		insertionTarget =
			fieldLayout ||
			input.parentElement;

		if (
			insertionTarget &&
			insertionTarget.parentNode
		) {
			insertionTarget.parentNode.insertBefore(
				imageBox,
				insertionTarget
			);
		}
	}

	function initializeCreatePageUw() {
		var originalInput;
		var inputFieldLayout;
		var input;
		var form;
		var originalButton;

		originalInput = document.getElementById(
			'mw-input-wptitle'
		);

		if ( !originalInput ) {
			return;
		}

		inputFieldLayout = originalInput.closest(
			'.oo-ui-fieldLayout'
		);

		input = createNativeInput(
			originalInput
		);

		insertSproutImage(
			input,
			inputFieldLayout
		);

		form = input.closest( 'form' );

		if ( !form ) {
			return;
		}

		originalButton = form.querySelector(
			'.pvz-createpage-submit-button, ' +
			'button[type="submit"], ' +
			'input[type="submit"], ' +
			'.oo-ui-buttonInputWidget button, ' +
			'.oo-ui-buttonInputWidget input'
		);

		createNativeSubmitButton(
			form,
			originalButton
		);
	}

	if ( document.readyState === 'loading' ) {
		document.addEventListener(
			'DOMContentLoaded',
			initializeCreatePageUw,
			{ once: true }
		);
	} else {
		initializeCreatePageUw();
	}
}() );