陋室

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

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

Maintenance script​（留言 | 贡献）

647次编辑
删除的内容 添加的内容
Maintenance script​（留言 | 贡献）
647次编辑
拆分样式并优化性能
Maintenance script​（留言 | 贡献）
647次编辑
小 优化 RightToolbar：移动端禁用并降低空闲开销
 
（未显示同一用户的3个中间版本）
第1行：
/* MediaWiki Gadget: RightToolbar */
/* ================================================================
( function () {
MediaWiki Gadget: Localized Clock Bar
'use strict';
功能：
- 显示浏览器本地时间和 UTC 时间
- 使用 MediaWiki 用户语言格式
- 深色模式适配 + 滑入动画
================================================================= */
 
mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
var toolbar;
function initClockBar() {
var topButton;
var isMobile = window.innerWidth <= 768;
var bottomButton;
var $container = $('#mw-right-toolbar');
var clockTimer = 0;
var ticking = false;
var mobileQuery = window.matchMedia( '(max-width: 768px)' );
 
function isMobileView() {
if (!$container.length) {
return mobileQuery.matches ||
$container = $('<div id="mw-right-toolbar" class="mw-right-toolbar"></div>').appendTo('body');
document.documentElement.classList.contains( 'skin-minerva' ) ||
}
new URLSearchParams( window.location.search ).get( 'mobileaction' ) === 'toggle_view_mobile';
}
 
function createButtonmsg(id, text, tooltip,key clickHandler) {
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase();
return $('<button></button>', {
var en = lang.indexOf( 'en' ) === 0;
id: id,
var messages = {
class: 'mw-rt-button',
top: en ? 'Top' : '顶部',
title: tooltip,
bottom: en ? 'Bottom' : '底部',
text: text,
topTitle: en ? 'Back to top' : '回到顶部',
type: 'button'
bottomTitle: en ? 'Back to bottom' : '回到底部',
}).on('click', clickHandler);
loading: en ? 'Loading...' : '加载中...'
}
};
return messages[ key ];
}
 
function createButton( id, text, tooltip, clickHandler ) {
var $topButton = $('#mw-scroll-top');
var button = document.createElement( 'button' );
if (!$topButton.length) {
button.id = id;
$topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
button.className = 'mw-rt-button';
$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
button.title = tooltip;
});
button.type = 'button';
$container.append($topButton);
button.textContent = text;
}
button.setAttribute( 'aria-label', tooltip );
button.addEventListener( 'click', clickHandler );
return button;
}
 
function formatParts( date, zone ) {
var $bottomButton = $('#mw-scroll-bottom');
var userLang = mw.config.get( 'wgUserLanguage' ) || 'zh-cn';
if (!$bottomButton.length) {
var parts = new Intl.DateTimeFormat( userLang, {
$bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
year: 'numeric',
$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
month: '2-digit',
});
day: '2-digit',
$container.append($bottomButton);
hour: '2-digit',
}
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: zone
} ).formatToParts( date );
 
function partValue( type ) {
var $clockDiv = $('#mw-right-toolbar-clock');
var part = parts.find( function ( item ) {
if (!isMobile && !$clockDiv.length) {
return item.type === type;
$clockDiv = $('<div id="mw-right-toolbar-clock" class="mw-rt-clock"></div>').append(
} );
$('<div id="mw-local-date">加载中...</div>'),
return part ? part.value : '';
$('<div id="mw-local-time"></div>'),
}
$('<div id="mw-utc-time"></div>')
);
$container.append($clockDiv);
}
 
return {
$topButton.hide();
date: partValue( 'year' ) + '-' + partValue( 'month' ) + '-' + partValue( 'day' ),
var ticking = false;
time: partValue( 'hour' ) + ':' + partValue( 'minute' ) + ':' + partValue( 'second' )
$(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 renderClock() {
var now = new Date();
$container.addClass('is-visible');
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' );
var utcTimeEl = document.getElementById( 'mw-utc-time' );
 
if ( localDateEl ) {
function renderClock() {
localDateEl.textContent = local.date;
var now = new Date();
}
var userLang = mw.config.get('wgUserLanguage') || 'en';
if ( localTimeEl ) {
localTimeEl.textContent = local.time;
}
if ( utcTimeEl ) {
utcTimeEl.textContent = 'UTC ' + utc.date + ' ' + utc.time;
}
}
 
function updateTopButton() {
var localFormatter = new Intl.DateTimeFormat(userLang, {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
year: 'numeric',
topButton.hidden = scrollTop <= 240;
month: 'long',
bottomButton.hidden = document.documentElement.scrollHeight - window.innerHeight - scrollTop <= 240;
day: 'numeric',
}
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
});
 
function onScroll() {
var localParts = localFormatter.formatToParts(now);
if ( ticking ) {
var localDateStr = localParts.filter(function (p) {
return;
return p.type === 'year' || p.type === 'month' || p.type === 'day';
}
}).map(function (p) {
ticking = true;
return p.value;
window.requestAnimationFrame( function () {
}).join(' ');
updateTopButton();
ticking = false;
} );
}
 
function stopClock() {
var localTimeStr = localParts.filter(function (p) {
if ( clockTimer ) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
window.clearInterval( clockTimer );
}).map(function (p) {
clockTimer = 0;
return p.value;
}
}).join(':');
}
 
function teardownToolbar() {
$('#mw-local-date').text(localDateStr);
stopClock();
$('#mw-local-time').text(localTimeStr);
window.removeEventListener( 'scroll', onScroll );
if ( toolbar ) {
toolbar.remove();
}
toolbar = null;
topButton = null;
bottomButton = null;
}
 
function initToolbar() {
var utcFormatter = new Intl.DateTimeFormat(userLang, {
var clockDiv;
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: 'UTC'
});
 
if ( isMobileView() ) {
var utcParts = utcFormatter.formatToParts(now);
teardownToolbar();
var utcDateStr = utcParts.filter(function (p) {
return;
return p.type === 'year' || p.type === 'month' || p.type === 'day';
}
}).map(function (p) {
if ( toolbar ) {
return p.value;
return;
}).join(' ');
}
 
toolbar = document.createElement( 'div' );
var utcTimeStr = utcParts.filter(function (p) {
toolbar.id = 'mw-right-toolbar';
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
toolbar.className = 'mw-right-toolbar';
}).map(function (p) {
return p.value;
}).join(':');
 
topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
$('#mw-utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr);
window.scrollTo( { top: 0, behavior: 'smooth' } );
}
} );
bottomButton = createButton( 'mw-scroll-bottom', msg( 'bottom' ), msg( 'bottomTitle' ), function () {
window.scrollTo( {
top: Math.max( document.body.scrollHeight, document.documentElement.scrollHeight ),
behavior: 'smooth'
} );
} );
 
clockDiv = document.createElement( 'div' );
var clockTimer = window.setInterval(renderClock, 1000);
clockDiv.id = 'mw-right-toolbar-clock';
renderClock();
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 );
mw.hook('user.languageChange').add(renderClock);
toolbar.appendChild( bottomButton );
toolbar.appendChild( clockDiv );
document.body.appendChild( toolbar );
 
document window.addEventListener( 'visibilitychangescroll', functiononScroll, { passive: true } () {;
updateTopButton();
if (document.hidden) {
renderClock();
window.clearInterval(clockTimer);
clockTimer = window.setInterval( renderClock, 1000 );
clockTimer = null;
return;
}
if (!clockTimer) {
clockTimer = window.setInterval(renderClock, 1000);
renderClock();
}
});
}
 
window.requestAnimationFrame( function () {
$(initClockBar);
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”