MediaWiki:Citizen.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 这里所有JavaScript都会加载给Citizen皮肤的用户 */
/* Append at the END of MediaWiki:Citizen.js. No Common.js or Common.css changes. */
if (mw.config.get('wgPageName') === 'Kuranoka' &&
    mw.config.get('wgNamespaceNumber') === 0 &&
    mw.config.get('wgAction') === 'view') {
  mw.loader.using('mediawiki.util').then(function () {
    mw.loader.load(mw.util.getUrl('MediaWiki:KuranokaFX.css', {
      action: 'raw', ctype: 'text/css'
    }), 'text/css');
    mw.loader.load(mw.util.getUrl('MediaWiki:KuranokaFX.js', {
      action: 'raw', ctype: 'text/javascript'
    }));
  });
}

/* ==========================================
   Background · Blockland Wiki
   Universal Background Configuration

   读取 {{Background}} 模板参数
   将配置传递给 CSS
   ========================================== */

(function () {
    'use strict';

    /* ======================================
       1. 数值校验
       ====================================== */

    function clamp(value, fallback, min, max) {

        if (
            value === undefined ||
            value === null ||
            String(value).trim() === ''
        ) {
            return fallback;
        }

        const number = Number(value);

        if (!Number.isFinite(number)) {
            return fallback;
        }

        return Math.min(
            max,
            Math.max(min, number)
        );

    }


    /* ======================================
       2. 初始化 Background
       ====================================== */

    function initBackground() {

        // 仅在 Citizen 皮肤下运行
        if (!document.body.classList.contains('skin-citizen')) {
            return;
        }

        // 查找模板生成的配置元素
        const element = document.querySelector(
            '#mw-content-text .background-theme'
        );

        // 未调用模板则不执行任何操作
        if (!element) {
            return;
        }

        const body = document.body;
        const config = element.dataset;


        /* ==================================
           3. 透明度
           范围：0 - 1
           ================================== */

        const opacity = clamp(
            config.bgOpacity,
            0.5,
            0,
            1
        );

        body.style.setProperty(
            '--bg-opacity',
            String(opacity)
        );


        /* ==================================
           4. 模糊度
           范围：0 - 40px
           ================================== */

        const blur = clamp(
            config.bgBlur,
            6,
            0,
            40
        );

        body.style.setProperty(
            '--bg-blur',
            blur + 'px'
        );


        /* ==================================
           5. 圆角
           范围：0 - 40px
           ================================== */

        const radius = clamp(
            config.bgRadius,
            12,
            0,
            40
        );

        body.style.setProperty(
            '--bg-radius',
            radius + 'px'
        );


        /* ==================================
           6. 标题颜色
           支持 #RGB 和 #RRGGBB
           ================================== */

        const titleColor = (
            config.bgTitle || '#FFFFFF'
        ).trim();

        const validColor =
            /^#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?$/.test(
                titleColor
            );

        body.style.setProperty(
            '--bg-title-color',
            validColor ? titleColor : '#FFFFFF'
        );


        /* ==================================
           7. 背景图片
           ================================== */

        const background = (
            config.bgImage || ''
        ).trim();

        if (background) {

            try {

                const url = new URL(
                    background,
                    window.location.href
                );

                // 仅允许本站 HTTPS 图片
                if (
                    url.protocol === 'https:' &&
                    url.origin === window.location.origin
                ) {

                    body.style.setProperty(
                        '--bg-image',
                        'url("' + url.href + '")'
                    );

                }

            } catch (error) {

                console.warn(
                    '[Background] Invalid image URL',
                    error
                );

            }

        }

    }


    /* ======================================
       8. MediaWiki 内容加载钩子
       ====================================== */

    mw.hook('wikipage.content').add(
        initBackground
    );

})();