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: Localized Clock Bar
   功能：
   - 显示浏览器本地时间和 UTC 时间
   - 使用 MediaWiki 用户语言格式
   - 深色模式适配 + 滑入动画
   ================================================================= */

mw.loader.using(['mediawiki.util']).then(function () {
    function initClockBar() {
        var isMobile = window.innerWidth <= 768;
        var $container = $('#mw-right-toolbar');

        if (!$container.length) {
            $container = $('<div id="mw-right-toolbar" class="mw-right-toolbar"></div>').appendTo('body');
        }

        function createButton(id, text, tooltip, clickHandler) {
            return $('<button></button>', {
                id: id,
                class: 'mw-rt-button',
                title: tooltip,
                text: text,
                type: 'button'
            }).on('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 = $('#mw-right-toolbar-clock');
        if (!isMobile && !$clockDiv.length) {
            $clockDiv = $('<div id="mw-right-toolbar-clock" class="mw-rt-clock"></div>').append(
                $('<div id="mw-local-date">加载中...</div>'),
                $('<div id="mw-local-time"></div>'),
                $('<div id="mw-utc-time"></div>')
            );
            $container.append($clockDiv);
        }

        $topButton.hide();
        var ticking = false;
        $(window).on('scroll', function () {
            if (ticking) {
                return;
            }
            ticking = true;
            window.requestAnimationFrame(function () {
                var scrollTop = $(window).scrollTop();
                if (scrollTop > 200) {
                    $topButton.fadeIn();
                } else {
                    $topButton.fadeOut();
                }
                ticking = false;
            });
        });

        window.requestAnimationFrame(function () {
            $container.addClass('is-visible');
        });

        function renderClock() {
            var now = new Date();
            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(function (p) {
                return p.type === 'year' || p.type === 'month' || p.type === 'day';
            }).map(function (p) {
                return p.value;
            }).join(' ');

            var localTimeStr = localParts.filter(function (p) {
                return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
            }).map(function (p) {
                return p.value;
            }).join(':');

            $('#mw-local-date').text(localDateStr);
            $('#mw-local-time').text(localTimeStr);

            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(function (p) {
                return p.type === 'year' || p.type === 'month' || p.type === 'day';
            }).map(function (p) {
                return p.value;
            }).join(' ');

            var utcTimeStr = utcParts.filter(function (p) {
                return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
            }).map(function (p) {
                return p.value;
            }).join(':');

            $('#mw-utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr);
        }

        var clockTimer = window.setInterval(renderClock, 1000);
        renderClock();

        mw.hook('user.languageChange').add(renderClock);

        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                window.clearInterval(clockTimer);
                clockTimer = null;
                return;
            }
            if (!clockTimer) {
                clockTimer = window.setInterval(renderClock, 1000);
                renderClock();
            }
        });
    }

    $(initClockBar);
});