陋室

MediaWiki:Gadget-RightToolbar.js：修订间差异

以互动方式浏览历史
←上一编辑

Maintenance script​（留言 | 贡献）

647次编辑
删除的内容 添加的内容
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,055次编辑
小 功能增强v2
Maintenance script​（留言 | 贡献）
647次编辑
小 优化 RightToolbar：移动端禁用并降低空闲开销
 
（未显示2个用户的7个中间版本）
第1行：
/* MediaWiki Gadget: RightToolbar */
/* ================================================================
( function () {
MediaWiki Gadget: Custom Tools Bar（多语言时间显示版）
'use strict';
功能：
- 回到顶部 / 回到底部按钮
- 实时时钟（显示浏览器时区 + UTC）
- 根据用户语言切换日期时间格式
- 深色模式自动适配
- 动态显示按钮 + 平滑动画
================================================================= */
 
mw.loader.using( [ 'mediawiki.util', 'mediawiki.user'], ).then( function () {
var toolbar;
var topButton;
var bottomButton;
var clockTimer = 0;
var ticking = false;
var mobileQuery = window.matchMedia( '(max-width: 768px)' );
 
function updateClockisMobileView(userLang) {
return mobileQuery.matches ||
var now = new Date();
document.documentElement.classList.contains( 'skin-minerva' ) ||
new URLSearchParams( window.location.search ).get( 'mobileaction' ) === 'toggle_view_mobile';
}
 
function msg( key ) {
// 使用 Intl.DateTimeFormat 根据用户语言格式化
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase();
var localFormatter = new Intl.DateTimeFormat(userLang, {
var en = lang.indexOf( 'en' ) === 0;
year: 'numeric', month: '2-digit', day: '2-digit',
var messages = {
hour: '2-digit', minute: '2-digit', second: '2-digit',
top: en ? 'Top' : '顶部',
hour12: false, timeZoneName: 'short'
bottom: en ? 'Bottom' : '底部',
});
topTitle: en ? 'Back to top' : '回到顶部',
var localStr = localFormatter.format(now);
bottomTitle: en ? 'Back to bottom' : '回到底部',
loading: en ? 'Loading...' : '加载中...'
};
return messages[ key ];
}
 
function createButton( id, text, tooltip, clickHandler ) {
// UTC 格式
var button = document.createElement( 'button' );
var utcFormatter = new Intl.DateTimeFormat('en-US', {
button.id = id;
year: 'numeric', month: '2-digit', day: '2-digit',
button.className = 'mw-rt-button';
hour: '2-digit', minute: '2-digit', second: '2-digit',
button.title = tooltip;
hour12: false, timeZone: 'UTC', timeZoneName: 'short'
button.type = 'button';
});
button.textContent = text;
var utcStr = utcFormatter.format(now);
button.setAttribute( 'aria-label', tooltip );
button.addEventListener( 'click', clickHandler );
return button;
}
 
function formatParts( date, zone ) {
$('#current-local').text(localStr);
var userLang = mw.config.get( 'wgUserLanguage' ) || 'zh-cn';
$('#current-utc').text(utcStr);
var parts = new Intl.DateTimeFormat( userLang, {
}
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: zone
} ).formatToParts( date );
 
function partValue( type ) {
$(function () {
var part = parts.find( function ( item ) {
var isMobile = window.innerWidth <= 768;
return item.type === type;
} );
return part ? part.value : '';
}
 
return {
/* ---------- 获取用户语言 ---------- */
date: partValue( 'year' ) + '-' + partValue( 'month' ) + '-' + partValue( 'day' ),
var userLang = mw.config.get('wgUserLanguage') || 'en';
time: partValue( 'hour' ) + ':' + partValue( 'minute' ) + ':' + partValue( 'second' )
};
}
 
function renderClock() {
/* ---------- 深色模式检测 ---------- */
var now = new Date();
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)';
var local = formatParts( now, timeZone );
const border = isDark ? '#555' : '#aaa';
var utc = formatParts( now, 'UTC' );
const color = isDark ? '#eee' : '#333';
var localDateEl = document.getElementById( 'mw-local-date' );
var localTimeEl = document.getElementById( 'mw-local-time' );
var utcTimeEl = document.getElementById( 'mw-utc-time' );
 
if ( localDateEl ) {
/* ---------- 工具栏容器 ---------- */
localDateEl.textContent = local.date;
var $container = $('<div id="mw-custom-tools"></div>').css({
}
position: 'fixed',
if ( localTimeEl ) {
bottom: '120px',
localTimeEl.textContent = local.time;
right: '50px',
}
display: 'flex',
if ( utcTimeEl ) {
flexDirection: 'column',
utcTimeEl.textContent = 'UTC ' + utc.date + ' ' + utc.time;
alignItems: 'flex-end',
}
gap: '5px',
}
zIndex: 9999,
opacity: 0,
transform: 'translateY(20px)',
}).appendTo('body');
 
function updateTopButton() {
/* ---------- 按钮生成函数 ---------- */
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
function createButton(id, text, tooltip, clickHandler) {
topButton.hidden = scrollTop <= 240;
return $('<div></div>', { id: id, title: tooltip, text: text }).css({
bottomButton.hidden = document.documentElement.scrollHeight - window.innerHeight - scrollTop <= 240;
padding: '5px 10px',
}
fontSize: '12px',
background: bg,
border: '1px solid ' + border,
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color: color,
cursor: 'pointer',
textAlign: 'center',
opacity: 0.7,
transition: 'background 0.3s, opacity 0.3s, transform 0.3s',
backdropFilter: 'blur(4px)'
}).hover(
function () { $(this).css({ background: isDark ? '#555' : '#ddd', opacity: 1 }); },
function () { $(this).css({ background: bg, opacity: 0.7 }); }
).click(clickHandler);
}
 
function onScroll() {
/* ---------- 回到顶部 / 底部按钮 ---------- */
if ( ticking ) {
var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
return;
$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
}
});
ticking = true;
var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
window.requestAnimationFrame( function () {
$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
updateTopButton();
});
ticking = false;
} );
}
 
