MediaWiki:Common.js:修订间差异

来自Age Of History 2 Chinese Wiki
跳转至:导航、​搜索
无编辑摘要
无编辑摘要
第1行: 第1行:
// Wait for document ready
/* 轮播图功能 */
mw.hook('wikipage.content').add(function() {
mw.hook('wikipage.content').add(function($content) {
   // Initialize carousels
   // 查找页面中所有轮播图
   initializeCarousels();
   $content.find('.mw-carousel').each(function() {
});
    const $carousel = $(this);
 
     const $items = $carousel.find('.carousel-item');
function initializeCarousels() {
     const $indicators = $carousel.find('.carousel-indicators');
  // Find all carousel containers
     const $prevBtn = $carousel.find('.carousel-prev');
  const carousels = document.querySelectorAll('.modern-carousel');
     const $nextBtn = $carousel.find('.carousel-next');
 
   
  carousels.forEach(function(carousel) {
     const track = carousel.querySelector('.carousel-track');
     const items = carousel.querySelectorAll('.carousel-item');
     const prevButton = carousel.querySelector('.carousel-button.prev');
     const nextButton = carousel.querySelector('.carousel-button.next');
     let currentIndex = 0;
     let currentIndex = 0;
    const slideCount = $items.length;
      
      
     // Set initial width for track
     if (slideCount === 0) return;
    track.style.width = `${items.length * 100}%`;
      
      
     // Function to move to specific slide
     // 创建指示器
     function moveToSlide(index) {
     for (let i = 0; i < slideCount; i++) {
       // Ensure index is within bounds
       const $indicator = $('<div class="indicator"></div>');
       if (index < 0) index = items.length - 1;
       if (i === 0) $indicator.addClass('active');
       if (index >= items.length) index = 0;
        
      $indicator.on('click', function() {
        goToSlide(i);
      });
        
        
       currentIndex = index;
       $indicators.append($indicator);
    }
   
    // 初始化第一张幻灯片
    $items.eq(0).addClass('active');
   
    // 给每个幻灯片添加点击事件
    $items.each(function() {
      const $item = $(this);
      const link = $item.data('link');
     
      if (link && link.length > 0) {
        $item.css('cursor', 'pointer').on('click', function() {
          window.location.href = link;
        });
      }
    });
   
    // 切换到指定幻灯片
    function goToSlide(index) {
      $items.removeClass('active');
      $indicators.find('.indicator').removeClass('active');
        
        
       // Move track
       $items.eq(index).addClass('active');
      track.style.transform = `translateX(-${currentIndex * (100 / items.length)}%)`;
      $indicators.find('.indicator').eq(index).addClass('active');
        
        
       // Update active class
       currentIndex = index;
       items.forEach(item => item.classList.remove('active'));
    }
       items[currentIndex].classList.add('active');
   
    // 上一张
    function prevSlide() {
       const newIndex = (currentIndex - 1 + slideCount) % slideCount;
      goToSlide(newIndex);
    }
   
    // 下一张
    function nextSlide() {
       const newIndex = (currentIndex + 1) % slideCount;
      goToSlide(newIndex);
     }
     }
      
      
     // Add hover effect
     // 绑定按钮事件
     items.forEach(function(item, index) {
     $prevBtn.on('click', function(e) {
       item.addEventListener('mouseenter', function() {
       e.preventDefault();
        moveToSlide(index);
      e.stopPropagation();
       });
       prevSlide();
     });
     });
      
      
     // Add navigation
     $nextBtn.on('click', function(e) {
    prevButton.addEventListener('click', function() {
       e.preventDefault();
       moveToSlide(currentIndex - 1);
      e.stopPropagation();
      nextSlide();
     });
     });
      
      
     nextButton.addEventListener('click', function() {
     // 自动播放
       moveToSlide(currentIndex + 1);
    let autoplayInterval = setInterval(nextSlide, 5000);
   
    $carousel.on('mouseenter', function() {
      clearInterval(autoplayInterval);
    }).on('mouseleave', function() {
       autoplayInterval = setInterval(nextSlide, 5000);
     });
     });
      
      
     // Initialize first slide as active
     // 触摸滑动支持
     moveToSlide(0);
     let touchStartX = 0;
    let touchEndX = 0;
      
      
     // Auto-rotate (optional)
     $carousel.on('touchstart', function(e) {
    let autoRotate = setInterval(function() {
       touchStartX = e.originalEvent.touches[0].clientX;
      moveToSlide(currentIndex + 1);
    }, 5000);
   
    // Pause auto-rotate on hover
    carousel.addEventListener('mouseenter', function() {
       clearInterval(autoRotate);
     });
     });
      
      
     // Resume auto-rotate on mouseleave
     $carousel.on('touchend', function(e) {
    carousel.addEventListener('mouseleave', function() {
       touchEndX = e.originalEvent.changedTouches[0].clientX;
       autoRotate = setInterval(function() {
     
         moveToSlide(currentIndex + 1);
      // 判断滑动方向
       }, 5000);
      if (touchEndX < touchStartX - 50) {
         nextSlide(); // 左滑,下一张
       } else if (touchEndX > touchStartX + 50) {
        prevSlide(); // 右滑,上一张
      }
     });
     });
   });
   });
}
});

