MediaWiki:Citizen.js：修订间差异

2026年10月23日 (五) 12:29的版本

/* 这里所有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'
    }));
  });
}


/* ============================================================
   MediaWiki:Citizen.js — replace ONLY its current
   "Kuranoka Page Transition" IIFE with this block.
   Keep KuranokaFX and Background code unchanged.
   ============================================================ */
(function () {
    'use strict';

    let requested = false;
    function isSpecialPage() {
        const match = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
        const title = match ? match[1] : new URLSearchParams(location.search).get('title');
        return ['Kuranoka', 'Kuronata'].includes(title) &&
            (new URLSearchParams(location.search).get('action') || 'view') === 'view';
    }

    function ensureLoaded() {
        if (!isSpecialPage() || requested) return;
        requested = true;
        const script = mw.config.get('wgScript') || '/index.php';
        function raw(title, type) {
            return script + '?title=' + encodeURIComponent(title) +
                '&action=raw&ctype=' + encodeURIComponent(type) + '&kkptv=4';
        }
        mw.loader.load(raw('MediaWiki:KuranokaPageTransition.css', 'text/css'), 'text/css');
        mw.loader.load(raw('MediaWiki:KuranokaPageTransition.js', 'text/javascript'), 'text/javascript');
    }

    ensureLoaded();
    mw.hook('wikipage.content').add(ensureLoaded);
    window.addEventListener('pageshow', ensureLoaded);
})();


/* ==========================================
   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
    );

})();