MediaWiki:Common.js：修订间差异

2026年10月22日 (四) 12:16的最新版本

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

    /* 光线追踪目标。
       Citizen 3.24 改版后：#citizen-sidebar-lastmod 已不存在，
       最后修改时间面板的 id 变成 #citizen-page-aside-lastmod，
       侧栏面板统一为 .citizen-page-aside__panel —— 旧 ID 保留仅用于兼容旧缓存 HTML。 */
    var GLASS_SELECTORS = '#mw-panel-toc, #citizen-toc, .citizen-toc-card, #citizen-page-aside-lastmod, .citizen-page-aside__panel, #citizen-sidebar-lastmod, .bl-hero, .aero-news-box, .citizen-header, .citizen-menu__card, .citizen-command-palette, .infobox, table.ambox, .navbox, .mwe-popups-container, .oo-ui-popupWidget-popup, .oo-ui-menuSelectWidget, .voy-box, .cs-stream';

    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';

    // 容器特征
    const CONTAINER_STYLE = "font-family: -apple-system, 'Segoe UI', Roboto, sans-serif";

    // 检测当前是否为暗色模式
    function isDarkMode() {
        const html = document.documentElement;
        // 手动深色模式
        if (html.classList.contains('skin-theme-clientpref-night')) {
            return true;
        }
        // 系统深色模式（需要同时满足系统偏好为暗色，且类为 os）
        if (html.classList.contains('skin-theme-clientpref-os')) {
            return window.matchMedia('(prefers-color-scheme: dark)').matches;
        }
        return false;
    }

    // 查找容器
    function findContainer() {
        return document.querySelector(`div[style*="${CONTAINER_STYLE}"]`);
    }

    // 保存原始颜色并设置新颜色（用于后续恢复）
    function setAndSave(el, color) {
        if (!el.dataset.blOrigColor) {
            el.dataset.blOrigColor = el.style.color || '';
        }
        el.style.color = color;
    }

    // 应用暗色适配（直接修改内联样式）
    function applyDark(container) {
        if (!container) return;

        // 1. 涨幅变化区域（font-size: 13px）：保留红/绿色但调亮
        container.querySelectorAll('div[style*="font-size: 13px"]').forEach(el => {
            const currentColor = el.style.color;
            if (currentColor === '#f43f5e' || currentColor === 'rgb(244, 63, 94)') {
                setAndSave(el, '#f87171');
            } else if (currentColor === '#10b981' || currentColor === 'rgb(16, 185, 129)') {
                setAndSave(el, '#34d399');
            }
        });

        // 2. 链接：改为蓝色
        container.querySelectorAll('a').forEach(el => {
            setAndSave(el, '#60a5fa');
        });

        // 3. "Core Assets / 主币" 分区标题：在暗色下过暗，调亮
        container.querySelectorAll('div[style*="font-size: 13px"][style*="text-transform: uppercase"]').forEach(el => {
            if (el.textContent.includes('Core Assets') || el.textContent.includes('主币')) {
                setAndSave(el, '#e2e8f0');
            }
        });

        // 4. 其他带颜色的元素：改为白色
        container.querySelectorAll('[style*="color:"]').forEach(el => {
            // 跳过涨幅变化区域
            if (el.matches('div[style*="font-size: 13px"]')) return;
            // 跳过链接
            if (el.tagName === 'A') return;

            const currentColor = el.style.color;
            // 保留原有的红绿色转换逻辑（用于其他区域的涨跌色）
            if (currentColor === '#f43f5e' || currentColor === 'rgb(244, 63, 94)') {
                setAndSave(el, '#f87171');
            } else if (currentColor === '#10b981' || currentColor === 'rgb(16, 185, 129)') {
                setAndSave(el, '#34d399');
            } else {
                setAndSave(el, '#ffffff');
            }
        });

        // 保存 border 原始颜色并设置暗色
        // 同时匹配 hex (#f1f5f9) 和浏览器转义后的 rgb(241,245,249)
        container.querySelectorAll('[style*="border-bottom: 1px solid #f1f5f9"], [style*="border-bottom:1px solid #f1f5f9"], [style*="border-bottom: 1px solid rgb(241, 245, 249)"], [style*="border-bottom:1px solid rgb(241, 245, 249)"]')
            .forEach(el => {
                if (!el.dataset.blOrigBorder) el.dataset.blOrigBorder = el.style.borderBottomColor || '';
                el.style.borderBottomColor = 'rgba(255,255,255,0.08)';
            });
        container.querySelectorAll('[style*="border-top: 1px dashed #e2e8f0"], [style*="border-top:1px dashed #e2e8f0"], [style*="border-top: 1px dashed rgb(226, 232, 240)"], [style*="border-top:1px dashed rgb(226, 232, 240)"]')
            .forEach(el => {
                if (!el.dataset.blOrigBorder) el.dataset.blOrigBorder = el.style.borderTopColor || '';
                el.style.borderTopColor = 'rgba(255,255,255,0.08)';
            });
    }

    // 移除暗色适配（恢复原始内联样式）
    function removeDark(container) {
        if (!container) return;

        // 恢复所有被修改的颜色
        container.querySelectorAll('[data-bl-orig-color]').forEach(el => {
            const orig = el.dataset.blOrigColor;
            if (orig) {
                el.style.color = orig;
            } else {
                el.style.color = '';
            }
            delete el.dataset.blOrigColor;
        });

        // 恢复所有被修改的边框
        container.querySelectorAll('[data-bl-orig-border]').forEach(el => {
            const orig = el.dataset.blOrigBorder;
            if (orig) {
                el.style.borderBottomColor = orig;
                el.style.borderTopColor = orig;
            } else {
                el.style.borderBottomColor = '';
                el.style.borderTopColor = '';
            }
            delete el.dataset.blOrigBorder;
        });
    }

    // 主执行函数：根据当前主题状态处理
    function run() {
        const container = findContainer();
        if (!container) return;

        if (isDarkMode()) {
            applyDark(container);
        } else {
            removeDark(container);
        }
    }

    // 页面加载完成后执行一次
    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', run);
        } else {
            run();
        }
    }

    // 监听主题切换
    function setupListeners() {
        // 1. 监听 html 元素的 class 变化（手动切换主题）
        const html = document.documentElement;
        const observer = new MutationObserver(function(mutations) {
            for (const mutation of mutations) {
                if (mutation.attributeName === 'class') {
                    run();
                    break;
                }
            }
        });
        observer.observe(html, { attributes: true, attributeFilter: ['class'] });

        // 2. 监听系统偏好变化（当使用 os 模式时）
        const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
        // 使用现代事件监听（旧浏览器可能需要 addListener）
        if (darkModeMedia.addEventListener) {
            darkModeMedia.addEventListener('change', function(e) {
                // 仅当当前是 os 模式时才响应，否则用户手动覆盖了
                if (html.classList.contains('skin-theme-clientpref-os')) {
                    run();
                }
            });
        } else if (darkModeMedia.addListener) {
            darkModeMedia.addListener(function(e) {
                if (html.classList.contains('skin-theme-clientpref-os')) {
                    run();
                }
            });
        }
    }

    // 启动
    init();
    setupListeners();
})();



