MediaWiki:Common.js：修订间差异

2026年6月5日 (五) 22:19的版本

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/**
 * Blockland Wiki Liquid Glass Lighting System
 */
(function() {
    'use strict';
    
    var isPerformanceMode = function() {
        return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1');
    };

    var GLASS_SELECTORS = '#mw-panel-toc, .bl-hero, #citizen-sidebar-lastmod, .aero-news-box, .citizen-header, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox, .mwe-popups-container, .oo-ui-popupWidget-popup, .oo-ui-menuSelectWidget, .voy-box';

    var lastMouseX = 0;
    var lastMouseY = 0;

    var syncLight = function(e) {
        if (isPerformanceMode()) return;

        lastMouseX = e.clientX;
        lastMouseY = e.clientY;

        var elements = document.querySelectorAll(GLASS_SELECTORS);
        elements.forEach(function(el) {
            var rect = el.getBoundingClientRect();
            
            if (rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0) {
                var x = ((e.clientX - rect.left) / rect.width) * 100;
                var y = ((e.clientY - rect.top) / rect.height) * 100;
                
                el.style.setProperty('--mouse-x', x.toFixed(2) + '%');
                el.style.setProperty('--mouse-y', y.toFixed(2) + '%');
            }
        });
    };

    var initPopupLight = function(container) {
        if (isPerformanceMode()) return;
        
        var rect = container.getBoundingClientRect();
        if (rect.width > 0) {
            var x = ((lastMouseX - rect.left) / rect.width) * 100;
            var y = ((lastMouseY - rect.top) / rect.height) * 100;
            container.style.setProperty('--mouse-x', x.toFixed(2) + '%');
            container.style.setProperty('--mouse-y', y.toFixed(2) + '%');
        }
    };

    setInterval(function() {
        if (isPerformanceMode()) return; 
        var p = document.querySelector('.citizen-command-palette');
        if (p && !p.classList.contains('glass-show')) {
            p.classList.add('glass-show');
        }
    }, 100);

    var ticking = false;
    document.addEventListener('mousemove', function(e) {
        if (isPerformanceMode()) return;
        if (!ticking) {
            window.requestAnimationFrame(function() {
                syncLight(e);
                ticking = false;
            });
            ticking = true;
        }
    }, { passive: true });

    var modeObserver = new MutationObserver(function() {
        if (isPerformanceMode()) {
            document.querySelectorAll(GLASS_SELECTORS).forEach(function(el) {
                el.style.removeProperty('--mouse-x');
                el.style.removeProperty('--mouse-y');
            });
        }
    });
    modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

    window._liquidGlassInitPopup = initPopupLight;
})();

/**
 * Section25. Wiki 弹出预览菜单动画控制
 */
(function() {
    'use strict';
    
    var style = document.createElement('style');
    style.textContent = `
        .mwe-popups .mwe-popups-container { 
            opacity: 0 !important; 
            transform: translateY(-12px) !important;
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        } 
        .mwe-popups.popup-show .mwe-popups-container { 
            opacity: 1 !important; 
            transform: translateY(0) !important;
        }
        .mwe-popups.flipped-y .mwe-popups-container {
            transform: translateY(12px) !important;
        }
        .mwe-popups.flipped-y.popup-show .mwe-popups-container {
            transform: translateY(0) !important;
        }
    `;
    document.head.appendChild(style);
    
    var seen = new WeakSet();
    
    new MutationObserver(function(muts) {
        muts.forEach(function(m) {
            m.addedNodes.forEach(function(node) {
                if (node.classList && node.classList.contains('mwe-popups') && !seen.has(node)) {
                    seen.add(node);
                    
                    var container = node.querySelector('.mwe-popups-container');
                    if (!container) return;
                    
                    if (window._liquidGlassInitPopup) {
                        window._liquidGlassInitPopup(container);
                    }
                    
                    node.style.pointerEvents = 'none';
                    container.offsetHeight;
                    
                    requestAnimationFrame(function() {
                        requestAnimationFrame(function() {
                            node.classList.add('popup-show');
                            setTimeout(function() {
                                node.style.pointerEvents = '';
                            }, 350);
                        });
                    });
                }
            });
        });
    }).observe(document.body, { childList: true, subtree: true });
})();
/**
 * Section19. 通知面板动画控制
 * 检测到面板后再开始动画
 */
