陋室

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

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

Maintenance script​（留言 | 贡献）

647次编辑
删除的内容 添加的内容
Maintenance script​（留言 | 贡献）
647次编辑
维护 RightToolbar：样式归一到 CSS 页
Maintenance script​（留言 | 贡献）
647次编辑
小 优化 RightToolbar：移动端禁用并降低空闲开销
 
第4行：
 
mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
var toolbar;
var topButton;
var bottomButton;
var clockTimer = 0;
var ticking = false;
var mobileQuery = window.matchMedia( '(max-width: 768px)' );
 
function isMobileView() {
return mobileQuery.matches ||
document.documentElement.classList.contains( 'skin-minerva' ) ||
new URLSearchParams( window.location.search ).get( 'mobileaction' ) === 'toggle_view_mobile';
}
 
function msg( key ) {
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase();
var en = lang.toLowerCase().indexOf( 'en' ) === 0;
var messages = {
top: en ? '▲Top' : '▲顶部',
bottom: en ? '▼Bottom' : '▼底部',
topTitle: en ? 'Back to top' : '回到顶部',
bottomTitle: en ? 'Back to bottom' : '回到底部',
第22行 ⟶ 第35行：
button.className = 'mw-rt-button';
button.title = tooltip;
button.textContent = text;
button.type = 'button';
button.textContent = text;
button.setAttribute( 'aria-label', tooltip );
button.addEventListener( 'click', clickHandler );
return button;
}
 
function renderClockformatParts( date, zone ) {
var now = new Date();
var userLang = mw.config.get( 'wgUserLanguage' ) || 'zh-cn';
var timeZoneparts = new Intl.DateTimeFormat().resolvedOptions().timeZone; 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 formatPartspartValue( zonetype ) {
var partspart = new Intlparts.DateTimeFormatfind( userLang,function ( item ) {
return item.type === type;
year: 'numeric',
month:} 'long',);
return part ? part.value : '';
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: zone
} ).formatToParts( now );
 
return {
date: parts.filter( function ( part ) {
return part.type === 'year' || part.type === 'month' || part.type === 'day';
} ).map( function ( part ) {
return part.value;
} ).join( ' ' ),
time: parts.filter( function ( part ) {
return part.type === 'hour' || part.type === 'minute' || part.type === 'second';
} ).map( function ( part ) {
return part.value;
} ).join( ':' )
};
}
 
return {
var local = formatParts( timeZone );
date: partValue( 'year' ) + '-' + partValue( 'month' ) + '-' + partValue( 'day' ),
var utc = formatParts( 'UTC' );
time: partValue( 'hour' ) + ':' + partValue( 'minute' ) + ':' + partValue( 'second' )
};
}
 
function renderClock() {
var now = new Date();
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var local = formatParts( now, timeZone );
var utc = formatParts( now, 'UTC' );
var localDateEl = document.getElementById( 'mw-local-date' );
var localTimeEl = document.getElementById( 'mw-local-time' );
第72行 ⟶ 第84行：
}
if ( utcTimeEl ) {
utcTimeEl.textContent = 'UTC: ' + utc.date + ' ' + utc.time;
}
}
 
function initToolbarupdateTopButton() {
var isMobilescrollTop = window.innerWidthpageYOffset <=|| document.documentElement.scrollTop || 7680;
topButton.hidden = scrollTop <= 240;
var container = document.getElementById( 'mw-right-toolbar' );
bottomButton.hidden = document.documentElement.scrollHeight - window.innerHeight - scrollTop <= 240;
var topButton;
}
var bottomButton;
var clockDiv;
var ticking = false;
var clockTimer;
 
function onScroll() {
if ( !container ) {
if ( ticking ) {
container = document.createElement( 'div' );
return;
container.id = 'mw-right-toolbar';
container.className = 'mw-right-toolbar';
document.body.appendChild( container );
}
ticking = true;
window.requestAnimationFrame( function () {
updateTopButton();
ticking = false;
} );
}
 
function stopClock() {
topButton = document.getElementById( 'mw-scroll-top' );
if ( !topButtonclockTimer ) {
window.clearInterval( clockTimer );
topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
clockTimer = 0;
window.scrollTo( { top: 0, behavior: 'smooth' } );
} );
container.appendChild( topButton );
}
}
 
function teardownToolbar() {
bottomButton = document.getElementById( 'mw-scroll-bottom' );
stopClock();
if ( !bottomButton ) {
window.removeEventListener( 'scroll', onScroll );
bottomButton = createButton( 'mw-scroll-bottom', msg( 'bottom' ), msg( 'bottomTitle' ), function () {
if ( toolbar ) {
window.scrollTo( { top: document.body.scrollHeight, behavior: 'smooth' } );
} toolbar.remove();
container.appendChild( bottomButton );
}
toolbar = null;
topButton = null;
bottomButton = null;
}
 
function initToolbar() {
clockDiv = document.getElementById( 'mw-right-toolbar-clock' );
ifvar ( !isMobile && !clockDiv ) {;
 
clockDiv = document.createElement( 'div' );
if ( isMobileView() ) {
clockDiv.id = 'mw-right-toolbar-clock';
teardownToolbar();
clockDiv.className = 'mw-rt-clock';
return;
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' );
if ( toolbar ) {
container.appendChild( clockDiv );
return;
}
 
toolbar = document.createElement( 'div' );
topButton.style.display = 'none';
toolbar.id = 'mw-right-toolbar';
window.addEventListener( 'scroll', function () {
toolbar.className = 'mw-right-toolbar';
if ( ticking ) {
 
return;
topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
}
window.scrollTo( { top: 0, behavior: 'smooth' } );
ticking = true;
} );
window.requestAnimationFrame( function () {
bottomButton = createButton( 'mw-scroll-bottom', msg( 'bottom' ), msg( 'bottomTitle' ), function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
window.scrollTo( {
topButton.style.display = scrollTop > 200 ? 'block' : 'none';
top: Math.max( document.body.scrollHeight, document.documentElement.scrollHeight ),
ticking = false;
behavior: 'smooth'
} );
} );
 
clockDiv = document.createElement( 'div' );
window.requestAnimationFrame( function () {
clockDiv.id = 'mw-right-toolbar-clock';
container.classList.add( 'is-visible' );
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 );
clockTimer = window.setInterval( renderClock, 1000 );
toolbar.appendChild( bottomButton );
toolbar.appendChild( clockDiv );
document.body.appendChild( toolbar );
 
window.addEventListener( 'scroll', onScroll, { passive: true } );
updateTopButton();
renderClock();
mw.hook(clockTimer 'user.languageChange'= )window.addsetInterval( renderClock, 1000 );
 
documentwindow.addEventListenerrequestAnimationFrame( 'visibilitychange', function () {
if ( document.hiddentoolbar ) {
windowtoolbar.clearIntervalclassList.add( clockTimer'is-visible' );
clockTimer = null;
return;
}
if ( !clockTimer ) {
clockTimer = window.setInterval( renderClock, 1000 );
renderClock();
}
} );
}
 
function refreshToolbar() {
if ( isMobileView() ) {
teardownToolbar();
return;
}
initToolbar();
}
 
第157行 ⟶ 第184行：
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”