查看“︁MediaWiki:Gadget-RightToolbar.v2.js”︁的源代码

/* MediaWiki Gadget: RightToolbar */
( function () {
	'use strict';

	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.indexOf( 'en' ) === 0;
			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 button = document.createElement( 'button' );
			button.id = id;
			button.className = 'mw-rt-button';
			button.title = tooltip;
			button.type = 'button';
			button.textContent = text;
			button.setAttribute( 'aria-label', tooltip );
			button.addEventListener( 'click', clickHandler );
			return button;
		}

		function formatParts( date, zone ) {
			var userLang = mw.config.get( 'wgUserLanguage' ) || 'zh-cn';
			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 ) {
				var part = parts.find( function ( item ) {
					return item.type === type;
				} );
				return part ? part.value : '';
			}

			return {
				date: partValue( 'year' ) + '-' + partValue( 'month' ) + '-' + partValue( 'day' ),
				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' );
			var utcTimeEl = document.getElementById( 'mw-utc-time' );

			if ( localDateEl ) {
				localDateEl.textContent = local.date;
			}
			if ( localTimeEl ) {
				localTimeEl.textContent = local.time;
			}
			if ( utcTimeEl ) {
				utcTimeEl.textContent = 'UTC ' + utc.date + ' ' + utc.time;
			}
		}

		function updateTopButton() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
			topButton.hidden = scrollTop <= 240;
			bottomButton.hidden = document.documentElement.scrollHeight - window.innerHeight - scrollTop <= 240;
		}

		function onScroll() {
			if ( ticking ) {
				return;
			}
			ticking = true;
			window.requestAnimationFrame( function () {
				updateTopButton();
				ticking = false;
			} );
		}

		function stopClock() {
			if ( clockTimer ) {
				window.clearInterval( clockTimer );
				clockTimer = 0;
			}
		}

		function teardownToolbar() {
			stopClock();
			window.removeEventListener( 'scroll', onScroll );
			if ( toolbar ) {
				toolbar.remove();
			}
			toolbar = null;
			topButton = null;
			bottomButton = null;
		}

		function initToolbar() {
			var clockDiv;

			if ( isMobileView() ) {
				teardownToolbar();
				return;
			}
			if ( toolbar ) {
				return;
			}

			toolbar = document.createElement( 'div' );
			toolbar.id = 'mw-right-toolbar';
			toolbar.className = 'mw-right-toolbar';

			topButton = createButton( 'mw-scroll-top', msg( 'top' ), msg( 'topTitle' ), function () {
				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' );
			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 );
			}
		} );
	} );
}() );