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

인테리어 위키
둘러보기로 이동 검색으로 이동
편집 요약 없음
편집 요약 없음
2번째 줄: 2번째 줄:


/* =========================
/* =========================
   h2/h3/h4 접기/펼치기
   h2/h3/h4 기본 접기/펼치기
   - 헤더 바로 아래 콘텐츠만 감싸서 토글
   - 헤더 바로 아래 콘텐츠만 토글
   - 다음 heading(h1~h6) 나오면 즉시 종료 (하위 heading 포함 안 함)
   - 다음 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);


     // 이미 처리된 heading이면 스킵
     // 중복 처리 방지
     if ($heading.data('fold-ready')) return;
     if ($heading.data('fold-ready')) return;
     $heading.data('fold-ready', true);
     $heading.data('fold-ready', true);


     // 아이콘 추가 (왼쪽)
     // wrapper 생성
    const $icon = $('<span class="mw-fold-icon">▾</span>');
    $heading.prepend($icon);
 
    // heading "바로 아래" 콘텐츠만 수집: 다음 heading 나오면 종료
     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;
      $icon.remove();
      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) {
        $icon.text('▸');
         $heading.addClass('mw-fold-collapsed');
         $heading.addClass('mw-fold-collapsed');
         $wrapper.stop(true, true).slideUp(150);
         $wrapper.stop(true, true).slideUp(150);
       } else {
       } else {
        $icon.text('▾');
         $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);
      }
    });
  });

});