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

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

mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
    var STYLE_ID = 'mw-right-toolbar-style';

    function ensureToolbarStyles() {
        if ( document.getElementById( STYLE_ID ) ) {
            return;
        }

        var css = [
            '#mw-right-toolbar, .mw-right-toolbar {',
            '  position: fixed;',
            '  bottom: 96px;',
            '  right: 24px;',
            '  display: flex;',
            '  flex-direction: column;',
            '  align-items: flex-end;',
            '  gap: 6px;',
            '  z-index: 2147483647;',
            '  opacity: 0;',
            '  transform: translateY(12px);',
            '  transition: opacity 0.4s ease, transform 0.4s ease;',
            '}',
            '',
            '.mw-right-toolbar.is-visible {',
            '  opacity: 1;',
            '  transform: translateY(0);',
            '}',
            '',
            '.mw-right-toolbar .mw-rt-button,',
            '.mw-right-toolbar .mw-rt-clock {',
            '  background: var(--color-surface-0, rgba(255, 255, 255, 0.85));',
            '  border: 1px solid var(--border-color-base, #aaa);',
            '  color: var(--color-base, #333);',
            '  border-radius: 4px;',
            '  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);',
            '  font-size: 12px;',
            '  line-height: 1.4;',
            '  padding: 6px 12px;',
            '  backdrop-filter: blur(4px);',
            '}',
            '',
            '.mw-right-toolbar .mw-rt-button {',
            '  cursor: pointer;',
            '  opacity: 0.8;',
            '  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;',
            '}',
            '',
            '.mw-right-toolbar .mw-rt-button:hover {',
            '  opacity: 1;',
            '  background: var(--background-color-progressive-subtle, #ddd);',
            '}',
            '',
            '.mw-right-toolbar .mw-rt-button:active {',
            '  transform: translateY(1px);',
            '}',
            '',
            '.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-button,',
            '.skin-theme-clientpref-night .mw-right-toolbar .mw-rt-clock {',
            '  background: rgba(30, 30, 30, 0.85);',
            '  border-color: #555;',
            '  color: #eee;',
            '}',
            '',
            '@media (max-width: 768px) {',
            '  #mw-right-toolbar, .mw-right-toolbar {',
            '    bottom: 72px;',
            '    right: 16px;',
            '  }',
            '}'
        ].join( '\n' );

        var styleNode = mw.loader.addStyleTag( css );
        styleNode.id = STYLE_ID;
    }

    function initClockBar() {
        ensureToolbarStyles();

        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();
            }
        } );
    }

    $( function () {
        ensureToolbarStyles();
        initClockBar();
    } );
} );