미디어위키:Common.js: 두 판 사이의 차이

2026년 1월 15일 (목) 07:20 판

/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */

/* =========================
   h2 / h3 / h4 접기/펼치기
   - 기본 상태: 펼침
   - 아이콘 회전으로 상태 표현
   ========================= */

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);

    // 아이콘 추가
    const $icon = $('<span class="mw-fold-icon">▶</span>');
    $heading.prepend($icon);

    // 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) {
      $icon.remove();
      return;
    }

    // DOM 반영
    $heading.after($wrapper);

    /* 기본 상태 = 펼침 */
    let expanded = true;
    // (초기 클래스는 아무 것도 붙이지 않음)

    // 클릭 토글
    $heading.on('click', function () {
      expanded = !expanded;

      if (expanded) {
        $heading.removeClass('mw-fold-collapsed'); // ▶ 아래
        $wrapper.stop(true, true).slideDown(150);
      } else {
        $heading.addClass('mw-fold-collapsed');    // ▶ 오른쪽
        $wrapper.stop(true, true).slideUp(150);
      }
    });
  });

});