User:Slo44/common.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.

/**
 * Enables or disables the dark-mode gadget.
 *
 * Authors: [[User:SD0001]], [[User:Nardog]]
 */

mw.messages.set({
	'darkmode-turn-on-label': 'Dark mode',
	'darkmode-turn-on-tooltip': 'Turn on dark mode',
	'darkmode-turn-off-label': 'Light mode',
	'darkmode-turn-off-tooltip': 'Turn off dark mode',
});

$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage'])).then(function() {
	var inDarkMode = !!mw.user.options.get('gadget-dark-mode');

	var onOrOff = inDarkMode ? 'off' : 'on';
	var label = mw.msg('darkmode-turn-' + onOrOff + '-label');
	var tooltip = mw.msg('darkmode-turn-' + onOrOff + '-tooltip');
	var portlet = mw.config.get('skin') === 'minerva' ? 'pt-preferences' : 'p-cactions';
	mw.util.addPortletLink(portlet, '#', label, 'pt-darkmode', tooltip);

	function toggleMode() {
		var darkMode = !mw.user.options.get('gadget-dark-mode');
		new mw.Api().saveOption('gadget-dark-mode', darkMode ? '1' : '0');
		mw.user.options.set('gadget-dark-mode', darkMode ? 1 : 0);

		var onOrOff = darkMode ? 'off' : 'on';

		// Toggle portlet link label and tooltip
		var labelSelector = ['vector', 'minerva'].includes(mw.config.get('skin')) ? '#pt-darkmode span' : '#pt-darkmode a';
		$(labelSelector).text(mw.msg('darkmode-turn-' + onOrOff + '-label'));
		$('#pt-darkmode a').attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));

		// Modify the <link> element on the page to include/exclude dark-mode styles
		// We can't use mw.loader as it doesn't work both ways (see talk page)
		var gadgetsLinkElement = $('link[rel="stylesheet"][href*="ext.gadget."]').get(0);
		if (gadgetsLinkElement) {
			var uri = new mw.Uri(gadgetsLinkElement.href);
			if (darkMode) {
				uri.query.modules += ',dark-mode';
			} else {
				uri.query.modules = uri.query.modules
					.replace('ext.gadget.dark-mode', 'ext.gadget.') // dark-mode is first in the gadget list
					.replace(/,dark-mode(,|$)/, '$1'); // dark-mode is in middle or end of the list
			}
			gadgetsLinkElement.href = uri.getRelativePath();
		} else {
			// No gadgets containing styles are enabled
			$('<link>').attr('rel', 'stylesheet')
				.attr('href', '/w/load.php?lang=' + mw.config.get('wgUserLanguage') +
					'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')).appendTo('head');
		}
	}

	$('#pt-darkmode').on('click', function(e) {
		e.preventDefault();
		toggleMode();
	});

	if (window.wpDarkModeAutoToggle) {
		var toggleBasedOnSystemColourScheme = function () {
			var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
			var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') || 'light';

			var wpSchemeNow = mw.user.options.get('gadget-dark-mode') ? 'dark' : 'light';

			if (systemSchemeNow !== systemSchemeLast && systemSchemeNow !== wpSchemeNow) {
				toggleMode();
			}
			mw.storage.set('dark-mode-system-scheme', systemSchemeNow);
		};

		toggleBasedOnSystemColourScheme();

		// If system colour scheme changes while user is viewing, toggle immediately
		var mediaQuery = matchMedia('(prefers-color-scheme: dark)');
		if (mediaQuery.addEventListener) {
			mediaQuery.addEventListener('change', toggleBasedOnSystemColourScheme);
		} else if (mediaQuery.addListener) { // Safari 13 and older
			mediaQuery.addListener(toggleBasedOnSystemColourScheme);
		}
	}

});

/* scrolls to the top of the page whenever the escape key is pressed. */
/* by User:Slo44 */
document.addEventListener("keydown", (event) => {
	if (event.key.toLowerCase() == "escape") {
		window.scrollTo(0, 0);	
	}
})