跳转到内容

MediaWiki:Citizen.js:修订间差异

来自天明的百科全书
Ztm0929留言 | 贡献
添加页脚logo
 
Ztm0929留言 | 贡献
完善整体逻辑
 
(未显示同一用户的1个中间版本)
第2行: 第2行:


// 添加powered by logo
// 添加powered by logo
$(function () {
(function ($) {
    // 插入 Citizen footer 图标
    $(function () {
    function ensureCitizenFooterIcon() {
        // ---------- 辅助:判断当前实际主题(dark / light) ----------
        if ($('#footer-poweredbycitizenico').length) return;
        function getEffectiveTheme() {
            var cls = document.documentElement.classList;
            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';
        }
 
        // ---------- 辅助:安全设置 img src(若元素存在) ----------
        function setSrcIfExists(selector, src) {
            var $el = $(selector);
            if ($el.length) {
                $el.attr('src', src);
                console.log('[citizen-footer] set', selector, '->', src);
            } else {
                console.log('[citizen-footer] not found', selector);
            }
        }
 
        // ---------- 检查是否是 Citizen 皮肤(有多重后备检测) ----------
        function isCitizenSkin() {
            if (window.mw && mw.config && mw.config.get) {
                try {
                    var s = mw.config.get('skin');
                    if (s) return s.toString().toLowerCase() === 'citizen';
                } catch (e) {
                    // ignore
                }
            }
            // 后备:看 html/body class
            return document.documentElement.classList.contains('skin-citizen') ||
                  document.body.classList.contains('skin-citizen');
        }
 
        // ---------- 插入 / 移除 Citizen footer icon ----------
        function ensureCitizenFooterIcon() {
            // 如果不是 Citizen 皮肤,确保移除(防止用户在偏好切换皮肤后残留)
            if (!isCitizenSkin()) {
                $('#footer-poweredbycitizenico').remove();
                return;
            }


        var $smw = $('#footer-poweredbysmwico');
            // 已存在则不再插入
        if ($smw.length) {
            if ($('#footer-poweredbycitizenico').length) return;
             $smw.after(
 
            // 优先插入在 SMW 图标之后;若找不到 SMW,则在 MediaWiki 图标之后插入
            var $smw = $('#footer-poweredbysmwico');
            var $mw = $('#footer-poweredbyico');
            var $target = $smw.length ? $smw : ($mw.length ? $mw : $('#footer-icons ul li').last());
 
             var theme = getEffectiveTheme();
            var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
 
            var html = '' +
                 '<li id="footer-poweredbycitizenico">' +
                 '<li id="footer-poweredbycitizenico">' +
                '<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen" target="_blank">' +
                  '<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen" ' +
                '<img src="/resources/assets/poweredby-citizen-dark.svg" alt="Powered by Citizen" width="88" height="31" loading="lazy">' +
                    'class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled" ' +
                '</a></li>'
                    'target="_blank" rel="noopener">' +
             );
                    '<img src="' + src + '" alt="Powered by Citizen" width="88" height="31" loading="lazy">' +
                  '</a>' +
                '</li>';
 
            if ($target && $target.length) {
                $target.after(html);
             } else {
                // 兜底:追加到 ul
                $('#footer-icons ul').append(html);
            }
            console.log('[citizen-footer] inserted');
         }
         }
    }


    ensureCitizenFooterIcon();
        // ---------- 根据主题更新 Citizen icon 的 src ----------
        function updateCitizenIcon() {
            var theme = getEffectiveTheme();
            var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
            setSrcIfExists('#footer-poweredbycitizenico img', src);
        }


    // 监听主题切换,更新图标
        // ---------- 总更新入口:确保插入并更新 src ----------
    function updateCitizenIcon() {
        function updateAll() {
         var theme = document.documentElement.classList.contains('skin-theme-clientpref-night') ? 'dark' : 'light';
            ensureCitizenFooterIcon();
        var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
            updateCitizenIcon();
        $('#footer-poweredbycitizenico img').attr('src', src);
        }
    }
 
        // ---------- 首次运行 ----------
        updateAll();
 
        // ---------- 监听 <html> class 变化(皮肤主题切换时会触发) ----------
        var htmlObserver = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                if (mutations[i].attributeName === 'class') {
                    updateAll();
                    break;
                }
            }
        });
        htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
        // ---------- 监听 body DOM 变动(footer 可能是异步插入 / 被替换) ----------
         var bodyObserver = new MutationObserver(function () {
            updateAll();
        });
        bodyObserver.observe(document.body, { childList: true, subtree: true });
 
        // ---------- 监听系统主题偏好变化(prefers-color-scheme) ----------
        if (window.matchMedia) {
            var mq = window.matchMedia('(prefers-color-scheme: dark)');
            if (typeof mq.addEventListener === 'function') {
                mq.addEventListener('change', updateAll);
            } else if (typeof mq.addListener === 'function') {
                mq.addListener(updateAll); // 兼容旧浏览器
            }
        }
 
        // ---------- 如果 MediaWiki 有 hook(比如用户保存偏好后切换皮肤),也触发一次 ----------
        if (window.mw && mw.hook) {
            mw.hook('user.preferencesSaved').add(updateAll);
        }


    updateCitizenIcon();
        // ---------- 兜底:页面 load 后 & 延迟再试一次 ----------
    var htmlObserver = new MutationObserver(updateCitizenIcon);
        $(window).on('load', updateAll);
     htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
        setTimeout(updateAll, 1500);
});
     });
})(jQuery);

