陋室

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

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

Maintenance script​（留言 | 贡献）

647次编辑
删除的内容 添加的内容
Maintenance script​（留言 | 贡献）
647次编辑
添加JavaScript代码
Maintenance script​（留言 | 贡献）
647次编辑
小 优化 RightToolbar：移动端禁用并降低空闲开销
 
（未显示同一用户的1个中间版本）
第1行：
/* MediaWiki Gadget: RightToolbar */
( function () {
'use strict';
 
mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
/* ================================================================
var toolbar;
MediaWiki Gadget: Localized Clock Bar
var topButton;
功能：
var bottomButton;
- 显示浏览器本地时间和 UTC 时间
var clockTimer = 0;
- 使用 MediaWiki 用户语言格式
var ticking = false;
- 深色模式适配 + 滑入动画
var mobileQuery = window.matchMedia( '(max-width: 768px)' );
================================================================= */
 
function isMobileView() {
mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
return mobileQuery.matches ||
var STYLE_ID = 'mw-right-toolbar-style';
document.documentElement.classList.contains( 'skin-minerva' ) ||
new URLSearchParams( window.location.search ).get( 'mobileaction' ) === 'toggle_view_mobile';
}
 
function msg( key ) {
function ensureToolbarStyles() {
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase();
if ( document.getElementById( STYLE_ID ) ) {
var en = lang.indexOf( 'en' ) === 0;
return;
var messages = {
}
top: en ? 'Top' : '顶部',
bottom: en ? 'Bottom' : '底部',
topTitle: en ? 'Back to top' : '回到顶部',
bottomTitle: en ? 'Back to bottom' : '回到底部',
loading: en ? 'Loading...' : '加载中...'
};
return messages[ key ];
}
 
function createButton( id, text, tooltip, clickHandler ) {
var css = [
var button = document.createElement( 'button' );
'#mw-right-toolbar, .mw-right-toolbar {',
button.id = id;
' position: fixed;',
button.className = 'mw-rt-button';
' bottom: 96px;',
button.title = tooltip;
' right: 24px;',
button.type = 'button';
' display: flex;',
button.textContent = text;
' flex-direction: column;',
button.setAttribute( 'aria-label', tooltip );
' align-items: flex-end;',
button.addEventListener( 'click', clickHandler );
' gap: 6px;',
return button;
' 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' );
 
function formatParts( date, zone ) {
var styleNode = mw.loader.addStyleTag( css );
var userLang = mw.config.get( 'wgUserLanguage' ) || 'zh-cn';
styleNode.id = STYLE_ID;
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 initClockBar() {
var part = parts.find( function ( item ) {
ensureToolbarStyles();
return item.type === type;
} );
return part ? part.value : '';
}
 
return {
var isMobile = window.innerWidth <= 768;
date: partValue( 'year' ) + '-' + partValue( 'month' ) + '-' + partValue( 'day' ),
var container = document.getElementById( 'mw-right-toolbar' );
time: partValue( 'hour' ) + ':' + partValue( 'minute' ) + ':' + partValue( 'second' )
};
}
 
function renderClock() {
if ( !container ) {
var now = new Date();
container = document.createElement( 'div' );
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
container.id = 'mw-right-toolbar';
var local = formatParts( now, timeZone );
container.className = 'mw-right-toolbar';
var utc = formatParts( now, 'UTC' );
document.body.appendChild( container );
var localDateEl = document.getElementById( 'mw-local-date' );
}
var localTimeEl = document.getElementById( 'mw-local-time' );
var utcTimeEl = document.getElementById( 'mw-utc-time' );
 
if ( localDateEl ) {
function createButton( id, text, tooltip, clickHandler ) {
localDateEl.textContent = local.date;
var button = document.createElement( 'button' );
}
button.id = id;
if ( localTimeEl ) {
button.className = 'mw-rt-button';
localTimeEl.textContent = local.time;
button.title = tooltip;
}
button.textContent = text;
if ( utcTimeEl ) {
button.type = 'button';
utcTimeEl.textContent = 'UTC ' + utc.date + ' ' + utc.time;
button.addEventListener( 'click', clickHandler );
}
return button;
}
}
 
function updateTopButton() {
var topButton = document.getElementById( 'mw-scroll-top' );
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
if ( !topButton ) {
topButton.hidden = scrollTop <= 240;
topButton = createButton( 'mw-scroll-top', '▲', '回到顶部', function () {
bottomButton.hidden = document.documentElement.scrollHeight - window.innerHeight - scrollTop <= 240;
window.scrollTo( {
}
top: 0,
behavior: 'smooth'
} );
} );
container.appendChild( topButton );
}
 
function onScroll() {
var bottomButton = document.getElementById( 'mw-scroll-bottom' );
if ( !bottomButtonticking ) {
return;
bottomButton = createButton( 'mw-scroll-bottom', '▼', '回到底部', function () {
}
window.scrollTo( {
ticking = true;
top: document.body.scrollHeight,
window.requestAnimationFrame( function () {
behavior: 'smooth'
updateTopButton();
} );
ticking = false;
} );
} );
container.appendChild( bottomButton );
}
}
 
function stopClock() {
var clockDiv = document.getElementById( 'mw-right-toolbar-clock' );
if ( !isMobile && !clockDivclockTimer ) {
window.clearInterval( clockTimer );
clockDiv = document.createElement( 'div' );
clockTimer = 0;
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 );
}
 
function teardownToolbar() {
topButton.style.display = 'none';
stopClock();
var ticking = false;
window.addEventListenerremoveEventListener( 'scroll', functiononScroll () {;
if ( tickingtoolbar ) {
toolbar.remove();
return;
}
}
toolbar = null;
ticking = true;
topButton = null;
window.requestAnimationFrame( function () {
bottomButton = null;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
}
if ( scrollTop > 200 ) {
topButton.style.display = 'block';
} else {
topButton.style.display = 'none';
}
ticking = false;
} );
} );
 
window.requestAnimationFrame( function initToolbar() {
var clockDiv;
container.classList.add( 'is-visible' );
} );
 
if ( isMobileView() ) {
function renderClock() {
teardownToolbar();
var now = new Date();
return;
var userLang = mw.config.get( 'wgUserLanguage' ) || 'en';
}
if ( toolbar ) {
return;
}
 
toolbar = document.createElement( 'div' );
var localFormatter = new Intl.DateTimeFormat( userLang, {
toolbar.id = 'mw-right-toolbar';
year: 'numeric',
toolbar.className = 'mw-right-toolbar';
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
} );
 
topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
var localParts = localFormatter.formatToParts( now );
window.scrollTo( { top: 0, behavior: 'smooth' } );
var localDateStr = localParts.filter( function ( p ) {
} );
return p.type === 'year' || p.type === 'month' || p.type === 'day';
bottomButton = createButton( 'mw-scroll-bottom', msg( 'bottom' ), msg( }'bottomTitle' ).map(, function ( p ) {
window.scrollTo( {
return p.value;
top: Math.max( document.body.scrollHeight, document.documentElement.scrollHeight ),
} ).join( ' ' );
behavior: 'smooth'
} );
} );
 
clockDiv = document.createElement( 'div' );
var localTimeStr = localParts.filter( function ( p ) {
clockDiv.id = 'mw-right-toolbar-clock';
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
clockDiv.className = 'mw-rt-clock';
} ).map( function ( p ) {
clockDiv.innerHTML = '<div id="mw-local-date"></div><div id="mw-local-time"></div><div id="mw-utc-time"></div>';
return p.value;
clockDiv.firstChild.textContent = msg( 'loading' );
} ).join( ':' );
 
toolbar.appendChild( topButton );
var localDateEl = document.getElementById( 'mw-local-date' );
toolbar.appendChild( bottomButton );
var localTimeEl = document.getElementById( 'mw-local-time' );
toolbar.appendChild( clockDiv );
if ( localDateEl ) localDateEl.textContent = localDateStr;
document.body.appendChild( toolbar );
if ( localTimeEl ) localTimeEl.textContent = localTimeStr;
 
window.addEventListener( 'scroll', onScroll, { passive: true } );
var utcFormatter = new Intl.DateTimeFormat( userLang, {
updateTopButton();
year: 'numeric',
renderClock();
month: 'long',
clockTimer = window.setInterval( renderClock, 1000 );
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: 'UTC'
} );
 
window.requestAnimationFrame( function () {
var utcParts = utcFormatter.formatToParts( now );
if ( toolbar ) {
var utcDateStr = utcParts.filter( function ( p ) {
toolbar.classList.add( 'is-visible' );
return p.type === 'year' || p.type === 'month' || p.type === 'day';
}
} ).map( function ( p ) {
} );
return p.value;
}
} ).join( ' ' );
 
