MediaWiki:Gadget-dark-mode-toggle.js: Difference between revisions

Revision as of 03:15, 4 November 2022

Revision as of 14:19, 26 January 2023

Line 17:

}

var isOn = mw.loader.getState('ext.gadget.dark-mode') === 'ready';

$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage', 'es6-polyfills'])).then(function () {

var isOn = mw.loader.getState('ext.gadget.dark-mode') === 'ready';

var broadcastChannel = new BroadcastChannel('gadget-dark-mode');

if (isOn) {

// CSS class for externally styling elements in dark mode via TemplateStyles (or CSS from other gadgets or common.css)

function setThemeColor() {

// A brief flash of the original styles will occur, so this is only suitable for style changes for which flashes are tolerable.

// Update the theme-color used by some browsers for coloration of the tab headers and surrounding UI

// For others, update Gadget-dark-mode.css directly which is loaded without FOUCs

$('meta[name="theme-color"]').attr('content', isOn ? '#000000' : '#eaecf0');

document.documentElement.classList.add('client-dark-mode');

}

// Update the initial mobile theme-color

function setHtmlClass() {

$('meta[name="theme-color"]').attr('content', '#000000');

// CSS class for externally styling elements in dark mode via TemplateStyles (or CSS from other gadgets or common.css)

// A brief flash of the original styles will occur, so this is only suitable for style changes for which flashes are tolerable.

// For others, update Gadget-dark-mode.css directly which is loaded without FOUCs

$(document.documentElement).toggleClass('client-dark-mode', isOn);

}

function vectorStickyCallback() {

makePortletLink('p-personal-sticky-header', 'pt-darkmode-sticky-header', '#pt-watchlist-sticky-header');

// Work around lack of icon in sticky header

$('#pt-darkmode-sticky-header span:only-child')

.before($('<span>').addClass('mw-ui-icon mw-ui-icon-vector-gadget-pt-darkmode'));

mw.hook('vector.page_title_scroll').remove(vectorStickyCallback);

}

function addPortlets() {

makePortletLink('p-personal', 'pt-darkmode', '#pt-watchlist');

if (mw.config.get('skin') === 'vector-2022') {

mw.hook('vector.page_title_scroll').add(vectorStickyCallback);

}

}

function getMsg(suffix) {

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

var labelkey = mw.msg('darkmode-turn-' + onOrOff(isOn ? 'on' : 'off') + '-label') + suffix;

return mw.msg(key);

var tooltip = mw.msg('darkmode-turn-' + onOrOff + '-tooltip');

}

var nextnode = mw.config.get('skin') !== 'minerva' && '#pt-watchlist';

var broadcastChannel = new BroadcastChannel('gadget-dark-mode');

mw.util.addPortletLink('p-personal', '#', label, 'pt-darkmode', tooltip, '', nextnode);

mw.util.addPortletLink('p-personal-sticky-header', '#', label, 'pt-darkmode-sticky-header', tooltip, '', nextnode + '-sticky-header');

function toggleModemakePortletLink(offlineportletId, portletLinkId, nextnode) {

var label = getMsg('label');

isOn = !isOn;

var newStatetooltip = NumbergetMsg(isOn'tooltip');

$(mw.util.addPortletLink(portletId, '#', label, portletLinkId, tooltip, '', nextnode))

if (!offline) {

.children().on('click', function (e) {

new mw.Api().saveOption('gadget-dark-mode', newState);

e.preventDefault();

toggleMode();

});

}

function togglePortlets() {

// Broadcast state change to other tabs

var labelSelector;

broadcastChannel.postMessage(isOn);

switch (mw.config.get('skin')) {

case 'vector':

case 'vector-2022':

case 'minerva':

labelSelector = '#pt-darkmode span:not(.mw-ui-icon), #pt-darkmode-sticky-header span:not(.mw-ui-icon)';

break;

default:

labelSelector = '#pt-darkmode a';

}

$(labelSelector).text(getMsg('label'));

$('#pt-darkmode a, #pt-darkmode-sticky-header a')

.attr('title', getMsg('tooltip'));

}

function actuallyToggleDarkMode() {

// 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 scriptPath = mw.util.wikiScript('load');

var $gadgetsLink = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]');

if ($gadgetsLink.length) {

var uri = new mw.Uri($gadgetsLink.prop('href'));

if (isOn) {

uri.query.modules += ',dark-mode';

} else {

if (uri.query.modules === 'ext.gadget.dark-mode') {

// dark-mode is the only module in this link

$gadgetsLink.remove();

return;

}

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

}

$gadgetsLink.prop('href', uri.getRelativePath());

} else {

$(document.documentElement).toggleClass('client-dark-mode', isOn);

// No gadget-containing styles are enabled

$('<link>').attr({

rel: 'stylesheet',

href: scriptPath + '?lang=' + mw.config.get('wgUserLanguage') +

'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')

}).appendTo(document.head);

}

}

