User:Writ Keeper/Scripts/timezone.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * 
 * This gadget adds a clock in the personal toolbar that shows the current time
 * in UTC, and also provides a link to purge the current page. Allows for UTC, 
 * local, and otherwise arbitrary time zones.
 *
 * Time zones can be set by setting a variable called "gadgetTimeZone"; this can 
 * be done by adding the line "gadgetTimeZone = <desired time zone>;" at the top
 * of your common.js page. Time zone names can be found here: 
 * https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 * This variable can also be set to "local", which will provide the user's local 
 * time. If a value is not set, or an invalid value is used, then the clock will
 * default to UTC.
 *
 * Based on: https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock.js --
 * revision November 2017
 *
 */
/*global mw, $ */
mw.loader.using( ['mediawiki.util', 'mediawiki.api'] ).then( function () {

function padWithZeroes( num ) {
	// Pad a number with zeroes. The number must be an integer where
	// 0 <= num < 100.
	return num < 10 ? '0' + num.toString() : num.toString(); 
}

function showTime( $target ) {
	var now = new Date();

	// Set the time.
	var hh;
	var mm;
	var ss;
	if (typeof gadgetTimeZone === "undefined" || gadgetTimeZone === "UTC")
	{
		hh = now.getUTCHours();
		mm = now.getUTCMinutes();
		ss = now.getUTCSeconds();
	}
	else if(gadgetTimeZone === "local")
	{
		hh = now.getHours();
		mm = now.getMinutes();
		ss = now.getSeconds();
	}
	else
	{
		var newNow;
		try
		{
			newNow = new Date(now.toLocaleString("en-US", { 
                    timeZone: gadgetTimeZone  
                }));
		}
		catch(err)
		{
			if(err.name = "RangeError")
			{
				console.error("Range error -- invalid time zone name provided");
				gadgetTimeZone = "UTC";
				newNow = now;
			}
		}
		hh = newNow.getHours();
		mm = newNow.getMinutes();
		ss = newNow.getSeconds();
	}
	var time = padWithZeroes( hh ) + ':' + padWithZeroes( mm ) + ':' + padWithZeroes( ss );
	$target.text( time );

	// Schedule the next time change.
	// 
	// We schedule the change for 100 ms _after_ the next clock tick. The delay
	// from setTimeout is not precise, and if we aim exactly for the tick, there
	// is a chance that the function will run slightly before it. If this
	// happens, we will display the same time for two seconds in a row - not
	// good. By scheduling 100 ms after the tick, we will always be about 100 ms
	// late, but we are also very likely to display a new time every second.
	var ms = now.getUTCMilliseconds();
	setTimeout( function () {
		showTime( $target );
	}, 1100 - ms );
}

function liveClock() {
	// Set CSS styles. We do this here instead of on the CSS page because some
	// wikis load this page directly, without loading the accompanying CSS.
	mw.util.addCSS( '#utcdate a { font-weight:bolder; font-size:120%; }' );

	// Reset whitespace that was set in the peer CSS gadget; this prevents the
	// effect of the p-personal menu jumping to the left when the JavaScript
	// loads.
	$( '.client-js > body.skin-vector #p-personal ul' ).css( 'margin-right', 'initial' );
	$( '.client-js > body.skin-monobook #p-personal ul' ).css( 'margin-right', 'initial' );

	// Add the portlet link.
	var node = mw.util.addPortletLink(
		'p-personal',
		mw.util.getUrl( null, { action: 'purge' } ),
		'',
		'utcdate'
	);
	if ( !node ) {
		return;
	}

	// Purge the page when the clock is clicked. We have to do this through the
	// API, as purge URLs now make people click through a confirmation screen.
	$( node ).on( 'click', function ( e ) {
		new mw.Api().post( { action: 'purge', titles: mw.config.get( 'wgPageName' ) } ).then( function () {
			location.reload();
		}, function () {
			mw.notify( 'Purge failed', { type: 'error' } );
		} );
		e.preventDefault();
	} );

	// Show the clock.
	showTime( $( node ).find( 'a:first' ) );
}

$( liveClock );
} );