MediaWiki:Common.js：修订间差异

2025年5月10日 (六) 15:23的版本

/* 轮播图功能 */
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).next('.collapsible-content').slideToggle();
    $(this).toggleClass('active');
  });
  
  // Initially hide collapsible content
  $('.collapsible-content').hide();
});

/* Common.js - Database New主题JavaScript增强 */
$(function() {
    // 创建CRT效果容器
   function createCRTEffects() {
    if ($('.crt-effects').length === 0) {
        var crtContainer = $('<div>', {
            'class': 'crt-effects',
            html: [
                $('<div>', {'class': 'scan-line-effect'}),
                $('<div>', {'class': 'scan-animation'}).append(
                    $('<div>', {'class': 'fast-scan'})
                ),
                $('<div>', {'class': 'radial-glow'})
            ]
        });
        $('body').append(crtContainer);
    }
}

    
    // 初始化CRT效果
    createCRTEffects();
    
    // 橙幕切换功能
    if (typeof window.orangemu_toggle_init === 'undefined') {
        window.orangemu_toggle_init = true;
        
        // 为橙幕添加点击切换功能
        $(document).on('click', '.orangemu', function(e) {
            e.stopPropagation();
            $(this).toggleClass('orangemu_toggle_on');
        });
    }
    
    // 修复动画问题
    function fixAnimations() {
        // 延迟应用动画，防止页面加载时的闪烁
        setTimeout(function() {
            $('#mw-content-text > *').each(function(index) {
                $(this).css({
                    'animation': 'fadeIn 0.5s ease-out forwards',
                    'animation-delay': (index * 0.1) + 's',
                    'opacity': '0'
                });
            });
        }, 100);
    }
    
    // 应用动画修复
    $(document).ready(function() {
        fixAnimations();
    });
    
    // 监听新内容加载（如AJAX）
    mw.hook('wikipage.content').add(function($content) {
        if ($content.attr('id') === 'mw-content-text') {
            fixAnimations();
        }
    });
    
    // 添加复古终端效果的打字动画
    function typeWriter(element, text, speed) {
        var i = 0;
        element.empty();
        function type() {
            if (i < text.length) {
                element.append(text.charAt(i));
                i++;
                setTimeout(type, speed);
            }
        }
        type();
    }
    
    // 为特定元素应用打字效果
    $('.terminal-text').each(function() {
        var text = $(this).text();
        typeWriter($(this), text, 50);
    });
    
    // 添加闪烁光标效果
    function createBlinkingCursor() {
        var cursor = $('<span>', {
            'class': 'terminal-cursor',
            text: '▋'
        });
        
        setInterval(function() {
            cursor.toggle();
        }, 500);
        
        return cursor;
    }
    
    // 为终端元素添加光标
    $('.terminal').each(function() {
        $(this).append(createBlinkingCursor());
    });
    
    // 模拟CRT屏幕抖动效果
    function screenGlitch() {
        var container = $('#content');
        container.css('transform', 'translate(' + (Math.random() * 2 - 1) + 'px, ' + (Math.random() * 2 - 1) + 'px)');
        setTimeout(function() {
            container.css('transform', 'translate(0, 0)');
        }, 50);
    }
    
    // 随机触发屏幕抖动
    setInterval(function() {
        if (Math.random() < 0.005) { // 0.5%的概率
            screenGlitch();
        }
    }, 1000);
    
    // 为页面添加启动动画
    function bootSequence() {
        $('body').addClass('booting');
        setTimeout(function() {
            $('body').removeClass('booting').addClass('booted');
        }, 500);
    }
    
    // 页面加载时执行启动序列
    bootSequence();
});

// 辅助CSS类
$(function() {
    // 动态添加一些必要的CSS
    var customStyles = `
        .terminal-cursor {
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        .booting #content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.5s ease-out;
        }
        
        .booted #content {
            opacity: 1;
            transform: scale(1);
        }
        
        .terminal {
            font-family: var(--mono-font);
            background-color: rgb(var(--black-monochrome));
            color: rgb(var(--bright-accent));
            padding: 1rem;
            border: 2px solid rgb(var(--bright-accent));
            box-shadow: 0 0 10px rgba(var(--bright-accent), 0.3);
        }
        
        /* 修复动画闪烁问题 */
        #mw-content-text > * {
            visibility: visible;
        }
        
        .mw-parser-output > *.animated {
            animation: none !important;
        }
    `;
    
    $('<style>').text(customStyles).appendTo('head');
});

