MediaWiki:Gadget-utcclock.css: Difference between revisions

From EverVoid Wiki
Jump to navigation Jump to search
(New updated for 1.39.6)
Tag: Reverted
(Revert i didn't do it right)
Tag: Manual revert
 
Line 1: Line 1:
/**
/**
  * Adapted from https://www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-UTCLiveClock.js
  * Explicitly set width of the UTC-clock list element, so that we can use a
* hidden peer gadget to add space where the clock would go before it loads.
  */
  */
 
.skin-vector #utcdate {
mw.loader.using( ['mediawiki.util', 'mediawiki.api', 'ext.gadget.skinTogglesNew'] ).then( function () {
width: 50px;
 
/*
function padWithZeroes( num ) {
* The default margin-left is 0.75em, but set it again here explicitly, so
// Pad a number with zeroes. The number must be an integer where
* we can be sure of the exact width.
// 0 <= num < 100.
*/  
return num < 10 ? '0' + num.toString() : num.toString();
margin-left: 0.75em;
}
text-align: center;
 
function showTime( $target ) {
var now = new Date();
 
// Set the time.
var hh = now.getUTCHours();
var mm = now.getUTCMinutes();
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: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' );
//if (mw.config.get('wgUserName') == null) {  // user is not logged in
// prependElement = '#pt-anonuserpage'
//} else {
// prependElement = '#pt-userpage'
//}
prependElement = '#pt-skin-toggles';
// Add the portlet link.
var node = mw.util.addPortletLink(
'p-personal',
mw.util.getUrl( 'Clock (interface)' ),
'',
'utcdate',
'The current in-game time',
'',
prependElement
);
if ( !node ) {
return;
}
/*
/*
// Purge the page when the clock is clicked. We have to do this through the
* Account for the larger font size adding 0.1em to height unless padding-top is adjusted by the same amount.
// API, as purge URLs now make people click through a confirmation screen.
*/
$( node ).on( 'click', function ( e ) {
padding-top: 0.4em;
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 );
} );

Latest revision as of 12:13, 28 December 2023

/**
 * Explicitly set width of the UTC-clock list element, so that we can use a
 * hidden peer gadget to add space where the clock would go before it loads.
 */
.skin-vector #utcdate {
	width: 50px;
	/* 
	 * The default margin-left is 0.75em, but set it again here explicitly, so
	 * we can be sure of the exact width.
	 */ 
	margin-left: 0.75em;
	text-align: center;
	/*
	 * Account for the larger font size adding 0.1em to height unless padding-top is adjusted by the same amount.
	 */
	padding-top: 0.4em;
}
Retrieved from "https://wiki.evervoid.us/index.php?title=MediaWiki:Gadget-utcclock.css&oldid=29112"