MediaWiki:Gadget-RightToolbar：修订间差异

/* ================================================================

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

}

} );