미디어위키:Common.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

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

mw.hook('wikipage.content').add(function ($content) {

  const HEADING_SELECTOR = 'h2, h3, h4, h5';
  const STOP_SELECTOR = 'h1, h2, h3, h4, h5, h6';

  $content.find(HEADING_SELECTOR).each(function () {
    const $heading = $(this);

    // 중복 처리 방지
    if ($heading.attr('data-mw-fold-ready') === '1') return;
    $heading.attr('data-mw-fold-ready', '1');

    // 편집 링크 존재 여부 클래스(:has 대체용)
    if ($heading.find('.mw-editsection').length) {
      $heading.addClass('mw-has-editsection');
    }

    // ✅ 아이콘은 항상 "헤더 직계 자식"으로만 넣기 (CSS absolute 기준 통일)
    if ($heading.children('.mw-fold-icon').length === 0) {
      const $icon = $('<span class="mw-fold-icon" aria-hidden="true"></span>');
      $heading.prepend($icon);
    }
    // ✅ 아이콘 공간 확보용 클래스 (CSS에서 padding-left 적용)
    $heading.addClass('mw-has-fold-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);
    }

    $heading.after($wrapper);

    // 콘텐츠 유무 클래스(원하면 CSS로 비활성 표시 가능)
    if ($wrapper.children().length > 0) {
      $heading.addClass('mw-fold-has-content');
    } else {
      $heading.removeClass('mw-fold-has-content');
    }

    // 상태 (기본: 펼침)
    let collapsed = false;

    // 제목 클릭 시 토글
    $heading.on('click', function (e) {
      // 좌클릭만
      if (typeof e.which === 'number' && e.which !== 1) return;

      // 헤더 안 링크 클릭이면 토글 금지 (편집 링크 포함)
      if ($(e.target).closest('a').length) return;

      // 텍스트 드래그/선택 중이면 토글 방지(체감 개선)
      const sel = window.getSelection && window.getSelection();
      if (sel && sel.type === 'Range') return;

      // 콘텐츠 없는 경우: 아이콘은 있지만 동작은 하지 않음
      if ($wrapper.children().length === 0) return;

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