MediaWiki:Common.js:修订间差异

Ztm0929留言 | 贡献
增加 Powered by 图标的切换逻辑
Ztm0929留言 | 贡献
修复异常加载
第31行: 第31行:


// logo 切换逻辑
// logo 切换逻辑
// 放到 MediaWiki:Common.js
$(function () {
$(function () {
     function updateLogos() {
    // 获取当前“实际使用”的主题:'dark' 或 'light'
         var theme = mw.config.get('skin-theme-clientpref'),
     function getEffectiveTheme() {
             $ccIcon = $('#footer-copyrightico img'),
         var cls = document.documentElement.classList;
             $poweredByIcon = $('#footer-poweredbyico img');
        if (cls.contains('skin-theme-clientpref-night')) return 'dark';
        if (cls.contains('skin-theme-clientpref-day')) return 'light';
        if (cls.contains('skin-theme-clientpref-os')) {
             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                return 'dark';
            }
             return 'light';
        }
        // 兜底:根据系统偏好判断
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            return 'dark';
        }
        return 'light';
    }


         if (!$ccIcon.length || !$poweredByIcon.length) return;
    // 如果元素存在就设置 src(并记录日志,便于调试)
    function setSrcIfExists(selector, src) {
        var $el = $(selector);
         if ($el.length) {
            $el.attr('src', src);
            console.log('[logo-switch] set', selector, '->', src);
        } else {
            console.log('[logo-switch] not found', selector);
        }
    }


    // 主更新函数 —— 每次都重新 select 元素
    function updateLogos() {
        var theme = getEffectiveTheme();
         if (theme === 'dark') {
         if (theme === 'dark') {
             $ccIcon.attr('src', '/resources/assets/cc-by-nc-sa-dark.svg');
             setSrcIfExists('#footer-copyrightico img', '/resources/assets/cc-by-nc-sa-dark.svg');
             $poweredByIcon.attr('src', '/resources/assets/poweredby-mediawiki-dark.svg');
             setSrcIfExists('#footer-poweredbyico img', '/resources/assets/poweredby-mediawiki-dark.svg');
         } else if (theme === 'light') {
         } else {
             $ccIcon.attr('src', '/resources/assets/cc-by-nc-sa.svg');
             setSrcIfExists('#footer-copyrightico img', '/resources/assets/cc-by-nc-sa.svg');
            $poweredByIcon.attr('src', '/resources/assets/poweredby-mediawiki.svg');
             setSrcIfExists('#footer-poweredbyico img', '/resources/assets/poweredby-mediawiki.svg');
        } else if (theme === 'os') {
            // 自动跟随系统
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                $ccIcon.attr('src', '/resources/assets/cc-by-nc-sa-dark.svg');
                $poweredByIcon.attr('src', '/resources/assets/poweredby-mediawiki-dark.svg');
             } else {
                $ccIcon.attr('src', '/resources/assets/cc-by-nc-sa.svg');
                $poweredByIcon.attr('src', '/resources/assets/poweredby-mediawiki.svg');
            }
         }
         }
     }
     }


     // 初始化时执行
     // 首次运行
     updateLogos();
     updateLogos();


     // 如果用户切换主题(无需刷新),监听变化
     // 监听 <html> class 变化(用户在 UI 切换浅/深/自动)
     mw.hook('user.preferencesSaved').add(updateLogos);
     var htmlObserver = new MutationObserver(function (mutations) {
        for (var i = 0; i < mutations.length; i++) {
            if (mutations[i].attributeName === 'class') {
                updateLogos();
                break;
            }
        }
    });
    htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });


     // 监听系统颜色方案变化(适配 skin-theme-clientpref-os)
     // 监听 body 的 DOM 变动,防止 footer 异步插入或被替换
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogos);
    var bodyObserver = new MutationObserver(function () {
        updateLogos();
    });
    bodyObserver.observe(document.body, { childList: true, subtree: true });
 
    // 监听系统主题变化(适用于 skin-theme-clientpref-os)
     if (window.matchMedia) {
        var mq = window.matchMedia('(prefers-color-scheme: dark)');
        if (typeof mq.addEventListener === 'function') {
            mq.addEventListener('change', updateLogos);
        } else if (typeof mq.addListener === 'function') {
            // 兼容旧浏览器
            mq.addListener(updateLogos);
        }
    }
 
    // 如果存在 MediaWiki 的 hook(例如偏好保存后),也触发一次
    if (window.mw && mw.hook) {
        mw.hook('user.preferencesSaved').add(updateLogos);
    }
 
    // 兜底:页面 load 后、以及延迟 1.5s 再试一次
    $(window).on('load', updateLogos);
    setTimeout(updateLogos, 1500);
});
});