미디어위키:Common.js

/**
 * MediaWiki 커스텀 펼치기 / 접기 애니메이션
 *
 * 지원 구조
 *
 * 1. 일반 MediaWiki 구조
 *
 * <div class="mw-customtoggle-XXX mw-customtoggle">
 *     [ 펼치기 · 접기 ]
 * </div>
 *
 * <div
 *     id="mw-customcollapsible-XXX"
 *     class="mw-collapsible mw-collapsed"
 * >
 *     <div class="mw-collapsible-content">
 *         내용
 *     </div>
 * </div>
 *
 *
 * 2. 동일 ID를 2개 사용하는 전환형 구조
 *
 * <div
 *     id="mw-customcollapsible-XXX"
 *     class="mw-collapsible"
 * >
 *     <div class="mw-customtoggle-XXX mw-customtoggle">
 *         [ 버튼 ]
 *     </div>
 * </div>
 *
 * <div
 *     id="mw-customcollapsible-XXX"
 *     class="mw-collapsible mw-collapsed"
 *     style="display:none;"
 * >
 *     <div class="mw-customtoggle-XXX mw-customtoggle">
 *         [ 버튼 ]
 *     </div>
 *
 *     실제 내용
 * </div>
 *
 *
 * 3. flex 안에 여러 독립 토글
 *
 * mw-customtoggle-TWICE_KOR
 * mw-customtoggle-TWICE_OVS
 * mw-customtoggle-TWICE_ETC
 * mw-customtoggle-TWICE_REL
 *
 *
 * 애니메이션:
 * 높이만 변경
 * opacity 사용 안 함
 */

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

	/**
	 * 애니메이션 시간
	 */
	var DURATION = 300;

	/**
	 * jQuery easing
	 */
	var EASING = 'swing';

	/**
	 * jQuery data key
	 */
	var DATA_DISPLAY =
		'mwCustomCollapseDisplay';


	/**
	 * -----------------------------------------------------
	 * 토글 클래스에서 식별자 추출
	 *
	 * mw-customtoggle-Flora_LACTEA_01
	 * →
	 * Flora_LACTEA_01
	 * -----------------------------------------------------
	 */
	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;
	}


	/**
	 * -----------------------------------------------------
	 * HTML attribute selector escape
	 * -----------------------------------------------------
	 */
	function escapeAttribute( value ) {

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


	/**
	 * -----------------------------------------------------
	 * 같은 name에 대응하는 모든 collapsible 가져오기
	 *
	 * 동일 ID가 여러 개 있어도 모두 반환
	 * -----------------------------------------------------
	 */
	function getTargets( name ) {

		if ( !name ) {
			return [];
		}


		var id =
			'mw-customcollapsible-' +
			name;


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


	/**
	 * -----------------------------------------------------
	 * 해당 target의 직계
	 * .mw-collapsible-content 찾기
	 *
	 * querySelector를 바로 사용하지 않는 이유:
	 * 안쪽에 중첩된 collapsible이 있을 경우
	 * 내부 콘텐츠를 잘못 잡을 수 있음.
	 * -----------------------------------------------------
	 */
	function getDirectContent( target ) {

		var children =
			target.children;

		var i;


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

			if (
				children[ i ]
					.classList
					.contains(
						'mw-collapsible-content'
					)
			) {

				return children[ i ];
			}
		}


		return null;
	}


	/**
	 * -----------------------------------------------------
	 * 실제 애니메이션할 요소 결정
	 *
	 * 일반 MediaWiki:
	 * .mw-collapsible-content
	 *
	 * LACTEA 등의 구조:
	 * target 자체
	 * -----------------------------------------------------
	 */
	function getAnimatedElement( target ) {

		var content =
			getDirectContent(
				target
			);


		if ( content ) {
			return content;
		}


		return target;
	}


	/**
	 * -----------------------------------------------------
	 * 현재 접힌 상태인지 확인
	 * -----------------------------------------------------
	 */
	function isCollapsed(
		target,
		element
	) {

		/*
		 * MediaWiki 상태 클래스 우선
		 */
		if (
			target.classList.contains(
				'mw-collapsed'
			)
		) {

			return true;
		}


		/*
		 * 실제 display:none 여부 확인
		 */
		return (
			window
				.getComputedStyle(
					element
				)
				.display === 'none'
		);
	}


	/**
	 * -----------------------------------------------------
	 * 현재 display 값 저장
	 *
	 * inline-block 같은 display를 접었다 다시 펼칠 때
	 * 원래 형태를 복구하기 위해 사용
	 * -----------------------------------------------------
	 */
	function rememberDisplay( element ) {

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


		if (
			display &&
			display !== 'none'
		) {

			$( element ).data(
				DATA_DISPLAY,
				display
			);
		}
	}


	/**
	 * -----------------------------------------------------
	 * 펼칠 때 사용할 display 결정
	 * -----------------------------------------------------
	 */
	function getOpenDisplay( element ) {

		/*
		 * 이전에 저장된 display가 있다면 사용
		 */
		var stored =
			$( element ).data(
				DATA_DISPLAY
			);


		if ( stored ) {
			return stored;
		}


		/*
		 * 인라인 스타일에 유효한 display가 남아 있는 경우
		 */
		if (
			element.style.display &&
			element.style.display !== 'none'
		) {

			return element.style.display;
		}


		/*
		 * 현재 computed display
		 */
		var computed =
			window
				.getComputedStyle(
					element
				)
				.display;


		if (
			computed &&
			computed !== 'none'
		) {

			return computed;
		}


		/*
		 * 요소별 자연스러운 display
		 */
		switch ( element.tagName ) {

			case 'TABLE':
				return 'table';

			case 'TBODY':
				return 'table-row-group';

			case 'THEAD':
				return 'table-header-group';

			case 'TFOOT':
				return 'table-footer-group';

			case 'TR':
				return 'table-row';

			case 'TD':
			case 'TH':
				return 'table-cell';

			case 'COLGROUP':
				return 'table-column-group';

			case 'COL':
				return 'table-column';

			case 'CAPTION':
				return 'table-caption';

			case 'LI':
				return 'list-item';
		}


		/*
		 * mw-collapsible 자체가 대상인 경우
		 *
		 * 폭이 100%면 block,
		 * 그렇지 않으면 inline-block을 우선 사용.
		 *
		 * LACTEA 상단 버튼 영역 같은
		 * display:inline-block 구조 대응.
		 */
		if (
			element.classList.contains(
				'mw-collapsible'
			)
		) {

			if (
				element.style.width === '100%' ||
				element.style.width === '100.0%'
			) {

				return 'block';
			}


			return 'inline-block';
		}


		return 'block';
	}


	/**
	 * -----------------------------------------------------
	 * 같은 name의 모든 토글 ARIA 상태 변경
	 * -----------------------------------------------------
	 */
	function updateAria(
		name,
		expanded
	) {

		var className =
			'mw-customtoggle-' +
			name;

		var toggles =
			document.getElementsByClassName(
				className
			);

		var i;


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

			toggles[ i ].setAttribute(
				'aria-expanded',
				expanded ?
					'true' :
					'false'
			);
		}
	}


	/**
	 * -----------------------------------------------------
	 * 펼치기
	 * -----------------------------------------------------
	 */
	function expand(
		target,
		element
	) {

		var $element =
			$( element );


		/*
		 * 현재 진행 중인 jQuery animation 중지
		 *
		 * true  = queue 비움
		 * false = 현재 애니메이션을 끝까지 강제 적용하지 않음
		 */
		$element.stop(
			true,
			false
		);


		/*
		 * MediaWiki 접힘 상태 해제
		 */
		target.classList.remove(
			'mw-collapsed'
		);


		/**
		 * -------------------------------------------------
		 * 일반 MediaWiki 구조
		 *
		 * target
		 * └─ .mw-collapsible-content
		 * -------------------------------------------------
		 */
		if (
			element !== target
		) {

			/*
			 * slideDown이 display:none에서
			 * 자연스럽게 높이를 계산
			 */
			$element
				.stop(
					true,
					false
				)
				.slideDown(
					{
						duration:
							DURATION,

						easing:
							EASING,

						complete:
							function () {

								/*
								 * jQuery가 생성한
								 * 불필요한 height/overflow 제거
								 */
								$element.css(
									{
										height:
											'',

										overflow:
											''
									}
								);
							}
					}
				);


			return;
		}


		/**
		 * -------------------------------------------------
		 * target 자체가 display:none 되는 구조
		 *
		 * LACTEA 등의 구조
		 * -------------------------------------------------
		 */

		var display =
			getOpenDisplay(
				element
			);


		/*
		 * 먼저 보이는 상태로 복구
		 */
		$element.css(
			{
				display:
					display,

				height:
					'auto',

				overflow:
					'hidden'
			}
		);


		/*
		 * 실제 최종 높이 측정
		 */
		var targetHeight =
			element.scrollHeight;


		/*
		 * 0 높이에서 시작
		 */
		$element.css(
			{
				height:
					'0px'
			}
		);


		/*
		 * 강제 reflow
		 */
		void element.offsetHeight;


		/*
		 * 높이만 애니메이션
		 */
		$element.animate(
			{
				height:
					targetHeight
			},
			{
				duration:
					DURATION,

				easing:
					EASING,

				complete:
					function () {

						/*
						 * 최종적으로 내용 높이에
						 * 자동 대응하도록 height 제거
						 */
						$element.css(
							{
								height:
									'',

								overflow:
									''
							}
						);
					}
			}
		);
	}


	/**
	 * -----------------------------------------------------
	 * 접기
	 * -----------------------------------------------------
	 */
	function collapse(
		target,
		element
	) {

		var $element =
			$( element );


		$element.stop(
			true,
			false
		);


		/*
		 * display:none으로 만들기 전에
		 * 현재 display 기억
		 */
		rememberDisplay(
			element
		);


		/**
		 * -------------------------------------------------
		 * 일반 MediaWiki 구조
		 * -------------------------------------------------
		 */
		if (
			element !== target
		) {

			$element.slideUp(
				{
					duration:
						DURATION,

					easing:
						EASING,

					complete:
						function () {

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


							$element.css(
								{
									height:
										'',

									overflow:
										''
								}
							);
						}
				}
			);


			return;
		}


		/**
		 * -------------------------------------------------
		 * target 자체가 접히는 구조
		 * -------------------------------------------------
		 */

		var startHeight =
			element
				.getBoundingClientRect()
				.height;


		/*
		 * 시작 높이를 고정
		 */
		$element.css(
			{
				height:
					startHeight + 'px',

				overflow:
					'hidden'
			}
		);


		void element.offsetHeight;


		/*
		 * 현재 높이 → 0
		 */
		$element.animate(
			{
				height:
					0
			},
			{
				duration:
					DURATION,

				easing:
					EASING,

				complete:
					function () {

						/*
						 * 완전히 접힌 뒤 상태 반영
						 */
						target.classList.add(
							'mw-collapsed'
						);


						$element.css(
							{
								display:
									'none',

								height:
									'',

								overflow:
									''
							}
						);
					}
			}
		);
	}


	/**
	 * -----------------------------------------------------
	 * 대상 하나 토글
	 * -----------------------------------------------------
	 */
	function toggleTarget(
		target
	) {

		var element =
			getAnimatedElement(
				target
			);


		if (
			isCollapsed(
				target,
				element
			)
		) {

			expand(
				target,
				element
			);

			return true;
		}


		collapse(
			target,
			element
		);


		return false;
	}


	/**
	 * -----------------------------------------------------
	 * 그룹 토글
	 *
	 * 동일한 XXX를 가진 target이 여러 개면
	 * 각각 현재 상태의 반대로 변경.
	 *
	 * 예:
	 *
	 * LACTEA
	 *
	 * 첫 번째:
	 * 버튼만 표시
	 *
	 * 두 번째:
	 * 실제 내용, display:none
	 *
	 * 클릭하면
	 *
	 * 첫 번째 → 닫힘
	 * 두 번째 → 펼침
	 *
	 * 따라서 버튼이 중복 표시되지 않음.
	 * -----------------------------------------------------
	 */
	function toggleGroup(
		toggle
	) {

		var name =
			getToggleName(
				toggle
			);


		if ( !name ) {
			return false;
		}


		var targets =
			getTargets(
				name
			);


		if (
			!targets ||
			!targets.length
		) {

			return false;
		}


		var i;

		var openedAny =
			false;


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

			var target =
				targets[ i ];

			var element =
				getAnimatedElement(
					target
				);

			var collapsed =
				isCollapsed(
					target,
					element
				);


			if ( collapsed ) {

				expand(
					target,
					element
				);

				openedAny =
					true;

			} else {

				collapse(
					target,
					element
				);
			}
		}


		/*
		 * 대상이 하나뿐인 일반 구조에서는
		 * ARIA를 정상적으로 갱신.
		 *
		 * 동일 ID가 2개인 교대형 구조는
		 * 두 요소의 상태가 서로 반대이므로
		 * 클릭된 그룹 기준으로 처리.
		 */
		if (
			targets.length === 1
		) {

			updateAria(
				name,
				openedAny
			);
		}


		return true;
	}


	/**
	 * -----------------------------------------------------
	 * 클릭 처리
	 *
	 * capture=true로
	 * MediaWiki jquery.makeCollapsible보다
	 * 먼저 이벤트를 처리.
	 * -----------------------------------------------------
	 */
	document.addEventListener(
		'click',
		function ( event ) {

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


			if ( !toggle ) {
				return;
			}


			/*
			 * 우리가 처리하는 customtoggle인지 확인
			 */
			if (
				!getToggleName(
					toggle
				)
			) {

				return;
			}


			/*
			 * MediaWiki 기본 토글 동작 중지
			 */
			event.preventDefault();

			event.stopPropagation();

			event.stopImmediatePropagation();


			toggleGroup(
				toggle
			);
		},
		true
	);


	/**
	 * -----------------------------------------------------
	 * 키보드
	 *
	 * Enter / Space
	 * -----------------------------------------------------
	 */
	document.addEventListener(
		'keydown',
		function ( event ) {

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

				return;
			}


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


			if ( !toggle ) {
				return;
			}


			if (
				!getToggleName(
					toggle
				)
			) {

				return;
			}


			event.preventDefault();

			event.stopPropagation();

			event.stopImmediatePropagation();


			toggleGroup(
				toggle
			);
		},
		true
	);


	/**
	 * -----------------------------------------------------
	 * 초기 display 상태 기억
	 *
	 * 페이지 처음 로딩됐을 때 현재 보이는
	 * mw-collapsible의 display 값을 저장.
	 *
	 * 예:
	 * display:inline-block
	 *
	 * 나중에 접었다 펼쳐도
	 * inline-block으로 정확히 복원.
	 * -----------------------------------------------------
	 */
	function initializeDisplays(
		root
	) {

		var collapsibles =
			root.querySelectorAll(
				'.mw-collapsible'
			);

		var i;


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

			var element =
				collapsibles[ i ];

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


			if (
				display &&
				display !== 'none'
			) {

				$( element ).data(
					DATA_DISPLAY,
					display
				);
			}
		}
	}


	/**
	 * -----------------------------------------------------
	 * 최초 로딩
	 * -----------------------------------------------------
	 */
	$( function () {

		initializeDisplays(
			document
		);

	} );


	/**
	 * -----------------------------------------------------
	 * MediaWiki 동적 콘텐츠 대응
	 *
	 * Lua / AJAX / 확장기능 등으로
	 * 나중에 추가된 콘텐츠의 display도 저장.
	 * -----------------------------------------------------
	 */
	if (
		mw &&
		mw.hook
	) {

		mw.hook(
			'wikipage.content'
		).add(
			function ( $content ) {

				if (
					$content &&
					$content[ 0 ]
				) {

					initializeDisplays(
						$content[ 0 ]
					);
				}
			}
		);
	}


}( jQuery, mediaWiki ) );