2025年9月28日 (日) 06:12的最新版本

/* 这里所有JavaScript都会加载给Citizen皮肤的用户 */

// 添加powered by logo
(function ($) {
    $(function () {
        // ---------- 辅助:判断当前实际主题(dark / light) ----------
        function getEffectiveTheme() {
            var cls = document.documentElement.classList;
            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';
        }

        // ---------- 辅助:安全设置 img src(若元素存在) ----------
        function setSrcIfExists(selector, src) {
            var $el = $(selector);
            if ($el.length) {
                $el.attr('src', src);
                console.log('[citizen-footer] set', selector, '->', src);
            } else {
                console.log('[citizen-footer] not found', selector);
            }
        }

        // ---------- 检查是否是 Citizen 皮肤(有多重后备检测) ----------
        function isCitizenSkin() {
            if (window.mw && mw.config && mw.config.get) {
                try {
                    var s = mw.config.get('skin');
                    if (s) return s.toString().toLowerCase() === 'citizen';
                } catch (e) {
                    // ignore
                }
            }
            // 后备:看 html/body class
            return document.documentElement.classList.contains('skin-citizen') ||
                   document.body.classList.contains('skin-citizen');
        }

        // ---------- 插入 / 移除 Citizen footer icon ----------
        function ensureCitizenFooterIcon() {
            // 如果不是 Citizen 皮肤,确保移除(防止用户在偏好切换皮肤后残留)
            if (!isCitizenSkin()) {
                $('#footer-poweredbycitizenico').remove();
                return;
            }

            // 已存在则不再插入
            if ($('#footer-poweredbycitizenico').length) return;

            // 优先插入在 SMW 图标之后;若找不到 SMW,则在 MediaWiki 图标之后插入
            var $smw = $('#footer-poweredbysmwico');
            var $mw = $('#footer-poweredbyico');
            var $target = $smw.length ? $smw : ($mw.length ? $mw : $('#footer-icons ul li').last());

            var theme = getEffectiveTheme();
            var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';

            var html = '' +
                '<li id="footer-poweredbycitizenico">' +
                  '<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen" ' +
                     'class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled" ' +
                     'target="_blank" rel="noopener">' +
                    '<img src="' + src + '" alt="Powered by Citizen" width="88" height="31" loading="lazy">' +
                  '</a>' +
                '</li>';

            if ($target && $target.length) {
                $target.after(html);
            } else {
                // 兜底:追加到 ul
                $('#footer-icons ul').append(html);
            }
            console.log('[citizen-footer] inserted');
        }

        // ---------- 根据主题更新 Citizen icon 的 src ----------
        function updateCitizenIcon() {
            var theme = getEffectiveTheme();
            var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
            setSrcIfExists('#footer-poweredbycitizenico img', src);
        }

        // ---------- 总更新入口:确保插入并更新 src ----------
        function updateAll() {
            ensureCitizenFooterIcon();
            updateCitizenIcon();
        }

        // ---------- 首次运行 ----------
        updateAll();

        // ---------- 监听 <html> class 变化(皮肤主题切换时会触发) ----------
        var htmlObserver = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                if (mutations[i].attributeName === 'class') {
                    updateAll();
                    break;
                }
            }
        });
        htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

        // ---------- 监听 body DOM 变动(footer 可能是异步插入 / 被替换) ----------
        var bodyObserver = new MutationObserver(function () {
            updateAll();
        });
        bodyObserver.observe(document.body, { childList: true, subtree: true });

        // ---------- 监听系统主题偏好变化(prefers-color-scheme) ----------
        if (window.matchMedia) {
            var mq = window.matchMedia('(prefers-color-scheme: dark)');
            if (typeof mq.addEventListener === 'function') {
                mq.addEventListener('change', updateAll);
            } else if (typeof mq.addListener === 'function') {
                mq.addListener(updateAll); // 兼容旧浏览器
            }
        }

        // ---------- 如果 MediaWiki 有 hook(比如用户保存偏好后切换皮肤),也触发一次 ----------
        if (window.mw && mw.hook) {
            mw.hook('user.preferencesSaved').add(updateAll);
        }

        // ---------- 兜底:页面 load 后 & 延迟再试一次 ----------
        $(window).on('load', updateAll);
        setTimeout(updateAll, 1500);
    });
})(jQuery);