미디어위키:Common.js: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
편집 요약 없음 |
편집 요약 없음 |
||
| 2번째 줄: | 2번째 줄: | ||
/* ========================= | /* ========================= | ||
h2/h3/h4 접기/펼치기 | h2/h3/h4 기본 접기/펼치기 | ||
- 헤더 바로 아래 콘텐츠만 | - 헤더 바로 아래 콘텐츠만 토글 | ||
- 다음 heading(h1~h6) 나오면 | - 다음 heading(h1~h6) 나오면 종료 | ||
========================= */ | ========================= */ | ||
mw.hook('wikipage.content').add(function ($content) { | mw.hook('wikipage.content').add(function ($content) { | ||
const HEADING_SELECTOR = 'h2, h3, h4'; | const HEADING_SELECTOR = 'h2, h3, h4'; | ||
const STOP_SELECTOR = 'h1, h2, h3, h4, h5, h6'; | const STOP_SELECTOR = 'h1, h2, h3, h4, h5, h6'; | ||
| 14번째 줄: | 15번째 줄: | ||
const $heading = $(this); | const $heading = $(this); | ||
// | // 중복 처리 방지 | ||
if ($heading.data('fold-ready')) return; | if ($heading.data('fold-ready')) return; | ||
$heading.data('fold-ready', true); | $heading.data('fold-ready', true); | ||
// | // wrapper 생성 | ||
const $wrapper = $('<div class="mw-fold-content"></div>'); | const $wrapper = $('<div class="mw-fold-content"></div>'); | ||
let $next = $heading.next(); | let $next = $heading.next(); | ||
// 바로 아래 콘텐츠만 수집 (heading 나오면 종료) | |||
while ($next.length && !$next.is(STOP_SELECTOR)) { | while ($next.length && !$next.is(STOP_SELECTOR)) { | ||
const $current = $next; | const $current = $next; | ||
| 32번째 줄: | 30번째 줄: | ||
} | } | ||
// 접을 | // 접을 콘텐츠 없으면 스킵 | ||
if ($wrapper.children().length === 0) | if ($wrapper.children().length === 0) return; | ||
// DOM | // DOM 반영 | ||
$heading.after($wrapper); | $heading.after($wrapper); | ||
// | // 상태 | ||
let collapsed = false; | let collapsed = false; | ||
// 클릭 시 토글 | // 제목 클릭 시 토글 | ||
$heading.on('click', function () { | $heading.on('click', function () { | ||
collapsed = !collapsed; | collapsed = !collapsed; | ||
if (collapsed) { | if (collapsed) { | ||
$heading.addClass('mw-fold-collapsed'); | $heading.addClass('mw-fold-collapsed'); | ||
$wrapper.stop(true, true).slideUp(150); | $wrapper.stop(true, true).slideUp(150); | ||
} else { | } else { | ||
$heading.removeClass('mw-fold-collapsed'); | $heading.removeClass('mw-fold-collapsed'); | ||
$wrapper.stop(true, true).slideDown(150); | $wrapper.stop(true, true).slideDown(150); | ||
| 59번째 줄: | 52번째 줄: | ||
}); | }); | ||
}); | }); | ||
}); | }); | ||
2026년 1월 15일 (목) 06:32 판
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
/* =========================
h2/h3/h4 기본 접기/펼치기
- 헤더 바로 아래 콘텐츠만 토글
- 다음 heading(h1~h6) 나오면 종료
========================= */
mw.hook('wikipage.content').add(function ($content) {
const HEADING_SELECTOR = 'h2, h3, h4';
const STOP_SELECTOR = 'h1, h2, h3, h4, h5, h6';
$content.find(HEADING_SELECTOR).each(function () {
const $heading = $(this);
// 중복 처리 방지
if ($heading.data('fold-ready')) return;
$heading.data('fold-ready', true);
// wrapper 생성
const $wrapper = $('<div class="mw-fold-content"></div>');
let $next = $heading.next();
// 바로 아래 콘텐츠만 수집 (heading 나오면 종료)
while ($next.length && !$next.is(STOP_SELECTOR)) {
const $current = $next;
$next = $next.next();
$wrapper.append($current);
}
// 접을 콘텐츠 없으면 스킵
if ($wrapper.children().length === 0) return;
// DOM 반영
$heading.after($wrapper);
// 상태
let collapsed = false;
// 제목 클릭 시 토글
$heading.on('click', function () {
collapsed = !collapsed;
if (collapsed) {
$heading.addClass('mw-fold-collapsed');
$wrapper.stop(true, true).slideUp(150);
} else {
$heading.removeClass('mw-fold-collapsed');
$wrapper.stop(true, true).slideDown(150);
}
});
});
});