미디어위키:Common.js

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

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

( function () {
	'use strict';

	var DURATION = 300;

	document.addEventListener(
		'click',
		function ( event ) {
			var toggle = event.target.closest( '.mw-customtoggle' );

			if ( !toggle ) {
				return;
			}

			var name = null;

			toggle.classList.forEach( function ( className ) {
				if ( className.indexOf( 'mw-customtoggle-' ) === 0 ) {
					name = className.substring(
						'mw-customtoggle-'.length
					);
				}
			} );

			if ( !name ) {
				return;
			}

			var target = document.getElementById(
				'mw-customcollapsible-' + name
			);

			if ( !target ) {
				return;
			}

			/*
			 * 실제 내용 영역이 있으면 그것을 사용하고,
			 * 없으면 target 자체 사용.
			 *
			 * 이제 toggle은 target 밖에 있으므로
			 * 버튼이 사라지는 문제가 없음.
			 */
			var content =
				target.querySelector( '.mw-collapsible-content' ) ||
				target;

			var collapsed =
				target.classList.contains( 'mw-collapsed' ) ||
				window.getComputedStyle( content ).display === 'none';

			/*
			 * MediaWiki 기본 토글 방지
			 */
			event.preventDefault();
			event.stopPropagation();
			event.stopImmediatePropagation();

			if ( collapsed ) {
				expand( target, content );
			} else {
				collapse( target, content );
			}
		},
		true
	);

	function expand( target, content ) {
		target.classList.remove( 'mw-collapsed' );

		content.style.display = 'block';
		content.style.height = 'auto';
		content.style.overflow = 'hidden';

		var height = content.scrollHeight;

		content.style.height = '0px';

		content.offsetHeight;

		var animation = content.animate(
			[
				{ height: '0px' },
				{ height: height + 'px' }
			],
			{
				duration: DURATION,
				easing: 'ease',
				fill: 'forwards'
			}
		);

		animation.onfinish = function () {
			content.style.display = '';
			content.style.height = '';
			content.style.overflow = '';

			animation.cancel();
		};
	}

	function collapse( target, content ) {
		var height =
			content.getBoundingClientRect().height;

		content.style.height = height + 'px';
		content.style.overflow = 'hidden';

		var animation = content.animate(
			[
				{ height: height + 'px' },
				{ height: '0px' }
			],
			{
				duration: DURATION,
				easing: 'ease',
				fill: 'forwards'
			}
		);

		animation.onfinish = function () {
			target.classList.add( 'mw-collapsed' );

			content.style.display = 'none';
			content.style.height = '';
			content.style.overflow = '';

			animation.cancel();
		};
	}

}() );