MediaWiki:Mobile.js：修订间差异

2025年12月19日 (五) 08:08的版本

// 移动端公告滚动效果
// 兼容 MobileFrontend 和桌面端

(function() {
    'use strict';
    
    // 初始化公告滚动
    function initSiteNoticeScroll() {
        var self = $('#siteNoticeScroll');
        if (!self.length || !self[0]) return;
        
        var ul = self.find('ul:first');
        if (!ul.length) return;
        
        var lis = ul.find('li');
        if (lis.length <= 1) return; // 如果只有一个或没有项目，不需要滚动
        
        // 获取容器宽度（使用多种方法确保获取到）
        var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
        if (containerWidth === 0) {
            // 如果宽度为0，可能是DOM还未完全加载，延迟重试
            setTimeout(initSiteNoticeScroll, 100);
            return;
        }
        
        // 获取容器宽度（使用多种方法确保获取到）
        var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
        
        // 设置 ul 宽度和初始 transform（使用 translate3d 启用 GPU 加速）
        var totalWidth = containerWidth * lis.length;
        ul.css({
            'width': totalWidth + 'px',
            'height': '25px',
            'margin': '0',
            'padding': '0',
            'list-style': 'none',
            'display': 'block',
            'position': 'relative',
            'white-space': 'nowrap',
            '-webkit-transform': 'translate3d(0, 0, 0)',
            '-moz-transform': 'translate3d(0, 0, 0)',
            '-ms-transform': 'translateX(0px)',
            '-o-transform': 'translate3d(0, 0, 0)',
            'transform': 'translate3d(0, 0, 0)',
            '-webkit-transition': 'transform 0.73s ease-in-out',
            '-moz-transition': 'transform 0.73s ease-in-out',
            '-o-transition': 'transform 0.73s ease-in-out',
            'transition': 'transform 0.73s ease-in-out',
            'will-change': 'transform'
        }).attr({
            'data-left': 0,
            'data-length': lis.length
        });
        
        // 设置每个 li 的宽度
        lis.css({
            'width': containerWidth + 'px',
            'height': '25px',
            'line-height': '25px',
            'list-style': 'none',
            'float': 'left',
            'display': 'inline-block',
            'box-sizing': 'border-box',
            'padding': '0 10px',
            'vertical-align': 'top',
            'flex-shrink': '0'
        });
        
        // 强制重绘
        ul[0].offsetHeight;
        
        // 清除之前的定时器（如果存在）
        var oldInterval = self.data('scrollInterval');
        if (oldInterval) {
            clearInterval(oldInterval);
        }
        
        // 开始滚动
        var scrollInterval = window.setInterval(function() {
            var dataset = ul[0].dataset;
            if (!dataset) return;
            
            var currentLeft = parseInt(dataset.left) || 0;
            var totalLength = parseInt(dataset.length) || lis.length;
            var newLeft = currentLeft + 1;
            
            // 如果到达最后一个，重置到第一个（索引0）
            if (newLeft >= totalLength) {
                newLeft = 0;
            }
            
            var translateX = -(newLeft * containerWidth);
            
            // 重置时先移除 transition，立即跳转，然后恢复
            if (newLeft === 0) {
                // 先移除 transition，立即跳转
                ul.css({
                    '-webkit-transition': 'none',
                    '-moz-transition': 'none',
                    '-o-transition': 'none',
                    'transition': 'none',
                    '-webkit-transform': 'translate3d(0, 0, 0)',
                    '-moz-transform': 'translate3d(0, 0, 0)',
                    '-ms-transform': 'translateX(0px)',
                    '-o-transform': 'translate3d(0, 0, 0)',
                    'transform': 'translate3d(0, 0, 0)'
                });
                // 强制重绘
                ul[0].offsetHeight;
                // 恢复 transition
                setTimeout(function() {
                    ul.css({
                        '-webkit-transition': 'transform 0.73s ease-in-out',
                        '-moz-transition': 'transform 0.73s ease-in-out',
                        '-o-transition': 'transform 0.73s ease-in-out',
                        'transition': 'transform 0.73s ease-in-out'
                    });
                }, 50);
            } else {
                // 正常滚动（使用 translate3d 启用 GPU 加速）
                ul.css({
                    '-webkit-transition': 'transform 0.73s ease-in-out',
                    '-moz-transition': 'transform 0.73s ease-in-out',
                    '-o-transition': 'transform 0.73s ease-in-out',
                    'transition': 'transform 0.73s ease-in-out',
                    '-webkit-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                    '-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                    '-ms-transform': 'translateX(' + translateX + 'px)',
                    '-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                    'transform': 'translate3d(' + translateX + 'px, 0, 0)'
                });
            }
            
            dataset.left = newLeft;
        }, 5000);
        
        // 窗口大小改变时重新计算（使用命名空间避免重复绑定）
        $(window).off('resize.siteNoticeScroll').on('resize.siteNoticeScroll', function() {
            containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
            if (containerWidth === 0) return;
            
            var totalWidth = containerWidth * lis.length;
            ul.css('width', totalWidth + 'px');
            lis.css('width', containerWidth + 'px');
            
            var currentLeft = parseInt(ul[0].dataset.left) || 0;
            if (currentLeft < 0) currentLeft = 0;
            var translateX = -(currentLeft * containerWidth);
            ul.css({
                '-webkit-transition': 'transform 0.37s ease-in-out',
                '-moz-transition': 'transform 0.37s ease-in-out',
                '-o-transition': 'transform 0.37s ease-in-out',
                'transition': 'transform 0.37s ease-in-out',
                '-webkit-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                '-moz-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                '-ms-transform': 'translateX(' + translateX + 'px)',
                '-o-transform': 'translate3d(' + translateX + 'px, 0, 0)',
                'transform': 'translate3d(' + translateX + 'px, 0, 0)'
            });
        });
        
        // 保存 interval ID，以便后续清理
        self.data('scrollInterval', scrollInterval);
    }
    
    // 初始化用户提示
    function initUserPrompt() {
        var siteNoticeScroll = $('#siteNoticeScroll');
        if (siteNoticeScroll.length === 0) {
            return false;
        }
        
        var ul = siteNoticeScroll.find('ul:first');
        if (ul.length === 0) {
            return false;
        }
        
        var currentUser = null;
        try {
            if (typeof mw !== 'undefined' && mw.config && mw.config.get) {
                currentUser = mw.config.get('wgUserName');
            }
        } catch (e) {
            // 忽略错误
        }
        
        var promptElement = $('#userPrompt');
        
        // 如果页面没有 userPrompt 元素，创建一个
        if (promptElement.length === 0) {
            promptElement = $('<li id="userPrompt"></li>');
            ul.append(promptElement);
        }
        
        // 设置内容
        if (currentUser && currentUser !== null && currentUser !== '') {
            // 已登录用户
            promptElement.html('<strong>欢迎回来，' + currentUser + '！感谢您对炼石百科的贡献！</strong>');
        } else {
            // 未登录用户
            promptElement.html('<strong>欢迎加入炼石百科<a href="/wiki/Special:用户登录"><font color="#3862AE">注册一个账号</font></a>，一起参与编写吧！</strong>');
        }
        
        return true;
    }
    
    // 防止重复初始化
    var initialized = false;
    
    // 等待 DOM 和 MediaWiki 加载完成
    function init() {
        if (initialized) {
            return; // 防止重复初始化
        }
        initialized = true;
        
        // 先初始化用户提示（必须在滚动初始化之前）
        var promptAdded = initUserPrompt();
        
        // 延迟初始化滚动效果，确保 DOM 完全更新
        setTimeout(function() {
            initSiteNoticeScroll();
        }, promptAdded ? 100 : 0);
    }
    
    // 多种初始化方式，确保在移动端和桌面端都能工作
    if (typeof $ !== 'undefined') {
        // jQuery 已加载
        $(document).ready(function() {
            init();
        });
        
        // 如果已经在 ready 状态，延迟执行（避免重复）
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
            setTimeout(function() {
                if (!initialized) {
                    init();
                }
            }, 200);
        }
    } else {
        // 等待 jQuery 加载
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                if (typeof $ !== 'undefined' && !initialized) {
                    setTimeout(init, 100);
                }
            });
        } else {
            // 如果 DOM 已加载，等待 jQuery
            var checkJQuery = setInterval(function() {
                if (typeof $ !== 'undefined' && !initialized) {
                    clearInterval(checkJQuery);
                    init();
                }
            }, 100);
            
            // 10秒后停止检查
            setTimeout(function() {
                clearInterval(checkJQuery);
            }, 10000);
        }
    }
    
    // 使用 MediaWiki 的 hook（如果可用）
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('mobile.init').add(function() {
            if (!initialized) {
                setTimeout(init, 200);
            }
        });
    }
})();