(function() {
    'use strict';
    
    function handlePopup(popup) {
        if (popup.dataset.animatorInited) return;
        popup.dataset.animatorInited = 'true';

        const observer = new MutationObserver(() => {
            const inner = popup.querySelector('.oo-ui-popupWidget-popup');
            if (!inner) return;

            const isVisible = popup.style.display !== 'none' && popup.offsetParent !== null;
            
if (isVisible) {
    if (inner.getAttribute('data-is-active') !== 'true') {
        inner.setAttribute('data-is-active', 'true');

        // 1. 初始化：置于下方并透明
        inner.style.setProperty('transition', 'none', 'important');
        inner.style.setProperty('opacity', '0', 'important');
        inner.style.setProperty('transform', 'translateY(20px)', 'important');

        inner.offsetHeight; // 触发重绘

        requestAnimationFrame(() => {
            setTimeout(() => {
                // 2. 向上滑动并渐显
                inner.style.setProperty('transition', 'opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)', 'important');
                inner.style.setProperty('opacity', '1', 'important');
                inner.style.setProperty('transform', 'translateY(0)', 'important');
            }, 10);
        });
    }
            } else {
                // 关闭时直接重置，不加动画，确保下次打开干净利落
                if (inner.getAttribute('data-is-active') === 'true') {
                    inner.removeAttribute('data-is-active');
                    inner.style.removeProperty('opacity');
                    inner.style.removeProperty('transform');
                    inner.style.removeProperty('transition');
                    inner.style.removeProperty('transform-origin');
                }
            }
        });

        observer.observe(popup, { attributes: true, attributeFilter: ['style', 'class'] });
    }

    const scanner = new MutationObserver(() => {
        document.querySelectorAll('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup').forEach(handlePopup);
    });
    scanner.observe(document.body, { childList: true, subtree: true });
    document.querySelectorAll('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup').forEach(handlePopup);
})();
(function() {
    'use strict';

    // ==================== 一键配置区 ====================
    // 强制深色模式的页面标题列表（填写页面显示标题，如 "Level5 - 无尽旅馆"）
    var forceDarkPages = [
        "Level5 - 无尽旅馆"
        // 在此添加更多页面，例如 "另一个页面标题"
    ];

    // 强制浅色模式的页面标题列表（一般留空即可）
    var forceLightPages = [
        // "Main Page"
    ];
    // ==================== 配置结束 ====================

    // 标准化标题：将空格转为下划线，用于匹配 body class
    function normalize(title) {
        return title.replace(/ /g, '_');
    }

    // 检查当前页面是否匹配任何一个配置项
    function isTargetPage(targetList, targetTheme) {
        if (!targetList || targetList.length === 0) return false;
        // 获取页面标题（firstHeading）
        var headingElem = document.getElementById('firstHeading');
        var headingText = headingElem ? headingElem.textContent.trim() : '';
        // 获取 body class
        var bodyClasses = document.body ? document.body.classList : null;
        // 获取 URL 路径（解码后）
        var path = decodeURIComponent(window.location.pathname);

        for (var i = 0; i < targetList.length; i++) {
            var title = targetList[i];
            var normalized = normalize(title);
            // 条件1：body class 包含 page-标准化标题
            if (bodyClasses && bodyClasses.contains('page-' + normalized)) {
                return true;
            }
            // 条件2：firstHeading 完全匹配原始标题
            if (headingText === title) {
                return true;
            }
            // 条件3：URL 路径中包含标准化标题
            if (path.indexOf(normalized) !== -1) {
                return true;
            }
        }
        return false;
    }

    // 强制设置主题模式
    function enforceTheme(targetTheme) {
        var html = document.documentElement;
        var classes = html.className.split(/\s+/);
        var targetClass = 'skin-theme-clientpref-' + targetTheme;
        var oppositeClass = (targetTheme === 'night') ? 'skin-theme-clientpref-day' : 'skin-theme-clientpref-night';
        var osClass = 'skin-theme-clientpref-os';
        var changed = false;
        var foundTarget = false;

        for (var i = 0; i < classes.length; i++) {
            if (classes[i] === oppositeClass || classes[i] === osClass) {
                classes[i] = targetClass;
                changed = true;
                foundTarget = true;
            } else if (classes[i] === targetClass) {
                foundTarget = true;
            }
        }
        if (!foundTarget) {
            classes.push(targetClass);
            changed = true;
        }
        if (changed) {
            html.className = classes.join(' ');
        }
    }

    // 确定需要强制哪种主题（深色优先于浅色）
    var needDark = isTargetPage(forceDarkPages, 'night');
    var needLight = isTargetPage(forceLightPages, 'day');
    var target = null;
    if (needDark && needLight) target = 'night';  // 冲突时深色优先
    else if (needDark) target = 'night';
    else if (needLight) target = 'day';
    else return;  // 不是目标页面，退出

    // 执行强制锁定
    enforceTheme(target);

    // 监听 class 变化，防止被用户或其他脚本改回去
    var observer = new MutationObserver(function() {
        enforceTheme(target);
    });
    observer.observe(document.documentElement, { attributes: true });

    // 额外监听点击（某些 UI 按钮可能会触发主题切换）
    document.addEventListener('click', function() {
        setTimeout(function() { enforceTheme(target); }, 10);
    });
})();