참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/**
* MediaWiki 커스텀 펼치기/접기 애니메이션
*
* 식별자 이름과 관계없이 자동으로 연결합니다.
*/
( function () {
'use strict';
var DURATION = 300;
var ANIMATING_CLASS = 'mw-custom-collapse-animating';
/**
* 토글 요소에서 식별자 추출
*
* mw-customtoggle-KSC_LEADER
* → KSC_LEADER
*/
function getToggleName( toggle ) {
var classes = toggle.classList;
var i;
var prefix = 'mw-customtoggle-';
for ( i = 0; i < classes.length; i++ ) {
if ( classes[ i ].indexOf( prefix ) === 0 ) {
return classes[ i ].substring( prefix.length );
}
}
return null;
}
/**
* CSS 선택자에서 사용할 문자열 이스케이프
*/
function escapeSelector( value ) {
if ( window.CSS && CSS.escape ) {
return CSS.escape( value );
}
return value.replace(
/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g,
'\\\\$1'
);
}
/**
* 식별자와 연결된 펼침 대상 찾기
*/
function getTarget( name ) {
if ( !name ) {
return null;
}
/*
* class 방식
*
* class="
* mw-collapsible
* mw-customcollapsible-KSC_LEADER
* "
*/
var target = document.querySelector(
'.mw-customcollapsible-' +
escapeSelector( name )
);
if ( target ) {
return target;
}
/*
* id 방식도 대응
*/
target = document.getElementById(
'mw-customcollapsible-' + name
);
return target;
}
/**
* 실제 애니메이션을 적용할 콘텐츠
*/
function getContent( target ) {
var content = target.querySelector(
'.mw-collapsible-content'
);
if ( content ) {
return content;
}
return target;
}
/**
* 현재 접혀있는지 확인
*/
function isCollapsed( target, content ) {
if ( target.classList.contains( 'mw-collapsed' ) ) {
return true;
}
return window.getComputedStyle( content ).display === 'none';
}
/**
* 펼치기
*/
function expand( target, content, toggle ) {
if ( content.classList.contains( ANIMATING_CLASS ) ) {
return;
}
content.classList.add( ANIMATING_CLASS );
target.classList.remove( 'mw-collapsed' );
content.style.display = 'block';
content.style.height = 'auto';
content.style.overflow = 'hidden';
var targetHeight = content.scrollHeight;
content.style.height = '0px';
content.style.opacity = '';
/*
* 강제 reflow
*/
content.offsetHeight;
var animation = content.animate(
[
{
height: '0px',
},
{
height: targetHeight + 'px',
}
],
{
duration: DURATION,
easing: 'ease',
fill: 'forwards'
}
);
animation.onfinish = function () {
content.classList.remove( ANIMATING_CLASS );
content.style.display = '';
content.style.height = '';
content.style.opacity = '';
content.style.overflow = '';
toggle.setAttribute(
'aria-expanded',
'true'
);
animation.cancel();
};
}
/**
* 접기
*/
function collapse( target, content, toggle ) {
if ( content.classList.contains( ANIMATING_CLASS ) ) {
return;
}
content.classList.add( ANIMATING_CLASS );
var startHeight =
content.getBoundingClientRect().height;
content.style.display = 'block';
content.style.overflow = 'hidden';
var animation = content.animate(
[
{
height: startHeight + 'px',
opacity: 1
},
{
height: '0px',
opacity: 0
}
],
{
duration: DURATION,
easing: 'ease',
fill: 'forwards'
}
);
animation.onfinish = function () {
target.classList.add( 'mw-collapsed' );
content.classList.remove( ANIMATING_CLASS );
content.style.display = 'none';
content.style.height = '';
content.style.opacity = '';
content.style.overflow = '';
toggle.setAttribute(
'aria-expanded',
'false'
);
animation.cancel();
};
}
/**
* 토글 실행
*/
function toggleCollapsible( toggle ) {
var name = getToggleName( toggle );
if ( !name ) {
return false;
}
var target = getTarget( name );
if ( !target ) {
return false;
}
var content = getContent( target );
if ( !content ) {
return false;
}
if ( isCollapsed( target, content ) ) {
expand(
target,
content,
toggle
);
} else {
collapse(
target,
content,
toggle
);
}
return true;
}
/**
* 클릭
*
* capture=true를 사용해서
* MediaWiki 기본 토글보다 먼저 처리
*/
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();
toggleCollapsible( 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();
toggleCollapsible( toggle );
},
true
);
}() );