MediaWiki:Gadget-RightToolbar.js
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- 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 () {
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();
} );
} );