MediaWiki:Common.js

/* 轮播图功能 */
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(); // 右滑，上一张
      }
    });
  });
});
// Collapsible blocks functionality
$(document).ready(function() {
  // Initialize collapsible blocks
  $('.collapsible-header').click(function() {
     $(this).closest('.collapsible-block').toggleClass('active');
    //$(this).next('.collapsible-content').slideToggle();
    $(this).toggleClass('active');
  });
  
  // Initially hide collapsible content
  //$('.collapsible-content').hide();
  
  // Carousel functionality
  // This would need to be expanded based on your complex SCSS carousel
  // For now, a simple interval-based switch
  $('.carousel-container').each(function() {
    const $carousel = $(this);
    const $slides = $carousel.find('.rolling a');
    const slideCount = $slides.length;
    let currentSlide = 0;
    
    // Hide all slides except the first one
    $slides.css('left', '100%').eq(0).css('left', '0');
    
    // Only set up carousel if there are multiple slides
    if (slideCount > 1) {
      setInterval(function() {
        let nextSlide = (currentSlide + 1) % slideCount;
        
        // Move current slide out
        $slides.eq(currentSlide).animate({left: '-100%'}, 500);
        
        // Move next slide in
        $slides.eq(nextSlide).css('left', '100%').animate({left: '0'}, 500);
        
        currentSlide = nextSlide;
      }, 5000); // Change slide every 5 seconds
    }
  });
});
// 增强下拉菜单 - 同时支持点击和悬停
$(document).ready(function() {
  // 使菜单同时支持点击和悬停
  $('.navbar-nav > li.dropdown').each(function() {
    var $dropdown = $(this);
    
    // 保存原始Bootstrap事件处理
    var originalEvents = $._data($dropdown[0], 'events') || {};
    
    // 添加悬停功能
    var hoverDelay;
    
    $dropdown.on('mouseenter', function() {
      clearTimeout(hoverDelay);
      if (!$dropdown.hasClass('open')) {
        $('.navbar-nav > li.dropdown').removeClass('open');
        $dropdown.addClass('open');
      }
    }).on('mouseleave', function() {
      hoverDelay = setTimeout(function() {
        if (!$dropdown.is(':focus-within')) {
          $dropdown.removeClass('open');
        }
      }, 300); // 300ms延迟，防止意外关闭
    });
    
    // 确保点击仍然有效，但不会关闭已打开的菜单
    $dropdown.find('> a').on('click', function(e) {
      if ($dropdown.hasClass('open')) {
        e.stopPropagation(); // 阻止事件冒泡，防止菜单关闭
      }
    });
  });
  
  // 修复z-index问题
  $('body').append('<style>.navbar,.navbar-nav,.dropdown-menu{z-index:9999 !important;}.mw-body,#content{z-index:1 !important;}</style>');
});
/**
 * 为变色龙皮肤顶栏加载用户头像
 * 从多种可能的路径中尝试加载用户头像并应用到顶栏
 */
function loadUserAvatar() {
    var username = mw.config.get('wgUserName');
    if (username) {
        // 获取用户ID，是生成头像URL的关键
        $.get(mw.util.wikiScript('api'), {
            action: 'query',
            list: 'users',
            ususers: username,
            format: 'json'
        }).done(function(data) {
            if (data && data.query && data.query.users && data.query.users[0]) {
                var userId = data.query.users[0].userid;
                
                // 尝试几种可能的头像路径格式
                var possiblePaths = [
                    '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg',
                    '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png',
                    '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif',
                    '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg',
                    '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png', 
                    '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif'
                ];
                
                // 检查哪个路径可用
                function checkPath(index) {
                    if (index >= possiblePaths.length) {
                        // 所有路径都不可用，使用默认头像
                        applyAvatarCSS('/extensions/SocialProfile/images/default_s.gif');
                        return;
                    }
                    
                    var img = new Image();
                    img.onload = function() {
                        // 找到可用的路径
                        applyAvatarCSS(possiblePaths[index]);
                    };
                    img.onerror = function() {
                        // 尝试下一个路径
                        checkPath(index + 1);
                    };
                    img.src = mw.config.get('wgScriptPath') + possiblePaths[index];
                }
                
                checkPath(0);
            }
        });
    }
    
    function applyAvatarCSS(avatarUrl) {
        // 应用CSS规则
        $('<style>').text(
            '.navbar-userloggedin::before, ' +
            '#personal-inner::before, ' +
            '#p-personal .vector-menu-content-list > li:first-child > a::before, ' +
            '.navbar-personaltools > li:first-child > a::before {' +
            '  background-image: url("' + avatarUrl + '") !important;' +
            '}'
        ).appendTo('head');
    }
}

// 调用函数
$(document).ready(loadUserAvatar);