$(function () {
    $("#bl-create-page").click(function (e) {
        e.preventDefault();

        let title = $("#bl-create-title").val().trim();

        if (!title) {
            alert("请输入页面名称");
            return;
        }

        window.location.href =
            mw.config.get("wgScript") +
            "?title=" +
            encodeURIComponent(title) +
            "&veaction=edit";
    });
});
/**
 * Section27. 桌面态目录面板的光环（#citizen-toc）
 *
 * 为什么要在 JS 里做：
 *   桌面态 #citizen-toc 本身就是 overflow-y:auto 的滚动容器
 *   （源码 resources/skins.citizen.styles/components/TableOfContents.less
 *     的 @media min-width-breakpoint-desktop 段：.citizen-toc { overflow-y: auto }）。
 *   而其它面板的光环是「::before + radial-gradient + mask 挖出边框那一圈」，
 *   这种伪元素一旦放进滚动容器，就会跟着内容一起滚 —— 滚到底光环错位留在半空。
 *
 * 做法：
 *   仍然用和其它面板【完全相同】的径向光环（CSS 侧写在
 *   @media min-width:1120px 的 #citizen-toc.citizen-toc.bl-toc-ring-js::before 里），
 *   这里只做一件事：把 nav 的滚动量写成 --bl-toc-scroll，
 *   CSS 再用 transform 抵消位移，环就「钉」在面板上，观感与别的面板一模一样。
 *   nav 上有 .bl-toc-ring-js 才启用这套；没这个类时 CSS 退回一条静态细光环。
 *
 *   ⚠ 试过但效果不对的做法：把环拆成「四条 inset 阴影边」、每条边一个亮度。
 *     那种做法整条边会一起亮，而径向光圈只在鼠标附近约 150px 的弧段亮 ——
 *     在竖长的目录面板上就是「光线范围明显比别的面板大很多」。
 *
 *   Basic（性能模式）下和其它光效一样跳过：摘掉类名、清掉变量，退回静态底线。
 */
