User:Daniel Quinlan/Scripts/Clock.js

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.

"use strict";

mw.loader.using(['mediawiki.util'], function() {
	function currentTime(target) {
		const now = new Date();
		const hh = now.getUTCHours().toString().padStart(2, '0');
		const mm = now.getUTCMinutes().toString().padStart(2, '0');
		const delay = 60000 - (1000 * now.getUTCSeconds() + now.getUTCMilliseconds());
		target.textContent = `${hh}:${mm}`;
		setTimeout(() => currentTime(target), delay);
	}

	function getBorderGray(computedStyle) {
		const rgbMatch = computedStyle.backgroundColor.match(/\d+/g);
		if (rgbMatch && rgbMatch.length === 3) {
			const avg = (Number(rgbMatch[0]) + Number(rgbMatch[1]) + Number(rgbMatch[2])) / 3;
			const borderGray = avg > 128 ? Math.max(avg - 32, 0) : Math.min(avg + 32, 255);
			return `rgb(${borderGray}, ${borderGray}, ${borderGray})`;
		}
		return 'rgb(127, 127, 127)';
	}

	function addClock() {
		const clockElement = document.createElement('div');
		clockElement.className = 'utc-clock';
		const computedStyle = window.getComputedStyle(document.body);
		Object.assign(clockElement.style, {
			position: 'fixed',
			bottom: '10px',
			right: '10px',
			zIndex: 1000,
			padding: '3px',
			border: `solid 1px var(--border-color-muted, ${getBorderGray(computedStyle)})`,
			color: `var(--text-color, ${computedStyle.color})`,
			backgroundColor: `var(--background-color-base, ${computedStyle.backgroundColor})`,
			fontSize: 'var(--font-size-medium, 16px)'
		});
		document.body.appendChild(clockElement);
		currentTime(clockElement);
		if (mw.config.get('skin') === 'timeless') {
			Object.assign(clockElement.style, { backgroundColor: 'white', color: 'black' });
		}
		if (window.innerWidth <= 768) {
			Object.assign(clockElement.style, { bottom: '2px', right: '2px', padding: '1px', fontSize: '0.8em' });
		}
	}

	if (mw.config.get('wgAction') === 'view' && [0, 10, 12, 14, 100].includes(mw.config.get('wgNamespaceNumber')) && window.innerWidth <= 768 && !window.location.search) {
		return;
	}
	addClock();
});