Majestix: 1 revision imported: Initial Setup

2026-04-09T08:49:44Z

1 revision imported: Initial Setup

← Older revision		Revision as of 10:49, 9 April 2026
(No difference)

en>Pppery: Add ampm per request on talk

2025-12-26T05:53:13Z

Add ampm per request on talk

New page

/**
* 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.
*
* 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,user|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).
*
* If you find a seconds counter distracting, set:
* window.LiveClockHideSeconds = true;
* To display the clock in AM/PM format set:
* window.LiveClockAMPM = true;
*
*/
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;
var ampm = window.LiveClockAMPM || 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;
if ( ampm ) {
const suffix = hh >= 12 ? 'PM' : 'AM';
const hour12 = hh % 12 || 12; // Convert 0 to 12 for midnight

if ( hideSeconds ) {
time = `${hour12}:${ padWithZeroes( mm )} ${suffix}`;
} else {
time = `${hour12}:${ padWithZeroes( mm )}:${ padWithZeroes( ss )} ${suffix}`;
}
} else if ( hideSeconds ) {
time = `${hh}:${ padWithZeroes( mm )}`;
} else {
time = `${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' );

// We are experimenting with different locations for this in Vector 2022 based on feedback
// so currently this is limited to MediaWiki.org
var location = window.UTCLiveClockLocation || 'inside';
var showOutsideDropdown = location === 'outside';
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, { 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({userAgent: 'Gadget-UTCLiveClock/2025'}).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 );
} );

MediaWiki:Gadget-UTCLiveClock.js - Revision history

Majestix: 1 revision imported: Initial Setup

en>Pppery: Add ampm per request on talk