// 修复变色龙皮肤的Bootstrap组件
$(function() {
    function fixBootstrapComponents() {
        // 修复导航栏
        $('.navbar').css({
            'background-color': 'rgb(10, 10, 10)',
            'border-bottom': '1px solid rgb(229, 140, 36)'
        });
        
        // 修复下拉菜单
        $('.dropdown-menu').css({
            'background-color': 'rgb(10, 10, 10)',
            'border': '1px solid rgb(229, 140, 36)'
        });
        
        // 修复按钮
        $('.btn').css({
            'background-color': 'rgb(72, 69, 60)',
            'border': '1px solid rgb(229, 140, 36)',
            'color': 'rgb(229, 140, 36)'
        });
        
        // 修复表单控件
        $('.form-control').css({
            'background-color': 'rgb(10, 10, 10)',
            'border': '1px solid rgb(229, 140, 36)',
            'color': 'rgb(229, 140, 36)'
        });
    }
    
    // 应用样式修复
    fixBootstrapComponents();
    
    // 监听DOM变化
    var observer = new MutationObserver(function(mutations) {
        fixBootstrapComponents();
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});
// 顶栏头像显示
// 增强的头像显示
$(document).ready(function() {
    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');
    }
});
/* Windows XP风格的MediaWiki JavaScript增强 */

// 等待文档加载完成
$(document).ready(function() {
    // 添加扫描线效果
      
    // 添加XP窗口控制按钮(仅视觉效果)
    addWindowControls();
    
    // 添加系统时钟
    addSystemClock();
    
    // 添加开始菜单功能
    setupStartMenu();
    
    // 添加窗口拖动功能
    makeWindowsDraggable();
    
    // 右下角工具提示
    addSystemTrayIcon();
});


// 添加XP窗口控制按钮
function addWindowControls() {
    // 为内容区域添加窗口控制按钮的点击效果
    $(document).on('click', '.lightblock::after, .darkblock::after, h1::after, h2::after, h3::after, h4::after, h5::after, h6::after, #firstHeading::after, .section-title::after, .notaninfobox > .infobox-title::after, .infobox th::after, .error-dialog::after, #toc::after, .toc::after, .navbox-title::after, table.navbox th::after, .mw-carousel::after', function(e) {
        e.preventDefault();
        
        // 定位到被点击的元素
        var $clickedElement = $(this);
        var $parentElement = $clickedElement.parent();
        
        // 添加关闭动画效果
        $parentElement.css({
            'transition': 'all 0.3s ease',
            'opacity': '0',
            'transform': 'scale(0.9)'
        });
        
        // 半秒后恢复元素
        setTimeout(function() {
            $parentElement.css({
                'opacity': '1',
                'transform': 'scale(1)'
            });
        }, 500);
    });
    
    // 为最小化按钮添加点击效果
    $(document).on('click', '.min-button, h1::before, h2::before, h3::before, h4::before, h5::before, h6::before, #firstHeading::before', function(e) {
        e.preventDefault();
        
        // 定位到被点击的元素
        var $clickedElement = $(this);
        var $parentElement = $clickedElement.parent();
        
        // 添加最小化动画效果
        $parentElement.css({
            'transition': 'all 0.3s ease',
            'opacity': '0.5',
            'transform': 'translateY(50px) scale(0.9)'
        });
        
        // 在任务栏添加最小化窗口图标
        var windowTitle = $parentElement.find('h1, h2, h3, h4, h5, h6').first().text() || 'Window';
        if (windowTitle.length > 20) windowTitle = windowTitle.substring(0, 20) + '...';
        
        var $minimizedWindow = $('<div class="minimized-window">' + windowTitle + '</div>');
        $('body').append($minimizedWindow);
        
        // 点击任务栏图标恢复窗口
        $minimizedWindow.click(function() {
            $parentElement.css({
                'opacity': '1',
                'transform': 'translateY(0) scale(1)'
            });
            $(this).remove();
        });
    });
    
    // 为最大化按钮添加点击效果
    $(document).on('click', '.max-button, h1 span::after, h2 span::after, h3 span::after, h4 span::after, h5 span::after, h6 span::after, #firstHeading span::after', function(e) {
        e.preventDefault();
        
        // 定位到被点击的元素
        var $clickedElement = $(this);
        var $parentElement = $clickedElement.parent();
        
        // 切换最大化状态
        if (!$parentElement.data('maximized')) {
            // 保存原始尺寸和位置
            $parentElement.data('original-width', $parentElement.width());
            $parentElement.data('original-height', $parentElement.height());
            $parentElement.data('original-position', $parentElement.css('position'));
            $parentElement.data('original-top', $parentElement.css('top'));
            $parentElement.data('original-left', $parentElement.css('left'));
            $parentElement.data('original-right', $parentElement.css('right'));
            $parentElement.data('original-bottom', $parentElement.css('bottom'));
            $parentElement.data('original-z-index', $parentElement.css('z-index'));
            
            // 最大化
            $parentElement.css({
                'transition': 'all 0.3s ease',
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'width': '100%',
                'height': '100%',
                'z-index': '9999'
            });
            
            $parentElement.data('maximized', true);
            $clickedElement.text('❐');
        } else {
            // 恢复原始尺寸和位置
            $parentElement.css({
                'transition': 'all 0.3s ease',
                'position': $parentElement.data('original-position'),
                'top': $parentElement.data('original-top'),
                'left': $parentElement.data('original-left'),
                'right': $parentElement.data('original-right'),
                'bottom': $parentElement.data('original-bottom'),
                'width': $parentElement.data('original-width'),
                'height': $parentElement.data('original-height'),
                'z-index': $parentElement.data('original-z-index')
            });
            
            $parentElement.data('maximized', false);
            $clickedElement.text('□');
        }
    });
}

// 添加系统时钟
function addSystemClock() {
    // 创建时钟元素
    var $clock = $('<div class="taskbar-clock"></div>');
    $('body').append($clock);
    
    // 更新时钟函数
    function updateClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        
        // 格式化时间
        if (minutes < 10) minutes = '0' + minutes;
        
        // 设置时钟显示
        $clock.text(hours + ':' + minutes);
    }
    
    // 初始化时钟
    updateClock();
    
    // 每分钟更新一次时钟
    setInterval(updateClock, 60000);
}

