MediaWiki:Gadget-RightToolbar.js：修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
小 修正 |
Maintenance script（留言 | 贡献） 添加JavaScript代码 |
||
| （未显示2个用户的8个中间版本） | |||
| 第1行： | 第1行： | ||
mw.loader.using(['mediawiki.util'], function () { |
|||
function updateClock() { |
|||
var now = new Date(); |
|||
var dateString = now.getFullYear() + "年" + |
|||
(now.getMonth() + 1).toString().padStart(2, '0') + "月" + |
|||
now.getDate().toString().padStart(2, '0') + "日"; |
|||
/* ================================================================ |
|||
var timeString = now.toLocaleTimeString(); |
|||
MediaWiki Gadget: Localized Clock Bar |
|||
功能： |
|||
- 显示浏览器本地时间和 UTC 时间 |
|||
- 使用 MediaWiki 用户语言格式 |
|||
- 深色模式适配 + 滑入动画 |
|||
================================================================= */ |
|||
mw.loader.using( [ 'mediawiki.util' ] ).then( function () { |
|||
$('#current-date').text(dateString); |
|||
var STYLE_ID = 'mw-right-toolbar-style'; |
|||
$('#current-time').text(timeString); |
|||
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 isMobile = window.innerWidth <= 768; |
|||
// 右下角按钮容器 |
|||
var container = document.getElementById( 'mw-right-toolbar' ); |
|||
position: 'fixed', |
|||
bottom: '120px', // 避免与其他工具重叠 |
|||
right: '50px', // 这里调整 right 值，使按钮向左移动 |
|||
display: 'flex', |
|||
flexDirection: 'column', |
|||
alignItems: 'flex-end', |
|||
gap: '5px', |
|||
zIndex: 9999 |
|||
}); |
|||
if ( !container ) { |
|||
container = document.createElement( 'div' ); |
|||
function createButton(id, text, tooltip, clickHandler) { |
|||
container.id = 'mw-right-toolbar'; |
|||
return $('<div></div>', { id: id, title: tooltip, text: text }).css({ |
|||
container.className = 'mw-right-toolbar'; |
|||
document.body.appendChild( container ); |
|||
background: '#f1f1f1', |
|||
border: '1px solid #aaa', |
|||
borderRadius: '4px', |
|||
boxShadow: '0 1px 3px rgba(0,0,0,0.2)', |
|||
color: '#333', |
|||
cursor: 'pointer', |
|||
textAlign: 'center', |
|||
opacity: 0.7, |
|||
transition: 'background 0.3s, opacity 0.3s' |
|||
}).hover(function () { |
|||
$(this).css({ background: '#ddd', opacity: 1 }); |
|||
}, function () { |
|||
$(this).css({ background: '#f1f1f1', opacity: 0.7 }); |
|||
}).click(clickHandler); |
|||
} |
} |
||
function createButton( id, text, tooltip, clickHandler ) { |
|||
// 创建回到顶部按钮 |
|||
var button = document.createElement( 'button' ); |
|||
var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () { |
|||
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 ) { |
|||
var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () { |
|||
topButton = createButton( 'mw-scroll-top', '▲', '回到顶部', function () { |
|||
$('html, body').animate({ scrollTop: $(document).height() }, 500); |
|||
window.scrollTo( { |
|||
top: 0, |
|||
behavior: 'smooth' |
|||
} ); |
|||
} ); |
|||
container.appendChild( topButton ); |
|||
} |
|||
var bottomButton = document.getElementById( 'mw-scroll-bottom' ); |
|||
// 创建时间显示区域（仅桌面端） |
|||
if (! |
if ( !bottomButton ) { |
||
bottomButton = createButton( 'mw-scroll-bottom', '▼', '回到底部', function () { |
|||
var $clockDiv = $('<div id="current-clock"></div>').css({ |
|||
window.scrollTo( { |
|||
top: document.body.scrollHeight, |
|||
behavior: 'smooth' |
|||
} ); |
|||
} ); |
|||
container.appendChild( bottomButton ); |
|||
boxShadow: '0 1px 3px rgba(0,0,0,0.2)', |
|||
color: '#333', |
|||
textAlign: 'center', |
|||
lineHeight: '1.4' |
|||
}).append( |
|||
$('<div id="current-date">加载中...</div>'), |
|||
$('<div id="current-time"></div>') |
|||
); |
|||
$container.append($clockDiv); |
|||
} |
} |
||
var clockDiv = document.getElementById( 'mw-right-toolbar-clock' ); |
|||
// 组装按钮 |
|||
if ( !isMobile && !clockDiv ) { |
|||
$container.append($topButton, $bottomButton); |
|||
clockDiv = document.createElement( 'div' ); |
|||
$('body').append($container); |
|||
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 () { |
|||
updateClock(); |
|||
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(); |
|||
} |
|||
} ); |
|||