function stopClock() {
/* ---------- 时钟区域（桌面端） ---------- */
if ( clockTimer ) {
if (!isMobile) {
window.clearInterval( clockTimer );
var $clockDiv = $('<div id="current-clock"></div>').css({
clockTimer = 0;
padding: '6px 12px',
}
fontSize: '12px',
}
background: bg,
border: '1px solid ' + border,
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color: color,
textAlign: 'center',
lineHeight: '1.4',
backdropFilter: 'blur(4px)'
}).append(
$('<div id="current-local">加载中...</div>'),
$('<div id="current-utc">加载中...</div>')
);
$container.append($clockDiv);
}
 
function teardownToolbar() {
/* ---------- 组装按钮 ---------- */
stopClock();
$container.append($topButton, $bottomButton);
window.removeEventListener( 'scroll', onScroll );
if ( toolbar ) {
toolbar.remove();
}
toolbar = null;
topButton = null;
bottomButton = null;
}
 
function initToolbar() {
/* ---------- 初次进入的动画效果 ---------- */
var clockDiv;
$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);
 
if ( isMobileView() ) {
/* ---------- 时钟定时更新 ---------- */
teardownToolbar();
if (!isMobile) {
return;
updateClock(userLang);
}
setInterval(function () { updateClock(userLang); }, 1000);
if ( toolbar ) {
}
return;
}
 
toolbar = document.createElement( 'div' );
/* ---------- 滚动动态控制按钮显示 ---------- */
toolbar.id = 'mw-right-toolbar';
$topButton.hide();
toolbar.className = 'mw-right-toolbar';
$(window).on('scroll', function () {
 
var scrollTop = $(this).scrollTop();
topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
if (scrollTop > 200) {
window.scrollTo( { top: 0, behavior: 'smooth' } );
$topButton.fadeIn();
} );
} else {
bottomButton = createButton( 'mw-scroll-bottom', msg( 'bottom' ), msg( 'bottomTitle' ), function () {
$topButton.fadeOut();
window.scrollTo( {
}
top: Math.max( document.body.scrollHeight, document.documentElement.scrollHeight ),
});
behavior: 'smooth'
});
} );
} );
 
clockDiv = document.createElement( 'div' );
clockDiv.id = 'mw-right-toolbar-clock';
clockDiv.className = 'mw-rt-clock';
clockDiv.innerHTML = '<div id="mw-local-date"></div><div id="mw-local-time"></div><div id="mw-utc-time"></div>';
clockDiv.firstChild.textContent = msg( 'loading' );
 
toolbar.appendChild( topButton );
toolbar.appendChild( bottomButton );
toolbar.appendChild( clockDiv );
document.body.appendChild( toolbar );
 
window.addEventListener( 'scroll', onScroll, { passive: true } );
updateTopButton();
renderClock();
clockTimer = window.setInterval( renderClock, 1000 );
 
window.requestAnimationFrame( function () {
if ( toolbar ) {
toolbar.classList.add( 'is-visible' );
}
} );
}
 
function refreshToolbar() {
if ( isMobileView() ) {
teardownToolbar();
return;
}
initToolbar();
}
 
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', initToolbar );
} else {
initToolbar();
}
 
mobileQuery.addEventListener( 'change', refreshToolbar );
window.addEventListener( 'orientationchange', refreshToolbar );
document.addEventListener( 'visibilitychange', function () {
if ( !toolbar ) {
return;
}
if ( document.hidden ) {
stopClock();
return;
}
renderClock();
if ( !clockTimer ) {
clockTimer = window.setInterval( renderClock, 1000 );
}
} );
} );
}() );
取自“https://xn--k7y073b.xn--6qqs2j68e.xn--fiqs8s/wiki/MediaWiki:Gadget-RightToolbar.js”