참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
(function ($) {
'use strict';
var DURATION = 300;
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 findTarget(name) {
var id = 'mw-customcollapsible-' + name;
var targets = document.querySelectorAll(
'[id="' + id + '"]'
);
if (!targets.length) {
return null;
}
/*
* 실제 mw-collapsible-content를 가진 요소 우선
*/
var i;
for (i = 0; i < targets.length; i++) {
if (
getDirectContent(targets[i])
) {
return targets[i];
}
}
return targets[0];
}
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;
}
function toggle(toggle) {
var name = getToggleName(toggle);
if (!name) {
return;
}
var target = findTarget(name);
if (!target) {
return;
}
var content = getDirectContent(target);
if (!content) {
return;
}
var $content = $(content);
/*
* 중복 애니메이션 방지
*/
$content.stop(true, true);
var collapsed =
target.classList.contains('mw-collapsed') ||
$content.css('display') === 'none';
if (collapsed) {
/*
* 펼치기
*/
target.classList.remove('mw-collapsed');
$content
.hide()
.slideDown(DURATION);
toggle.setAttribute(
'aria-expanded',
'true'
);
} else {
/*
* 접기
*/
$content.slideUp(
DURATION,
function () {
target.classList.add(
'mw-collapsed'
);
}
);
toggle.setAttribute(
'aria-expanded',
'false'
);
}
}
document.addEventListener(
'click',
function (event) {
var toggleElement =
event.target.closest(
'.mw-customtoggle'
);
if (!toggleElement) {
return;
}
if (!getToggleName(toggleElement)) {
return;
}
/*
* MediaWiki 기본 클릭 동작 차단
*/
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
toggle(toggleElement);
},
true
);
document.addEventListener(
'keydown',
function (event) {
if (
event.key !== 'Enter' &&
event.key !== ' '
) {
return;
}
var toggleElement =
event.target.closest(
'.mw-customtoggle'
);
if (!toggleElement) {
return;
}
if (!getToggleName(toggleElement)) {
return;
}
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
toggle(toggleElement);
},
true
);
}(jQuery));