2025年5月1日 (四) 19:57的版本

/* 轮播图功能 */
mw.hook('wikipage.content').add(function($content) {
  // 查找页面中所有轮播图
  $content.find('.mw-carousel').each(function() {
    const $carousel = $(this);
    const $items = $carousel.find('.carousel-item');
    const $indicators = $carousel.find('.carousel-indicators');
    const $prevBtn = $carousel.find('.carousel-prev');
    const $nextBtn = $carousel.find('.carousel-next');
    
    let currentIndex = 0;
    const slideCount = $items.length;
    
    if (slideCount === 0) return;
    
    // 创建指示器
    for (let i = 0; i < slideCount; i++) {
      const $indicator = $('<div class="indicator"></div>');
      if (i === 0) $indicator.addClass('active');
      
      $indicator.on('click', function() {
        goToSlide(i);
      });
      
      $indicators.append($indicator);
    }
    
    // 初始化第一张幻灯片
    $items.eq(0).addClass('active');
    
    // 给每个幻灯片添加点击事件
    $items.each(function() {
      const $item = $(this);
      const link = $item.data('link');
      
      if (link && link.length > 0) {
        $item.css('cursor', 'pointer').on('click', function() {
          window.location.href = link;
        });
      }
    });
    
    // 切换到指定幻灯片
    function goToSlide(index) {
      $items.removeClass('active');
      $indicators.find('.indicator').removeClass('active');
      
      $items.eq(index).addClass('active');
      $indicators.find('.indicator').eq(index).addClass('active');
      
      currentIndex = index;
    }
    
    // 上一张
    function prevSlide() {
      const newIndex = (currentIndex - 1 + slideCount) % slideCount;
      goToSlide(newIndex);
    }
    
    // 下一张
    function nextSlide() {
      const newIndex = (currentIndex + 1) % slideCount;
      goToSlide(newIndex);
    }
    
    // 绑定按钮事件
    $prevBtn.on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      prevSlide();
    });
    
    $nextBtn.on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      nextSlide();
    });
    
    // 自动播放
    let autoplayInterval = setInterval(nextSlide, 5000);
    
    $carousel.on('mouseenter', function() {
      clearInterval(autoplayInterval);
    }).on('mouseleave', function() {
      autoplayInterval = setInterval(nextSlide, 5000);
    });
    
    // 触摸滑动支持
    let touchStartX = 0;
    let touchEndX = 0;
    
    $carousel.on('touchstart', function(e) {
      touchStartX = e.originalEvent.touches[0].clientX;
    });
    
    $carousel.on('touchend', function(e) {
      touchEndX = e.originalEvent.changedTouches[0].clientX;
      
      // 判断滑动方向
      if (touchEndX < touchStartX - 50) {
        nextSlide(); // 左滑,下一张
      } else if (touchEndX > touchStartX + 50) {
        prevSlide(); // 右滑,上一张
      }
    });
  });
});