查看“︁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 = document.getElementById( 'mw-right-toolbar' );

        if ( !container ) {
            container = document.createElement( 'div' );
            container.id = 'mw-right-toolbar';
            container.className = 'mw-right-toolbar';
            document.body.appendChild( container );
        }

        function createButton( id, text, tooltip, clickHandler ) {
            var button = document.createElement( 'button' );
            button.id = id;
            button.className = 'mw-rt-button';
            button.title = tooltip;
            button.textContent = text;
            button.type = 'button';
            button.addEventListener( 'click', clickHandler );
            return button;
        }

        var topButton = document.getElementById( 'mw-scroll-top' );
        if ( !topButton ) {
            topButton = createButton( 'mw-scroll-top', '▲', '回到顶部', function () {
                window.scrollTo( {
                    top: 0,
                    behavior: 'smooth'
                } );
            } );
            container.appendChild( topButton );
        }

        var bottomButton = document.getElementById( 'mw-scroll-bottom' );
        if ( !bottomButton ) {
            bottomButton = createButton( 'mw-scroll-bottom', '▼', '回到底部', function () {
                window.scrollTo( {
                    top: document.body.scrollHeight,
                    behavior: 'smooth'
                } );
            } );
            container.appendChild( bottomButton );
        }

        var clockDiv = document.getElementById( 'mw-right-toolbar-clock' );
        if ( !isMobile && !clockDiv ) {
            clockDiv = document.createElement( 'div' );
            clockDiv.id = 'mw-right-toolbar-clock';
            clockDiv.className = 'mw-rt-clock';
            
            var localDateDiv = document.createElement( 'div' );
            localDateDiv.id = 'mw-local-date';
            localDateDiv.textContent = '加载中...';
            
            var localTimeDiv = document.createElement( 'div' );
            localTimeDiv.id = 'mw-local-time';
            
            var utcTimeDiv = document.createElement( 'div' );
            utcTimeDiv.id = 'mw-utc-time';
            
            clockDiv.appendChild( localDateDiv );
            clockDiv.appendChild( localTimeDiv );
            clockDiv.appendChild( utcTimeDiv );
            
            container.appendChild( clockDiv );
        }

        topButton.style.display = 'none';
        var ticking = false;
        window.addEventListener( 'scroll', function () {
            if ( ticking ) {
                return;
            }
            ticking = true;
            window.requestAnimationFrame( function () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                if ( scrollTop > 200 ) {
                    topButton.style.display = 'block';
                } else {
                    topButton.style.display = 'none';
                }
                ticking = false;
            } );
        } );

        window.requestAnimationFrame( function () {
            container.classList.add( '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( ':' );

            var localDateEl = document.getElementById( 'mw-local-date' );
            var localTimeEl = document.getElementById( 'mw-local-time' );
            if ( localDateEl ) localDateEl.textContent = localDateStr;
            if ( localTimeEl ) localTimeEl.textContent = 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( ':' );

            var utcTimeEl = document.getElementById( 'mw-utc-time' );
            if ( utcTimeEl ) utcTimeEl.textContent = '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();
            }
        } );
    }

    // 页面加载完成后初始化
    if ( document.readyState === 'loading' ) {
        document.addEventListener( 'DOMContentLoaded', initClockBar );
    } else {
        initClockBar();
    }
} );