미디어위키:Common.js

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

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

/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
/* 간단한 페이드/슬라이드 쇼 (DHTML) */
mw.loader.using('jquery').then(function () {
  function initSlideshow($root) {
    var interval = Number($root.data('interval')) || 4000;
    var mode = String($root.data('transition') || 'fade').toLowerCase();
    var $rawSlides = $root.find('.slide');

    if (!$rawSlides.length) return;

    // 버튼 & 도트 UI
    var $prev = $('<button class="km-nav km-prev" type="button" aria-label="Previous">‹</button>');
    var $next = $('<button class="km-nav km-next" type="button" aria-label="Next">›</button>');
    var $dots = $('<div class="km-dots" role="tablist"></div>');

    var current = 0, timer = null;

    if (mode === 'slide') {
      // 슬라이드 모드: 트랙을 만들어 좌우로 이동
      var $track = $('<div class="km-track"></div>');
      $root.append($track);

      $rawSlides.each(function () {
        var $wrap = $('<div class="km-slide-item"></div>');
        $(this).appendTo($wrap);
        $track.append($wrap);
      });

      var $items = $track.find('.km-slide-item');

      function go(i) {
        current = (i + $items.length) % $items.length;
        var x = -current * 100;
        $track.css('transform', 'translateX(' + x + '%)');
        updateDots();
      }

      function next() { go(current + 1); }
      function prev() { go(current - 1); }

      // 도트 생성
      $items.each(function (idx) {
        var $d = $('<button class="km-dot" type="button" aria-label="Go to slide '+(idx+1)+'"></button>');
        $d.on('click', function () { go(idx); restart(); });
        $dots.append($d);
      });

      // 오토플레이
      function start() { timer = setInterval(next, interval); }
      function stop() { if (timer) { clearInterval(timer); timer = null; } }
      function restart() { stop(); start(); }
      function updateDots() {
        $dots.children().removeClass('active').eq(current).addClass('active');
      }

      $prev.on('click', function(){ prev(); restart(); });
      $next.on('click', function(){ next(); restart(); });

      $root.append($prev, $next, $dots);
      $root.on('mouseenter', stop).on('mouseleave', start);

      // 초기화
      go(0); start();

    } else {
      // 페이드 모드: 겹쳐놓고 opacity 전환
      var $items = $();
      $rawSlides.each(function () {
        var $wrap = $('<div class="km-slide-item"></div>');
        $(this).appendTo($wrap);
        $root.append($wrap);
        $items = $items.add($wrap);
      });

      function show(i) {
        current = (i + $items.length) % $items.length;
        $items.removeClass('active').eq(current).addClass('active');
        updateDots();
      }
      function next() { show(current + 1); }
      function prev() { show(current - 1); }

      // 도트 생성
      $items.each(function (idx) {
        var $d = $('<button class="km-dot" type="button" aria-label="Go to slide '+(idx+1)+'"></button>');
        $d.on('click', function () { show(idx); restart(); });
        $dots.append($d);
      });

      function start() { timer = setInterval(next, interval); }
      function stop() { if (timer) { clearInterval(timer); timer = null; } }
      function restart() { stop(); start(); }
      function updateDots() {
        $dots.children().removeClass('active').eq(current).addClass('active');
      }

      $prev.on('click', function(){ prev(); restart(); });
      $next.on('click', function(){ next(); restart(); });

      $root.append($prev, $next, $dots);
      $root.on('mouseenter', stop).on('mouseleave', start);

      // 초기화
      show(0); start();
    }
  }

  // 페이지 로드 시 실행 (미리보기/비주얼에디터 적용 포함)
  function boot() {
    $('.km-slideshow').each(function () {
      var $root = $(this);
      if (!$root.data('km-inited')) {
        $root.data('km-inited', true);
        initSlideshow($root);
      }
    });
  }
  mw.hook('wikipage.content').add(boot);
  $(boot);
});