// 添加开始菜单
function setupStartMenu() {
    // 创建开始菜单元素
    var $startButton = $('body::after');
    var $startMenu = $('<div id="xp-start-menu"></div>').css({
        'position': 'fixed',
        'left': '0',
        'bottom': '30px',
        'width': '200px',
        'background-color': 'white',
        'border': '2px solid #0054e3',
        'border-bottom': 'none',
        'box-shadow': '2px -2px 5px rgba(0, 0, 0, 0.3)',
        'z-index': '10000',
        'display': 'none'
    });
    
    // 添加菜单顶部
    var $menuTop = $('<div class="start-menu-top"></div>').css({
        'height': '60px',
        'background': 'linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb)',
        'color': 'white',
        'padding': '10px',
        'font-weight': 'bold',
        'display': 'flex',
        'align-items': 'center'
    });
    
    $menuTop.html('<span style="font-size: 16px;">User Name</span>');
    $startMenu.append($menuTop);
    
    // 添加菜单项
    var $menuItems = $('<div class="start-menu-items"></div>').css({
        'background-color': 'white',
        'padding': '5px 0'
    });
    
    // 定义菜单项
    var menuItemsData = [
        { icon: '📄', text: '我的文档', link: '#' },
        { icon: '🖼️', text: '我的图片', link: '#' },
        { icon: '🎵', text: '我的音乐', link: '#' },
        { icon: '⚙️', text: '控制面板', link: '#' },
        { icon: '🔍', text: '搜索', link: '/wiki/Special:Search' },
        { icon: '❓', text: '帮助和支持', link: '/wiki/Help:目录' },
        { icon: '🚪', text: '注销', link: '/wiki/Special:UserLogout' }
    ];
    
    // 添加菜单项
    $.each(menuItemsData, function(index, item) {
        var $menuItem = $('<div class="start-menu-item"></div>').css({
            'padding': '5px 10px',
            'display': 'flex',
            'align-items': 'center',
            'cursor': 'pointer'
        });
        
        $menuItem.html('<span style="margin-right: 10px; font-size: 16px;">' + item.icon + '</span>' + 
                      '<span>' + item.text + '</span>');
        
        // 添加悬停效果
        $menuItem.hover(
            function() {
                $(this).css('background-color', '#e0ecff');
            },
            function() {
                $(this).css('background-color', 'transparent');
            }
        );
        
        // 添加链接功能
        $menuItem.click(function() {
            window.location.href = item.link;
        });
        
        $menuItems.append($menuItem);
    });
    
    $startMenu.append($menuItems);
    
    // 添加开始菜单到body
    $('body').append($startMenu);
    
    // 为开始按钮添加点击事件
    $(document).on('click', 'body::after', function(e) {
        $startMenu.toggle();
    });
    
    // 点击其他区域关闭开始菜单
    $(document).click(function(e) {
        if (!$(e.target).is('body::after') && !$(e.target).closest('#xp-start-menu').length) {
            $startMenu.hide();
        }
    });
}