(function () {
    'use strict';

    var NAV_ID = 'citizen-toc';
    var raf = 0;

    var isPerformance = function () {
        return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1');
    };

    var paint = function () {
        raf = 0;
        var el = document.getElementById(NAV_ID);
        if (!el) return;

        if (isPerformance()) {
            el.classList.remove('bl-toc-ring-js');
            el.style.removeProperty('--bl-toc-scroll');
            return;
        }

        el.classList.add('bl-toc-ring-js');
        el.style.setProperty('--bl-toc-scroll', el.scrollTop.toFixed(1) + 'px');
    };

    var schedule = function () {
        if (!raf) raf = window.requestAnimationFrame(paint);
    };

    /* 目录面板【内部】滚动：scroll 事件不冒泡，所以在捕获阶段监听 */
    document.addEventListener('scroll', function (e) {
        if (e.target && e.target.id === NAV_ID) schedule();
    }, { capture: true, passive: true });

    /* 页面滚动 / 改变尺寸：面板在视口里的位置变了，重算 */
    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule, { passive: true });

    /* 明暗切换、性能模式切换都会改 <html> 的 class */
    new MutationObserver(schedule).observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class']
    });

    /* 目录是服务端渲染，正常在 DOMContentLoaded 时就有了；
       万一被脚本后置，最多再试 10 次（每次 300ms）。 */
    var boot = function (tries) {
        if (document.getElementById(NAV_ID)) { paint(); return; }
        if (tries > 0) window.setTimeout(function () { boot(tries - 1); }, 300);
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { boot(10); });
    } else {
        boot(10);
    }
})();

/**
 * Section28. 偏好面板文案改写
 *
 * 「行为」→「主题」、「性能模式」→「Aero」、描述 →「是否开启Aero」。
 * 这三条文案来自系统消息（i18n/zh-hans.json）：
 *   citizen-preferences-section-behavior         行为
 *   citizen-feature-performance-mode-name        性能模式
 *   citizen-feature-performance-mode-description 减少动画和视觉效果
 * 改消息页要动 wiki 侧，所以这里两手：
 *   ① 先 mw.messages.set 覆盖 —— 面板若在之后渲染，直接就是新文案；
 *   ② MutationObserver 兜底改已经渲染出来的文本（Vue 重渲染后也会被再改回来）。
 * 只替换纯文本节点，且只在内容确实含旧串时才写，避免和 Vue 互相触发死循环。
 */
(function () {
    'use strict';

    var MESSAGES = {
        'citizen-preferences-section-behavior': '主题',
        'citizen-feature-performance-mode-name': 'Aero',
        'citizen-feature-performance-mode-description': '是否开启Aero'
    };

    /* ① 覆盖消息（越早越好） */
    var applyMessages = function () {
        if (window.mw && mw.messages && typeof mw.messages.set === 'function') {
            try { mw.messages.set(MESSAGES); } catch (e) { /* 忽略 */ }
        }
    };
    applyMessages();
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyMessages);
    }

    /* ② 兜底：改已经渲染出来的文本 */
    var PAIRS = [
        ['.citizen-preferences-section__heading', '行为', '主题'],
        ['.cdx-label__label__text', '性能模式', 'Aero'],
        ['.cdx-label__description', '减少动画和视觉效果', '是否开启Aero']
    ];

    var swapInTextNodes = function (el, from, to) {
        var n = el.firstChild;
        while (n) {
            if (n.nodeType === 3 && n.nodeValue.indexOf(from) !== -1) {
                n.nodeValue = n.nodeValue.split(from).join(to);
            }
            n = n.nextSibling;
        }
    };

    var patch = function (root) {
        if (!root || !root.querySelectorAll) return;
        PAIRS.forEach(function (p) {
            var nodes = root.querySelectorAll(p[0]);
            Array.prototype.forEach.call(nodes, function (el) {
                if ((el.textContent || '').indexOf(p[1]) === -1) return;
                swapInTextNodes(el, p[1], p[2]);
            });
        });
    };

    /* 面板本身 + 之后被插进来的子树都要看 */
    patch(document);

    new MutationObserver(function (records) {
        for (var i = 0; i < records.length; i++) {
            var added = records[i].addedNodes;
            for (var j = 0; j < added.length; j++) {
                var node = added[j];
                if (node.nodeType !== 1) continue;
                /* 廉价过滤：只关心偏好面板那一块，别为页面上任何一处 DOM 变化跑查询 */
                if (!(node.closest && node.closest('.citizen-preferences')) &&
                    !(node.querySelector && node.querySelector('.citizen-preferences'))) continue;
                patch(node);
            }
        }
    }).observe(document.documentElement, { childList: true, subtree: true });
})();

