미디어위키: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) {
    // 보기 화면에서만 동작
    if (mw.config.get('wgAction') !== 'view') {
        return;
    }

    var input = document.getElementById('myInput');
    if (!input) {
        return;
    }

    var tbody = document.querySelector('.divTable .tbody');
    if (!tbody) {
        return;
    }

    var rows = tbody.getElementsByClassName('row');
    if (!rows.length) {
        return;
    }

    // 1) 행 텍스트를 미리 대문자로 캐시
    var rowData = [];
    for (var i = 0; i < rows.length; i++) {
        var rowText = rows[i].textContent || rows[i].innerText || '';
        rowData.push({
            row: rows[i],
            textUpper: rowText.toUpperCase()
        });
    }

    // 2) 실제 필터 함수
    function filterEpisodes() {
        var text = input.textContent || input.innerText || '';
        var filter = text.trim().toUpperCase();

        // 검색어가 없으면 전부 보이기
        if (!filter) {
            for (var i = 0; i < rowData.length; i++) {
                rowData[i].row.style.display = '';
            }
            return;
        }

        for (var j = 0; j < rowData.length; j++) {
            if (rowData[j].textUpper.indexOf(filter) > -1) {
                rowData[j].row.style.display = '';
            } else {
                rowData[j].row.style.display = 'none';
            }
        }
    }

    // 3) 디바운스 헬퍼 (delay ms 동안 입력 멈췄을 때만 실행)
    function debounce(fn, delay) {
        var timer = null;
        return function () {
            var context = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }

    var debouncedFilter = debounce(filterEpisodes, 200); // 0.2초

    // contenteditable div에서 input 이벤트만 사용해도 충분
    input.addEventListener('input', debouncedFilter);
});





/* ===== 스토리 목차: 탭 동작(한 번에 하나만 열기) ===== */
mw.hook('wikipage.content').add(function ($content) {
  var $tables = $content.find('.story-toc-tabs');

  $tables.each(function () {
    var $table = $(this);
    var $tabs = $table.find('.story-tab');

    if (!$tabs.length) return;

    // 탭 라벨 클릭 이벤트: 이벤트 중복 방지 위해 네임스페이스 사용
    $table.off('click.storyTabs').on('click.storyTabs', '.story-tab-label', function (e) {
      e.preventDefault();
      e.stopPropagation();

      var $clickedTab = $(this).closest('.story-tab');

      // 다른 탭 모두 닫기
      $tabs.not($clickedTab).each(function () {
        var $t = $(this);
        if (!$t.hasClass('mw-collapsed')) {
          // mw-collapsible은 mw-collapsed 클래스 토글로 제어 가능
          $t.addClass('mw-collapsed');
          $t.find('.mw-collapsible-content').first().hide();
        }
      });

      // 클릭한 탭 열기
      if ($clickedTab.hasClass('mw-collapsed')) {
        $clickedTab.removeClass('mw-collapsed');
        $clickedTab.find('.mw-collapsible-content').first().show();
      }
    });

    // 초기 상태 보정:
    // 혹시 렌더링 환경에 따라 content가 display:block으로 남아있으면 collapsed면 숨김 처리
    $tabs.each(function () {
      var $t = $(this);
      var $panel = $t.find('.mw-collapsible-content').first();
      if ($t.hasClass('mw-collapsed')) {
        $panel.hide();
      } else {
        $panel.show();
      }
    });
  });
});


mw.hook('wikipage.content').add(function ($content) {
  $content.find('.story-tabs').each(function () {
    var $wrap = $(this);
    var $btns = $wrap.find('.story-tab-btn');
    var $panels = $wrap.find('.story-tab-panel');

    function closeAll() {
      $panels.each(function () {
        var $p = $(this);
        $p.addClass('mw-collapsed');
        $p.find('.mw-collapsible-content').first().hide();
      });
      $btns.removeClass('is-active');
    }

    function openPanel(selector) {
      var $p = $wrap.find(selector).first();
      if (!$p.length) return;

      $p.removeClass('mw-collapsed');
      $p.find('.mw-collapsible-content').first().show();
    }

    // 초기 상태 보정
    $panels.each(function () {
      var $p = $(this);
      var $c = $p.find('.mw-collapsible-content').first();
      if ($p.hasClass('mw-collapsed')) $c.hide();
      else $c.show();
    });

    // 클릭 이벤트
    $wrap.off('click.storyTabs10').on('click.storyTabs10', '.story-tab-btn', function (e) {
      e.preventDefault();
      var $btn = $(this);
      var target = $btn.attr('data-target');

      closeAll();
      $btn.addClass('is-active');
      openPanel(target);
    });

    // (선택) 첫 탭 기본 오픈: 필요하면 주석 해제
    // $btns.first().trigger('click');
  });
});