// 使窗口可拖动
function makeWindowsDraggable() {
    // 让所有具有标题栏的元素可拖动
    $('.main-page-banner, .announcement-container, .recent-pages-container .page-section, .featured-content-container .feature-item, .tools-container .tool-item, .news-container, .mw-carousel, .infobox, .notaninfobox, #toc, .toc, .navbox, .modulebox, .community-updates, .logoblock, .error-dialog, .lightblock, .darkblock').each(function() {
        var $window = $(this);
        var $header = $window.find('.section-title, .notaninfobox > .infobox-title, .infobox th, h1, h2, h3, h4, h5, h6, #firstHeading, .navbox-title, table.navbox th').first();
        
        if ($header.length) {
            // 设置窗口的基本样式
            $window.css({
                'position': 'relative'
            });
            
            // 让标题栏可拖动
            $header.css({
                'cursor': 'move'
            }).on('mousedown', function(e) {
                // 只有当没有点击窗口控制按钮时才允许拖动
                if (!$(e.target).hasClass('min-button') && 
                    !$(e.target).hasClass('max-button') && 
                    !$(e.target).is('h1::after') && 
                    !$(e.target).is('h2::after') && 
                    !$(e.target).is('h3::after') && 
                    !$(e.target).is('h4::after') && 
                    !$(e.target).is('h5::after') && 
                    !$(e.target).is('h6::after') && 
                    !$(e.target).is('#firstHeading::after') && 
                    !$(e.target).is('.section-title::after') &&
                    !$(e.target).is('.notaninfobox > .infobox-title::after') && 
                    !$(e.target).is('.infobox th::after') && 
                    !$(e.target).is('.error-dialog::after') && 
                    !$(e.target).is('#toc::after') && 
                    !$(e.target).is('.toc::after') && 
                    !$(e.target).is('.navbox-title::after') && 
                    !$(e.target).is('table.navbox th::after') && 
                    !$(e.target).is('.mw-carousel::after')) {
                    
                    var startX = e.pageX;
                    var startY = e.pageY;
                    var startTop = parseInt($window.css('top')) || 0;
                    var startLeft = parseInt($window.css('left')) || 0;
                    var windowWidth = $window.outerWidth();
                    var windowHeight = $window.outerHeight();
                    
                    // 确保窗口在可视区域内
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    
                    // 设置窗口为绝对定位，这样可以移动
                    $window.css({
                        'position': 'absolute',
                        'z-index': '1000'
                    });
                    
                    $(document).on('mousemove', function(e) {
                        var newLeft = startLeft + (e.pageX - startX);
                        var newTop = startTop + (e.pageY - startY);
                        
                        // 限制窗口在可视区域内
                        newLeft = Math.max(0, Math.min(newLeft, viewportWidth - windowWidth));
                        newTop = Math.max(0, Math.min(newTop, viewportHeight - windowHeight));
                        
                        $window.css({
                            'top': newTop + 'px',
                            'left': newLeft + 'px'
                        });
                    });
                    
                    $(document).on('mouseup', function() {
                        $(document).off('mousemove mouseup');
                    });
                    
                    e.preventDefault();
                }
            });
        }
    });
}

// 添加系统托盘图标
function addSystemTrayIcon() {
    // 创建系统托盘图标
    var $trayIcon = $('<div class="system-tray-icon"></div>').css({
        'position': 'fixed',
        'right': '30px',
        'bottom': '5px',
        'width': '16px',
        'height': '16px',
        'background-image': 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3E%3Ccircle cx=\'8\' cy=\'8\' r=\'7\' fill=\'%23ffffff\'/%3E%3Cpath d=\'M8 3v5h3\' stroke=\'%23000000\' stroke-width=\'2\' fill=\'none\'/%3E%3C/svg%3E")',
        'background-repeat': 'no-repeat',
        'background-size': 'contain',
        'cursor': 'pointer',
        'z-index': '10000'
    });
    
    // 添加到body
    $('body').append($trayIcon);
    
    // 添加工具提示
    var $tooltip = $('<div class="system-tray-tooltip"></div>').css({
        'position': 'fixed',
        'right': '20px',
        'bottom': '35px',
        'padding': '5px 10px',
        'background-color': '#ffffcc',
        'border': '1px solid #999',
        'font-size': '12px',
        'display': 'none',
        'z-index': '10001',
        'box-shadow': '2px 2px 5px rgba(0, 0, 0, 0.2)'
    });
    
    $tooltip.text('当前时间: ' + new Date().toLocaleTimeString());
    $('body').append($tooltip);
    
    // 鼠标悬停显示工具提示
    $trayIcon.hover(
        function() {
            $tooltip.show();
        },
        function() {
            $tooltip.hide();
        }
    );
    
    // 定时更新工具提示内容
    setInterval(function() {
        $tooltip.text('当前时间: ' + new Date().toLocaleTimeString());
    }, 1000);
}