MediaWiki:Gadget-utcclock.js

 1 /**
 2  * Adapted from https://www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-UTCLiveClock.js
 3  */
 4 
 5 mw.loader.using( ['mediawiki.util', 'mediawiki.api', 'ext.gadget.skinTogglesNew'] ).then( function () {
 6 
 7 function padWithZeroes( num ) {
 8 	// Pad a number with zeroes. The number must be an integer where
 9 	// 0 <= num < 100.
10 	return num < 10 ? '0' + num.toString() : num.toString(); 
11 }
12 
13 function showTime( $target ) {
14 	var now = new Date();
15 
16 	// Set the time.
17 	var hh = now.getUTCHours();
18 	var mm = now.getUTCMinutes();
19 	var time = padWithZeroes( hh ) + ':' + padWithZeroes( mm );
20 	$target.text( time );
21 
22 	// Schedule the next time change.
23 	// 
24 	// We schedule the change for 100 ms _after_ the next clock tick. The delay
25 	// from setTimeout is not precise, and if we aim exactly for the tick, there
26 	// is a chance that the function will run slightly before it. If this
27 	// happens, we will display the same time for two seconds in a row - not
28 	// good. By scheduling 100 ms after the tick, we will always be about 100 ms
29 	// late, but we are also very likely to display a new time every second.
30 	var ms = now.getUTCMilliseconds();
31 	setTimeout( function () {
32 		showTime( $target );
33 	}, 1100 - ms );
34 }
35 
36 function liveClock() {
37 	// Set CSS styles. We do this here instead of on the CSS page because some
38 	// wikis load this page directly, without loading the accompanying CSS.
39 	mw.util.addCSS( '#utcdate a { font-weight:bolder; font-size:120% !important; }' );
40 
41 	// Reset whitespace that was set in the peer CSS gadget; this prevents the
42 	// effect of the p-personal menu jumping to the left when the JavaScript
43 	// loads.
44 	$( '.client-js > body.skin-vector #p-personal ul' ).css( 'margin-left', 'initial' );
45 	
46 	//if (mw.config.get('wgUserName') == null) {  // user is not logged in
47 	//	prependElement = '#pt-anonuserpage'
48 	//} else {
49 	//	prependElement = '#pt-userpage'
50 	//}
51 	prependElement = '#pt-skin-toggles';
52 	// Add the portlet link.
53 	var node = mw.util.addPortletLink(
54 		'p-personal', // portletId
55 		'#', // href
56 		'', // text
57 		'utcdate', // id
58 		'The current UTC time', // tooltip
59 		'', // accesskey
60 		prependElement // nextnode
61 	);
62 	if ( !node ) {
63 		return;
64 	}
65 	
66 	/*
67 	// Purge the page when the clock is clicked. We have to do this through the
68 	// API, as purge URLs now make people click through a confirmation screen.
69 	$( node ).on( 'click', function ( e ) {
70 		new mw.Api().post( { action: 'purge', titles: mw.config.get( 'wgPageName' ) } ).then( function () {
71 			location.reload();
72 		}, function () {
73 			mw.notify( 'Purge failed', { type: 'error' } );
74 		} );
75 		e.preventDefault();
76 	} );
77 	*/
78 
79 	// Show the clock.
80 	showTime( $( node ).find( 'a:first' ) );
81 }
82 
83 $( liveClock );
84 } );