/**
 * Section29. 把「性能模式」这个开关的极性对调（现在它表示 Aero）
 *
 * 上一条把文案改成了「Aero / 是否开启Aero」，但开关的电平还是原来的语义：
 *   开关【开】= 性能模式 开 = Aero 关
 *   开关【关】= 性能模式 关 = Aero 开
 * 正好和文案相反。这里把显示与偏好反着来：
 *   开关【开】⇒ 偏好写 0（性能模式关 = Aero 开）
 *   开关【关】⇒ 偏好写 1（性能模式开 = Aero 关）
 * 注意：只翻转【这个开关的极性】，偏好本身、以及全站所有依赖
 *       citizen-feature-performance-mode 的 CSS 一行都不用动。
 *
 * 做法两步：
 *   ① 捕获阶段监听 change —— 它在 Vue 自己的监听器之前跑（捕获从根到目标），
 *      把 checked 翻回去，于是 Vue 读到的就是"相反的值"，存进去自然也是反的。
 *      只碰这一个开关，别的偏好不受影响。
 *   ② 每次渲染 / 切换后用 sync() 把显示设成 !pref。
 *      偏好值直接从 <html> 的类上读（citizen-feature-performance-mode-clientpref-1）
 *      —— 那是皮肤自己写上去的，比猜 Vue 的内部状态可靠。
 */
(function () {
    'use strict';

    var BOX = '#skin-client-prefs-citizen-feature-performance-mode';
    var PERF_ON = 'citizen-feature-performance-mode-clientpref-1';

    var perfOn = function () {
        return document.documentElement.classList.contains(PERF_ON);
    };

    /* 把显示设成「偏好取反」 */
    var sync = function () {
        var box = document.querySelector(BOX);
        if (!box) return;
        var input = box.querySelector('input[type="checkbox"]');
        if (!input) return;
        var want = !perfOn();
        if (input.checked !== want) input.checked = want;
    };

    /* ① 抢在 Vue 之前把 checked 翻回来 ⇒ 它存的是相反值。
       只监听 change（复选框 v-model 走 change），不要再监听 click，
       否则一次操作会被翻两次、等于没翻。 */
    document.addEventListener('change', function (e) {
        var input = e.target;
        if (!input || input.type !== 'checkbox') return;
        if (!input.closest || !input.closest(BOX)) return;
        input.checked = !input.checked;
    }, true);

    /* ②-a 切换后 <html> 的类会变 ⇒ 重新同步显示 */
    new MutationObserver(function () {
        window.requestAnimationFrame(sync);
    }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

    /* ②-b 面板每次渲染也同步一次（内容是 Vue 后插进来的） */
    var card = document.getElementById('citizen-preferences-dropdown__card');
    if (card) {
        new MutationObserver(sync).observe(card, { childList: true, subtree: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', sync);
    } else {
        sync();
    }
})();


/* Kuranoka 页面专属 CSS */
if (
    mw.config.get('wgPageName') === 'Kuranoka' &&
    mw.config.get('skin') === 'citizen'
) {
    mw.loader.using('mediawiki.util').then(function () {
        mw.loader.load(
            mw.util.getUrl('MediaWiki:Kuranoka.css', {
                action: 'raw',
                ctype: 'text/css'
            }),
            'text/css'
        );
    });
}


mw.hook('wikipage.content').add(function ($content) {
    $content.find('.krnk-glitch')
        .addBack('.krnk-glitch')
        .each(function () {
            const el = this;

            if (el.dataset.glitchReady === '1') return;
            el.dataset.glitchReady = '1';

            const chars = Array.from(el.dataset.text || '');
            const blocks = Array.from(
                '███▉▊▋▌▐▛▜▟▙▚▞▓███'
            );

            function scramble() {
                el.textContent = chars.map(function (ch) {
                    if (/\s/u.test(ch)) return ch;

                    return blocks[
                        Math.floor(Math.random() * blocks.length)
                    ];
                }).join('');
            }

            scramble();
            setInterval(scramble, 70);
        });
});