미디어위키:Common.js

( function ( $, mw ) {
	'use strict';

	var DURATION = 180;
	var EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';

	var VIEWPORT_CLASS = 'mw-collapse-viewport';
	var CONTENT_CLASS = 'mw-collapse-content';


	function getToggleName( toggle ) {
		var prefix = 'mw-customtoggle-';
		var classes = toggle.classList;
		var i;

		for ( i = 0; i < classes.length; i++ ) {
			if ( classes[ i ].indexOf( prefix ) === 0 ) {
				return classes[ i ].substring( prefix.length );
			}
		}

		return null;
	}


	function escapeAttribute( value ) {
		return String( value )
			.replace( /\\/g, '\\\\' )
			.replace( /"/g, '\\"' );
	}


	function getTargets( name ) {
		var id = 'mw-customcollapsible-' + name;

		return document.querySelectorAll(
			'[id="' + escapeAttribute( id ) + '"]'
		);
	}


	function isCollapsed( target ) {
		return (
			target.classList.contains( 'mw-collapsed' ) ||
			window.getComputedStyle( target ).display === 'none'
		);
	}


	/**
	 * target 내부에 viewport/content 구조 생성
	 *
	 * target
	 * └─ viewport
	 *    └─ content
	 *       └─ 기존 내용 전체
	 */
	function ensureViewport( target ) {

		var directChildren = target.children;
		var i;

		for ( i = 0; i < directChildren.length; i++ ) {
			if (
				directChildren[ i ].classList &&
				directChildren[ i ].classList.contains(
					VIEWPORT_CLASS
				)
			) {
				return directChildren[ i ];
			}
		}


		var viewport = document.createElement( 'div' );
		var content = document.createElement( 'div' );

		viewport.className = VIEWPORT_CLASS;
		content.className = CONTENT_CLASS;


		/*
		 * 중요:
		 * 기존 내용 전체를 content로 이동
		 */
		while ( target.firstChild ) {
			content.appendChild(
				target.firstChild
			);
		}


		viewport.appendChild( content );
		target.appendChild( viewport );


		viewport.style.overflow = 'hidden';


		return viewport;
	}


	function getContent( viewport ) {
		var children = viewport.children;
		var i;

		for ( i = 0; i < children.length; i++ ) {
			if (
				children[ i ].classList &&
				children[ i ].classList.contains(
					CONTENT_CLASS
				)
			) {
				return children[ i ];
			}
		}

		return null;
	}


	function getNaturalDisplay( target ) {

		if (
			target.dataset.mwCollapseDisplay
		) {
			return target.dataset.mwCollapseDisplay;
		}


		var style =
			window.getComputedStyle( target );


		if (
			style.display &&
			style.display !== 'none'
		) {
			target.dataset.mwCollapseDisplay =
				style.display;

			return style.display;
		}


		if (
			target.style.width === '100%'
		) {
			return 'block';
		}


		return 'block';
	}


	function rememberDisplay( target ) {

		var display =
			window.getComputedStyle(
				target
			).display;


		if (
			display &&
			display !== 'none'
		) {
			target.dataset.mwCollapseDisplay =
				display;
		}
	}


	function expand( target ) {

		var viewport =
			ensureViewport(
				target
			);

		var content =
			getContent(
				viewport
			);


		if ( !content ) {
			return;
		}


		/*
		 * target 바깥쪽만 표시
		 */
		target.style.display =
			getNaturalDisplay(
				target
			);

		target.classList.remove(
			'mw-collapsed'
		);


		/*
		 * content 자체는 항상 auto height.
		 *
		 * 내부 table에는 height를 절대 설정하지 않음.
		 */
		content.style.height = 'auto';


		viewport.style.height = 'auto';
		viewport.style.overflow = 'hidden';


		var finalHeight =
			content.getBoundingClientRect()
				.height;


		viewport.style.height = '0px';


		void viewport.offsetHeight;


		var animation =
			viewport.animate(
				[
					{
						height: '0px'
					},
					{
						height:
							finalHeight +
							'px'
					}
				],
				{
					duration:
						DURATION,

					easing:
						EASING,

					fill:
						'forwards'
				}
			);


		animation.onfinish =
			function () {

				viewport.style.height =
					'';

				viewport.style.overflow =
					'';

				animation.cancel();
			};
	}


	function collapse( target ) {

		rememberDisplay(
			target
		);


		var viewport =
			ensureViewport(
				target
			);

		var content =
			getContent(
				viewport
			);


		if ( !content ) {
			return;
		}


		/*
		 * 내부 table은 그대로 둠.
		 * viewport 높이만 줄임.
		 */
		var startHeight =
			content.getBoundingClientRect()
				.height;


		viewport.style.height =
			startHeight +
			'px';

		viewport.style.overflow =
			'hidden';


		void viewport.offsetHeight;


		var animation =
			viewport.animate(
				[
					{
						height:
							startHeight +
							'px'
					},
					{
						height:
							'0px'
					}
				],
				{
					duration:
						DURATION,

					easing:
						EASING,

					fill:
						'forwards'
				}
			);


		animation.onfinish =
			function () {

				target.classList.add(
					'mw-collapsed'
				);

				target.style.display =
					'none';


				viewport.style.height =
					'';

				viewport.style.overflow =
					'';


				animation.cancel();
			};
	}


	function toggleGroup( toggle ) {

		var name =
			getToggleName(
				toggle
			);


		if ( !name ) {
			return;
		}


		var targets =
			getTargets(
				name
			);


		var i;


		for (
			i = 0;
			i < targets.length;
			i++
		) {

			var target =
				targets[ i ];


			if (
				isCollapsed(
					target
				)
			) {
				expand(
					target
				);

			} else {
				collapse(
					target
				);
			}
		}
	}


	document.addEventListener(
		'click',
		function ( event ) {

			var toggle =
				event.target.closest(
					'.mw-customtoggle'
				);


			if ( !toggle ) {
				return;
			}


			if (
				!getToggleName(
					toggle
				)
			) {
				return;
			}


			event.preventDefault();
			event.stopPropagation();
			event.stopImmediatePropagation();


			toggleGroup(
				toggle
			);
		},
		true
	);


	document.addEventListener(
		'keydown',
		function ( event ) {

			if (
				event.key !== 'Enter' &&
				event.key !== ' '
			) {
				return;
			}


			var toggle =
				event.target.closest(
					'.mw-customtoggle'
				);


			if ( !toggle ) {
				return;
			}


			event.preventDefault();
			event.stopPropagation();
			event.stopImmediatePropagation();


			toggleGroup(
				toggle
			);
		},
		true
	);


}( jQuery, mediaWiki ) );