참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/**
* MediaWiki customtoggle 펼치기/접기 애니메이션
*
* 예:
* .mw-customtoggle-KSC_LEADER
* ↓
* #mw-customcollapsible-KSC_LEADER
*/
( function () {
'use strict';
var DURATION = 300;
/**
* customtoggle에서 식별자 추출
*
* mw-customtoggle-KSC_LEADER
* → KSC_LEADER
*/
function getToggleId( toggle ) {
var classes = toggle.className.split( /\\s+/ );
var i;
for ( i = 0; i < classes.length; i++ ) {
if (
classes[ i ].indexOf( 'mw-customtoggle-' ) === 0
) {
return classes[ i ].substring(
'mw-customtoggle-'.length
);
}
}
return null;
}
/**
* 연결된 collapsible 찾기
*/
function getTarget( id ) {
if ( !id ) {
return null;
}
/*
* 가장 일반적인 MediaWiki 형식
*/
var target = document.getElementById(
'mw-customcollapsible-' + id
);
if ( target ) {
return target;
}
/*
* 일부 틀에서 class 방식으로 만들어진 경우 대응
*/
target = document.querySelector(
'.mw-customcollapsible-' +
CSS.escape( id )
);
return target;
}
/**
* 실제 접히고 펼쳐지는 내용 찾기
*/
function getContent( target ) {
var content = target.querySelector(
'.mw-collapsible-content'
);
if ( content ) {
return content;
}
/*
* 별도의 mw-collapsible-content가 없으면
* target 자체를 애니메이션
*/
return target;
}
function isCollapsed( target, content ) {
return (
target.classList.contains( 'mw-collapsed' ) ||
window.getComputedStyle( content ).display === 'none'
);
}
function expand( target, content, toggle ) {
if (
content.classList.contains(
'mw-custom-collapse-animating'
)
) {
return;
}
target.classList.remove( 'mw-collapsed' );
content.style.display = 'block';
content.style.height = 'auto';
var targetHeight = content.scrollHeight;
content.style.height = '0px';
content.style.opacity = '0';
content.classList.add(
'mw-custom-collapse-animating'
);
/* reflow */
content.offsetHeight;
var animation = content.animate(
[
{
height: '0px',
opacity: 0
},
{
height: targetHeight + 'px',
opacity: 1
}
],
{
duration: DURATION,
easing: 'ease',
fill: 'forwards'
}
);
animation.onfinish = function () {
content.classList.remove(
'mw-custom-collapse-animating'
);
content.style.display = '';
content.style.height = '';
content.style.opacity = '';
toggle.setAttribute(
'aria-expanded',
'true'
);
animation.cancel();
};
}
function collapse( target, content, toggle ) {
if (
content.classList.contains(
'mw-custom-collapse-animating'
)
) {
return;
}
var startHeight =
content.getBoundingClientRect().height;
content.style.display = 'block';
content.classList.add(
'mw-custom-collapse-animating'
);
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(
'mw-custom-collapse-animating'
);
content.style.display = 'none';
content.style.height = '';
content.style.opacity = '';
toggle.setAttribute(
'aria-expanded',
'false'
);
animation.cancel();
};
}
function handleToggle( toggle ) {
var id = getToggleId( toggle );
if ( !id ) {
return;
}
var target = getTarget( id );
if ( !target ) {
return;
}
var content = getContent( target );
if ( !content ) {
return;
}
if ( isCollapsed( target, content ) ) {
expand(
target,
content,
toggle
);
} else {
collapse(
target,
content,
toggle
);
}
}
/*
* MediaWiki 기본 customtoggle 동작보다 먼저 실행
*/
document.addEventListener(
'click',
function ( event ) {
var toggle = event.target.closest(
'.mw-customtoggle'
);
if ( !toggle ) {
return;
}
if ( !getToggleId( toggle ) ) {
return;
}
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
handleToggle( 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();
handleToggle( toggle );
},
true
);
}() );