MediaWiki:Mobile.js：修订间差异

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

// 移动端公告滚动效果
// 兼容 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');
        
        // 调试：打印所有 li 的内容
        if (typeof console !== 'undefined' && console.log) {
            console.log('[SiteNotice] 找到 ' + lis.length + ' 个 li 元素:');
            for (var idx = 0; idx < lis.length; idx++) {
                var $li = lis.eq(idx);
                var text = $li.text().trim();
                console.log('[SiteNotice] li[' + idx + ']: "' + text + '"');
            }
        }
        
        // 检查并修复被分割的 li 元素
        // 如果第一个 li 包含"我们目前有"但不包含"次编辑"，说明被分割了
        if (lis.length > 0) {
            var firstLi = lis.eq(0);
            var firstText = firstLi.text().trim();
            
            if (typeof console !== 'undefined' && console.log) {
                console.log('[SiteNotice] 第一个 li 内容: "' + firstText + '"');
                console.log('[SiteNotice] 包含"我们目前有": ' + (firstText.indexOf('我们目前有') !== -1));
                console.log('[SiteNotice] 包含"次编辑": ' + (firstText.indexOf('次编辑') !== -1));
            }
            
            // 检查第一个 li 是否被分割（包含"我们目前有"但不包含"次编辑"）
            if (firstText.indexOf('我们目前有') !== -1 && firstText.indexOf('次编辑') === -1) {
                if (typeof console !== 'undefined' && console.log) {
                    console.log('[SiteNotice] 检测到第一个 li 被分割，开始查找需要合并的部分');
                }
                
                // 查找下一个包含"次编辑"的 li
                for (var i = 1; i < lis.length; i++) {
                    var nextLi = lis.eq(i);
                    var nextText = nextLi.text().trim();
                    
                    if (typeof console !== 'undefined' && console.log) {
                        console.log('[SiteNotice] 检查 li[' + i + ']: "' + nextText + '"');
                    }
                    
                    // 如果下一个 li 包含"次编辑"但不包含"我们目前有"，说明是分割的部分
                    if (nextText.indexOf('次编辑') !== -1 && nextText.indexOf('我们目前有') === -1) {
                        // 合并内容
                        var combinedHtml = firstLi.html() + ' ' + nextLi.html();
                        firstLi.html(combinedHtml);
                        nextLi.remove(); // 删除被合并的 li
                        if (typeof console !== 'undefined' && console.log) {
                            console.log('[SiteNotice] 合并了被分割的 li 元素，合并后内容: "' + firstLi.text().trim() + '"');
                        }
                        break;
                    }
                }
            }
        }
        
        // 重新获取修复后的 li 列表
        lis = ul.find('li');
        
        if (typeof console !== 'undefined' && console.log) {
            console.log('[SiteNotice] 修复后共有 ' + lis.length + ' 个 li 元素');
            for (var idx = 0; idx < lis.length; idx++) {
                var $li = lis.eq(idx);
                var text = $li.text().trim();
                console.log('[SiteNotice] 修复后 li[' + idx + ']: "' + text + '"');
            }
        }
        if (lis.length <= 1) return; // 如果只有一个或没有项目，不需要滚动
        
        // 获取容器宽度（使用多种方法确保获取到）
        var containerWidth = self.width() || self[0].offsetWidth || self[0].clientWidth;
        if (containerWidth === 0) {
            // 如果宽度为0，可能是DOM还未完全加载，延迟重试
            setTimeout(initSiteNoticeScroll, 100);
            return;
        }
        
        // 设置 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.each(function() {
            var $li = $(this);
            // 使用 attr 设置 style 属性，确保样式优先级最高
            var styleStr = 'width: ' + containerWidth + 'px !important; ' +
                          'height: 25px !important; ' +
                          'line-height: 25px !important; ' +
                          'list-style: none !important; ' +
                          'float: left !important; ' +
                          'display: inline-block !important; ' +
                          'box-sizing: border-box !important; ' +
                          'padding: 0 !important; ' +
                          'margin: 0 !important; ' +
                          'vertical-align: top !important; ' +
                          'flex-shrink: 0 !important; ' +
                          'white-space: nowrap !important; ' +
                          'overflow: visible !important; ' +
                          'text-overflow: clip !important; ' +
                          'text-align: center !important; ' +
                          'word-break: keep-all !important; ' +
                          'word-wrap: normal !important; ' +
                          'max-width: ' + containerWidth + 'px !important; ' +
                          'position: relative !important;';
            $li.attr('style', styleStr);
            
            // 确保所有子元素（包括 strong、a、font 等）都不会换行
            $li.find('*').each(function() {
                var $elem = $(this);
                $elem.attr('style', 
                    'white-space: nowrap !important; ' +
                    'display: inline !important; ' +
                    'text-align: center !important;'
                );
            });
        });
        
        // 强制重绘
        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.each(function() {
                var $li = $(this);
                var styleStr = 'width: ' + containerWidth + 'px !important; ' +
                              'white-space: nowrap !important; ' +
                              'overflow: visible !important; ' +
                              'text-overflow: clip !important; ' +
                              'text-align: center !important;';
                $li.attr('style', styleStr);
            });
            
            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() {
            // 再次确保所有 li 都有正确的样式（防止换行）
            var siteNoticeScroll = $('#siteNoticeScroll');
            if (siteNoticeScroll.length) {
                var ul = siteNoticeScroll.find('ul:first');
                if (ul.length) {
                    var lis = ul.find('li');
                    var containerWidth = siteNoticeScroll.width() || siteNoticeScroll[0].offsetWidth || siteNoticeScroll[0].clientWidth;
                    if (containerWidth > 0) {
                        lis.each(function() {
                            var $li = $(this);
                            $li.css({
                                'white-space': 'nowrap',
                                'overflow': 'hidden',
                                'text-overflow': 'ellipsis',
                                'text-align': 'center'
                            });
                        });
                    }
                }
            }
            initSiteNoticeScroll();
        }, promptAdded ? 200 : 100);
    }
    
    // 多种初始化方式，确保在移动端和桌面端都能工作
    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);
            }
        });
    }
})();