function savePreference() {

// In case the user navigates to another page too quickly

new mw.storage.sessionApi().setsaveOption('gadget-dark-mode-toggled', newStateisOn ? '1' : '0');

}

function savePreferenceLocally() {

var onOrOff = ['on', 'off'][newState];

mw.user.options.set('gadget-dark-mode', Number(isOn));

// In case the user navigates to another page too quickly

// Toggle portlet link label and tooltip

mw.storage.session.set('dark-mode-toggled', isOn ? '1' : '0');

var labelSelector = ['vector', 'vector-2022', 'minerva'].includes(mw.config.get('skin')) ? '#pt-darkmode span:not(.mw-ui-icon), #pt-darkmode-sticky-header span:not(.mw-ui-icon)' : '#pt-darkmode a';

}

$(labelSelector).text(mw.msg('darkmode-turn-' + onOrOff + '-label'));

$('#pt-darkmode a, #pt-darkmode-sticky-header a').attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));

// Update the mobile theme-color

$('meta[name="theme-color"]').attr('content', isOn ? '#000000' : '#eaecf0');

function notifyOtherTabs() {

// Modify the <link> element on the page to include/exclude dark-mode styles

// Broadcast state change to other tabs

// We can't use mw.loader as it doesn't work both ways (see talk page)

broadcastChannel.postMessage(isOn);

var scriptPath = mw.util.wikiScript('load');

}

var $gadgetsLink = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]');

if ($gadgetsLink.length) {

function toggleMode(offline) {

var uri = new mw.Uri($gadgetsLink.prop('href'));

if ( isOn) {= !isOn;

if (!offline) {

uri.query.modules += ',dark-mode';

savePreference();

} else {

notifyOtherTabs();

if (uri.query.modules === 'ext.gadget.dark-mode') {

}

// dark-mode is the only module in this link

setHtmlClass();

$gadgetsLink.remove();

setThemeColor();

return;

savePreferenceLocally();

}

togglePortlets();

uri.query.modules = uri.query.modules

actuallyToggleDarkMode();

.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

}

function toggleBasedOnSystemColourScheme() {

$gadgetsLink.prop('href', uri.getRelativePath());

var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches;

} else {

var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') === '1';

// No gadget-containing styles are enabled

$('<link>').attr({

if (systemSchemeNow !== systemSchemeLast) {

rel: 'stylesheet',

if (systemSchemeNow !== isOn) {

href: scriptPath + '?lang=' + mw.config.get('wgUserLanguage') +

toggleMode();

'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')

}).appendTo(document.head);

}

mw.requestIdleCallback(function () {

mw.storage.set('dark-mode-system-scheme', systemSchemeNow ? '1' : '0');

});

}

}

$('#pt-darkmode, #pt-darkmode-sticky-header').on('click', function (e) {

$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage'])).then(function () {

e.preventDefault();

setHtmlClass();

toggleMode();

setThemeColor();

});

addPortlets();

// Recover state if the navigation was too quick

Line 103 ⟶ 168:

// Listen to dark mode state change made on other tabs

broadcastChannel.onmessage = function (msg) {

if (msg.data !== isOn) {

Line 109 ⟶ 173:

}

};

if (window.wpDarkModeAutoToggle) {

var toggleBasedOnSystemColourScheme = function () {

var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches;

var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') === '1';

if (systemSchemeNow !== systemSchemeLast) {

if (systemSchemeNow !== isOn) {

toggleMode();

}

mw.requestIdleCallback(function () {

mw.storage.set('dark-mode-system-scheme', Number(systemSchemeNow));

});

}

};

toggleBasedOnSystemColourScheme();