MediaWiki:Gadget-RightToolbar.js

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

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

/* ================================================================
   MediaWiki Gadget: Custom Tools Bar with Localized Clock
   功能：
   - 回到顶部 / 回到底部按钮
   - 本地化日期和时间显示（浏览器时区 + UTC）
   - 深色模式自动适配
   - 动态显示按钮 + 平滑动画
   作者：你自己
   ================================================================= */

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

    function updateClock() {
        // 浏览器本地时间
        var local = new Date();
        // UTC 时间，从浏览器系统获取即可
        var utc = new Date(local.getTime() + local.getTimezoneOffset() * 60000);

        // MediaWiki 提供的语言设置
        var userLang = mw.config.get('wgUserLanguage') || 'en';

        // 本地化格式化函数
        // dateStyle/timeStyle 采用 Intl.DateTimeFormat 可选参数，也可以用短/长格式
        var localString = new Intl.DateTimeFormat(userLang, {
            year: 'numeric', month: 'long', day: 'numeric',
            hour: '2-digit', minute: '2-digit', second: '2-digit',
            hour12: false
        }).format(local);

        var utcString = new Intl.DateTimeFormat(userLang, {
            year: 'numeric', month: 'long', day: 'numeric',
            hour: '2-digit', minute: '2-digit', second: '2-digit',
            hour12: false, timeZone: 'UTC'
        }).format(utc);

        $('#current-local-time').text(localString);
        $('#current-utc-time').text(utcString);
    }

    $(function () {
        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 = $('<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 = createButton('mw-scroll-top', '▲', '回到顶部', function () {
            $('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
        });

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

        /* ---------- 时钟（桌面端） ---------- */
        if (!isMobile) {
            var $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="current-local-time">加载中...</div>'),
                $('<div id="current-utc-time">加载中...</div>')
            );
            $container.append($clockDiv);
        }

        /* ---------- 组装按钮 ---------- */
        $container.append($topButton, $bottomButton);

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

        /* ---------- 时钟定时更新 ---------- */
        if (!isMobile) {
            updateClock();
            setInterval(updateClock, 1000);
        }

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