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

删除的内容 添加的内容
Maintenance script​(留言 | 贡献)
Inline fallback styles for RightToolbar
Maintenance script​(留言 | 贡献)
添加JavaScript代码
第1行:
 
/* ================================================================
MediaWiki Gadget: Localized Clock Bar
第86行 ⟶ 第87行:
 
var isMobile = window.innerWidth <= 768;
var $container = $document.getElementById( '#mw-right-toolbar' );
 
if ( !$container.length ) {
$container = $document.createElement( '<div id="mw-right-toolbar" class="mw-right-toolbar"></div>' ).appendTo( 'body' );
container.id = 'mw-right-toolbar';
container.className = 'mw-right-toolbar';
document.body.appendChild( container );
}
 
function createButton( id, text, tooltip, clickHandler ) {
returnvar $button = document.createElement( '<button></button>', {);
button.id id:= id,;
button.className class:= 'mw-rt-button',;
button.title title:= tooltip,;
button.textContent text:= text,;
button.type type:= 'button';
} )button.onaddEventListener( 'click', clickHandler );
return button;
}
 
var $topButton = $document.getElementById( '#mw-scroll-top' );
if ( !$topButton.length ) {
$topButton = createButton( 'mw-scroll-top', '▲', '回到顶部', function () {
$( 'html, body' )window.animatescrollTo( { scrollTop: 0 }, { duration: 500, easing: 'swing' } );
top: 0,
behavior: 'smooth'
} );
} );
$container.appendappendChild( $topButton );
}
 
var $bottomButton = $document.getElementById( '#mw-scroll-bottom' );
if ( !$bottomButton.length ) {
$bottomButton = createButton( 'mw-scroll-bottom', '▼', '回到底部', function () {
window.scrollTo( {
$( 'html, body' ).animate( { scrollTop: $( document ).height() }, { duration: 500, easing: 'swing' } );
top: document.body.scrollHeight,
behavior: 'smooth'
} );
} );
$container.appendappendChild( $bottomButton );
}
 
var $clockDiv = $document.getElementById( '#mw-right-toolbar-clock' );
if ( !isMobile && !$clockDiv.length ) {
$clockDiv = $document.createElement( '<div id="mw-right-toolbar-clock" class="mw-rt-clock"></div>' ).append(;
clockDiv.id $(= '<div id="mw-localright-date">加载中...</div>toolbar-clock' ),;
clockDiv.className $(= '<div id="mw-localrt-time"></div>clock' ),;
$( '<div id="mw-utc-time"></div>' )
var localDateDiv = document.createElement( 'div' );
$containerlocalDateDiv.append(id $clockDiv= )'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.hide()style.display = 'none';
var ticking = false;
$( window ).onaddEventListener( 'scroll', function () {
if ( ticking ) {
return;
第136行 ⟶ 第160行:
ticking = true;
window.requestAnimationFrame( function () {
var scrollTop = $( window.pageYOffset )|| document.documentElement.scrollTop();
if ( scrollTop > 200 ) {
$topButton.fadeIn()style.display = 'block';
} else {
$topButton.fadeOut()style.display = 'none';
}
ticking = false;
第147行 ⟶ 第171行:
 
window.requestAnimationFrame( function () {
$container.addClassclassList.add( 'is-visible' );
} );
 
第178行 ⟶ 第202行:
} ).join( ':' );
 
$var localDateEl = document.getElementById( '#mw-local-date' ).text( localDateStr );
$var localTimeEl = document.getElementById( '#mw-local-time' ).text( localTimeStr );
if ( localDateEl ) localDateEl.textContent = localDateStr;
if ( localTimeEl ) localTimeEl.textContent = localTimeStr;
 
var utcFormatter = new Intl.DateTimeFormat( userLang, {
第205行 ⟶ 第231行:
} ).join( ':' );
 
$var utcTimeEl = document.getElementById( '#mw-utc-time' ).text( 'UTC: ' + utcDateStr + ' ' + utcTimeStr );
if ( utcTimeEl ) utcTimeEl.textContent = 'UTC: ' + utcDateStr + ' ' + utcTimeStr;
}
 
第226行 ⟶ 第253行:
}
 
// 页面加载完成后初始化
$( function () {
if ( document.readyState === 'loading' ) {
ensureToolbarStyles();
document.addEventListener( 'DOMContentLoaded', initClockBar );
} else {
initClockBar();
} );
} );