참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/**
* MediaWiki custom toggle 애니메이션
*
* 예:
*
* mw-customtoggle-MALE
* ↕
* mw-customcollapsible-MALE
*
* mw-customtoggle-FEMALE
* ↕
* mw-customcollapsible-FEMALE
*
* 여러 개를 동시에 사용해도 각각 독립적으로 작동합니다.
*/
( function () {
'use strict';
var DURATION = 300;
var ANIMATING_CLASS = 'mw-custom-collapse-animating';
/**
* mw-customtoggle-XXX 에서 XXX 추출
*/
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;
}
/**
* CSS 선택자 escape
*/
function escapeSelector( value ) {
if ( window.CSS && CSS.escape ) {
return CSS.escape( value );
}
return value.replace(
/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g,
'\\\\$1'
);
}
/**
* 해당 이름에 연결된 모든 대상 찾기
*/
function getTargets( name ) {
if ( !name ) {
return [];
}
var selector =
'.mw-customcollapsible-' +
escapeSelector( name );
var targets =
Array.prototype.slice.call(
document.querySelectorAll( selector )
);
/*
* id 형식도 지원
*/
var idTarget = document.getElementById(
'mw-customcollapsible-' + name
);
if (
idTarget &&
targets.indexOf( idTarget ) === -1
) {
targets.push( idTarget );
}
return targets;
}
/**
* 실제 애니메이션 대상 결정
*
* 중요:
* 토글 버튼 자체가 들어있는 요소 전체를
* display:none으로 만들지 않도록 한다.
*/
function getContent( target, toggle ) {
var content = target.querySelector(
'.mw-collapsible-content'
);
if ( content ) {
return content;
}
/*
* target 자체가 toggle을 포함하지 않는다면
* target 자체를 접어도 안전하다.
*/
if ( !target.contains( toggle ) ) {
return target;
}
/*
* toggle이 target 내부에 있다면
* target 전체를 숨기면 버튼까지 사라지므로
* 애니메이션하지 않는다.
*/
return null;
}
/**
* 태그의 자연스러운 display 값
*/
function getNaturalDisplay( element ) {
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';
default:
return 'block';
}
}
/**
* 접힌 상태인지 확인
*/
function isCollapsed( target, content ) {
if ( target.classList.contains( 'mw-collapsed' ) ) {
return true;
}
return (
window.getComputedStyle( content ).display ===
'none'
);
}
/**
* 펼치기
*/
function expand( target, content ) {
if (
content.classList.contains(
ANIMATING_CLASS
)
) {
return;
}
content.classList.add(
ANIMATING_CLASS
);
target.classList.remove(
'mw-collapsed'
);
content.style.display =
getNaturalDisplay( content );
content.style.height = 'auto';
content.style.overflow = 'hidden';
var targetHeight =
content.scrollHeight;
content.style.height = '0px';
/*
* 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
);
/*
* 애니메이션 후 원래 CSS 상태로 복구
*/
content.style.display = '';
content.style.height = '';
content.style.overflow = '';
animation.cancel();
};
}
/**
* 접기
*/
function collapse( target, content ) {
if (
content.classList.contains(
ANIMATING_CLASS
)
) {
return;
}
content.classList.add(
ANIMATING_CLASS
);
var startHeight =
content.getBoundingClientRect()
.height;
content.style.display =
getNaturalDisplay( content );
content.style.height =
startHeight + 'px';
content.style.overflow =
'hidden';
content.offsetHeight;
var animation =
content.animate(
[
{
height:
startHeight + 'px'
},
{
height: '0px'
}
],
{
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.overflow = '';
animation.cancel();
};
}
/**
* 실제 토글 실행
*/
function toggleCollapsible( toggle ) {
var name =
getToggleName( toggle );
if ( !name ) {
return false;
}
var targets =
getTargets( name );
if ( !targets.length ) {
return false;
}
var handled = false;
targets.forEach(
function ( target ) {
var content =
getContent(
target,
toggle
);
/*
* 버튼을 포함하고 있는 요소 자체라면
* 숨기지 않는다.
*/
if ( !content ) {
return;
}
if (
isCollapsed(
target,
content
)
) {
expand(
target,
content
);
} else {
collapse(
target,
content
);
}
handled = true;
}
);
/*
* 버튼 aria 상태도 변경
*/
if ( handled ) {
var expanded =
toggle.getAttribute(
'aria-expanded'
) === 'true';
toggle.setAttribute(
'aria-expanded',
expanded
? 'false'
: 'true'
);
}
return handled;
}
/**
* 클릭 처리
*/
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
);
}() );