查看“︁MediaWiki:Gadget-RightToolbar.js”︁的源代码

/* ================================================================
   MediaWiki Gadget: Localized Clock Bar (增强版)
   功能：
   - 显示浏览器本地时间和 UTC 时间
   - 使用 MediaWiki 用户语言格式
   - 动态响应语言切换，无需刷新
   - 深色模式适配 + 滑入动画
   作者：你自己
   ================================================================= */

mw.loader.using(['mediawiki.util'], function () {

    // 工具栏主函数
    function initClockBar() {
        var isMobile = window.innerWidth <= 768;

        // ---------- 深色模式检测 ----------
        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)';
        const border = isDark ? '#555' : '#aaa';
        const color = isDark ? '#eee' : '#333';

        // ---------- 创建工具栏容器 ----------
        var $container = $('#mw-custom-tools');
        if (!$container.length) {
            $container = $('<div id="mw-custom-tools"></div>').css({
                position: 'fixed',
                bottom: '120px',
                right: '50px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-end',
                gap: '5px',
                zIndex: 9999,
                opacity: 0,
                transform: 'translateY(20px)', // 初始位置
            }).appendTo('body');
        }

        // ---------- 按钮生成函数 ----------
        function createButton(id, text, tooltip, clickHandler) {
            return $('<div></div>', { id: id, title: tooltip, text: text }).css({
                padding: '5px 10px',
                fontSize: '12px',
                background: bg,
                border: '1px solid ' + border,
                borderRadius: '4px',
                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
                color: color,
                cursor: 'pointer',
                textAlign: 'center',
                opacity: 0.7,
                transition: 'background 0.3s, opacity 0.3s, transform 0.3s',
                backdropFilter: 'blur(4px)'
            }).hover(
                function () { $(this).css({ background: isDark ? '#555' : '#ddd', opacity: 1 }); },
                function () { $(this).css({ background: bg, opacity: 0.7 }); }
            ).click(clickHandler);
        }

        // ---------- 创建按钮 ----------
        var $topButton = $('#mw-scroll-top');
        if (!$topButton.length) {
            $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
                $('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
            });
            $container.append($topButton);
        }

        var $bottomButton = $('#mw-scroll-bottom');
        if (!$bottomButton.length) {
            $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
                $('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
            });
            $container.append($bottomButton);
        }

        // ---------- 时钟容器（桌面端） ----------
        var $clockDiv = $('#current-clock');
        if (!isMobile && !$clockDiv.length) {
            $clockDiv = $('<div id="current-clock"></div>').css({
                padding: '6px 12px',
                fontSize: '12px',
                background: bg,
                border: '1px solid ' + border,
                borderRadius: '4px',
                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
                color: color,
                textAlign: 'center',
                lineHeight: '1.4',
                backdropFilter: 'blur(4px)'
            }).append(
                $('<div id="local-date">加载中...</div>'),
                $('<div id="local-time"></div>'),
                $('<div id="utc-time"></div>')
            );
            $container.append($clockDiv);
        }

        // ---------- 滚动动态显示 ----------
        $topButton.hide(); // 初始隐藏
        $(window).on('scroll', function () {
            var scrollTop = $(this).scrollTop();
            if (scrollTop > 200) $topButton.fadeIn(); else $topButton.fadeOut();
        });

        // ---------- 初始动画 ----------
        $container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);

        // ---------- 渲染时钟函数 ----------
        function renderClock() {
            var now = new Date();

            // 获取 MediaWiki 用户语言（wgUserLanguage）
            var userLang = mw.config.get('wgUserLanguage') || 'en';

            // 本地时间
            var localFormatter = new Intl.DateTimeFormat(userLang, {
                year: 'numeric', month: 'long', day: 'numeric',
                hour: '2-digit', minute: '2-digit', second: '2-digit',
                hour12: false,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
            });
            var localParts = localFormatter.formatToParts(now);
            var localDateStr = localParts.filter(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
                                         .map(p => p.value).join(' ');
            var localTimeStr = localParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
                                         .map(p => p.value).join(':');
            $('#local-date').text(localDateStr);
            $('#local-time').text(localTimeStr);

            // UTC 时间
            var utcFormatter = new Intl.DateTimeFormat(userLang, {
                year: 'numeric', month: 'long', day: 'numeric',
                hour: '2-digit', minute: '2-digit', second: '2-digit',
                hour12: false,
                timeZone: 'UTC'
            });
            var utcParts = utcFormatter.formatToParts(now);
            var utcDateStr = utcParts.filter(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
                                     .map(p => p.value).join(' ');
            var utcTimeStr = utcParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
                                     .map(p => p.value).join(':');
            $('#utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr);
        }

        // ---------- 定时刷新 ----------
        setInterval(renderClock, 1000);
        renderClock(); // 启动立即渲染

        // ---------- 语言切换动态刷新 ---------- 
        // MediaWiki 用户语言修改后触发 user.languageChange hook
        mw.hook('user.languageChange').add(renderClock);
    }

    // 初始化工具条
    $(initClockBar);
});