User:Dragoniez/MediaWiki:Gadget-UTCLiveClock.js

/** * Warning! Global gadget file! * * This gadget adds a clock in the personal toolbar that shows the current time * in UTC (or a different timezone of your choosing), and also provides a link * to purge the current page. * * Revision: May 2023 * Source: https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock.js * * Installation: * * 1. Copy the JS page at https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock.js * to the page MediaWiki:Gadget-UTCLiveClock.js on your wiki. * * 2. Copy the CSS page at https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock.css * to the page MediaWiki:Gadget-UTCLiveClock.css on your wiki. * * 3. Copy the CSS page at https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock-pagestyles.css * to the page MediaWiki:Gadget-UTCLiveClock-pagestyles.css on your wiki. * * 4. Add a description of the gadget to the page MediaWiki:Gadget-UTCLiveClock * on your wiki. You can use https://www.mediawiki.org/wiki/MediaWiki:Gadget-UTCLiveClock * as a template. * * 5. Add the following code to your wiki's MediaWiki:Gadgets-definition: * *     * UTCLiveClock[ResourceLoader|type=general|dependencies=mediawiki.util,mediawiki.api|peers=UTCLiveClock-pagestyles]|UTCLiveClock.js|UTCLiveClock.css *    * UTCLiveClock-pagestyles[hidden|skins=vector,monobook]|UTCLiveClock-pagestyles.css * *  * To set the timezone used to one other than UTC, set window.LiveClockTimeZone to * the desired timezone. For example, adding the following to your common.js *     window.LiveClockTimeZone = 'America/Los_Angeles'; * would result in the local time in Los Angeles being shown. See * w:List of tz database time zones for valid options (use the TZ database name). */ /*global mw, $ */ mw.loader.using( ['mediawiki.util', 'mediawiki.api'] ).then( function {

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

var showTime = function( $target ) { var now = new Date; var timezone = window.LiveClockTimeZone || 'UTC';

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

var liveClock = function { // 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(		'.utcliveclock a { font-weight:bolder; }' +		'#utcdate a { 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' );

var clockLocation = document.getElementById( 'p-vector-user-menu-overflow' ) ? 'p-vector-user-menu-overflow' : 'p-personal'; addLiveClockInstance( clockLocation, 'utcdate' );

// In Vector 2022, add another clock in the sticky header var stickyClockLocation = document.querySelector( '.vector-sticky-header-icon-end' ) || 'p-personal-sticky-header'; addLiveClockInstance( stickyClockLocation, 'utcdate-sticky' ); };

var addLiveClockInstance = function( clockLocation, wrapperId ) { // Add a clock. var node; if ( typeof clockLocation === 'string' ) { node = mw.util.addPortletLink(           clockLocation,            mw.util.getUrl( null, { action: 'purge' } ),            '',            wrapperId        ); } else if ( typeof clockLocation === 'object' ) { // clockLocation is a DOM element - for the sticky header of vector-2022 node = document.createElement( 'div' ); node.id = wrapperId; clockLocation.parentElement.insertBefore( node, clockLocation ); var a = document.createElement( 'a' ); a.href = mw.util.getUrl( null, { action: 'purge' } ); node.appendChild( a ); }    if ( !node ) { return; }	node.classList.add( 'utcliveclock' );

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

} );