function refreshToolbar() {
var utcTimeStr = utcParts.filter( function ( p ) {
if ( isMobileView() ) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
teardownToolbar();
} ).map( function ( p ) {
return p.value;
}
} ).join( ':' );
initToolbar();
}
 
if ( document.readyState === 'loading' ) {
var utcTimeEl = document.getElementById( 'mw-utc-time' );
document.addEventListener( 'DOMContentLoaded', initToolbar );
if ( utcTimeEl ) utcTimeEl.textContent = 'UTC: ' + utcDateStr + ' ' + utcTimeStr;
} else {
}
initToolbar();
}
 
mobileQuery.addEventListener( 'change', refreshToolbar );
var clockTimer = window.setInterval( renderClock, 1000 );
window.addEventListener( 'orientationchange', refreshToolbar );
renderClock();
document.addEventListener( 'visibilitychange', function () {
 
if ( !toolbar ) {
mw.hook( 'user.languageChange' ).add( renderClock );
return;
 
}
document.addEventListener( 'visibilitychange', function () {
if ( document.hidden ) {
stopClock();
window.clearInterval( clockTimer );
return;
clockTimer = null;
}
return;
renderClock();
}
if ( !clockTimer ) {
clockTimer = window.setInterval( renderClock, 1000 );
}
renderClock();
} );
}
} );
}() );
}
 
// 页面加载完成后初始化
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', initClockBar );
} else {
initClockBar();
}
} );
取自“https://xn--k7y073b.xn--6qqs2j68e.xn--fiqs8s/wiki/MediaWiki:Gadget-RightToolbar.js”