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.
mw.loader.load( '/w/index.php?title=User:Evad37/rater.js&action=raw&ctype=text/javascript' ); // Backlink: [[User:Evad37/rater.js]]

// UTC clock with modifications
mw.loader.using( ['mediawiki.util', 'mediawiki.api', 'user'] ).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();
	
	var timezone = window.LiveClockTimeZone || 'UTC';
	var hideSeconds = window.LiveClockHideSeconds || false;

	// Set the time.
	var hh, mm, ss;
	if ( timezone === "UTC" ) {
		hh = now.getUTCHours();
		mm = now.getUTCMinutes();
		ss = now.getUTCSeconds();
	} else if ( timezone === "local" ) {
		hh = now.getHours();
		mm = now.getMinutes();
		ss = now.getSeconds();
	} else {
		var newNow;
		try {
			newNow = new Date(
				now.toLocaleString(
					"en-US",
					{ timeZone: timezone }
				)
			);
			hh = newNow.getHours();
			mm = newNow.getMinutes();
			ss = newNow.getSeconds();
		} catch ( err ) {
			console.log( "LiveClock - error creating Date object with timezone '" + timezone + "': " + err.name);
			timezone = "UTC";
			newNow = now;
			hh = now.getUTCHours();
			mm = now.getUTCMinutes();
			ss = now.getUTCSeconds();
		}
	}
	
	var time = padWithZeroes( hh ) + ':' + padWithZeroes( mm );
	
	$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:bold; font-size:120%; color:}' );

	// 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' );


	// We are experimenting with different locations for this in Vector 2022 based on feedback
	// so currently this is limited to MediaWiki.org
	var dbName = mw.config.get( 'wgDBname' );
	var showOutsideDropdown = dbName === 'mediawikiwiki' || dbName === 'enwiki';
	var clockLocation = document.getElementById( 'p-vector-user-menu-overflow' ) && showOutsideDropdown ?
		'p-vector-user-menu-overflow' : 'p-personal';
	addLiveClockInstance( clockLocation );
	addLiveClockInstance( 'p-personal-sticky-header' );
}

function addLiveClockInstance( clockLocation ) {
	// Add the portlet link.
	var node = mw.util.addPortletLink(
		clockLocation,
		mw.util.getUrl( null, null ),
		'',
		'utcdate'
	);
	if ( !node ) {
		return;
	}

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

$( liveClock );
} );