User:Nardog/dark-mode-toggle.js: Difference between revisions

Revision as of 14:04, 5 November 2022

Latest revision as of 09:26, 19 February 2025

(33 intermediate revisions by 2 users not shown)

Line 31:

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

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

}

function vectorStickyCallback() {

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

if (document.getElementById('pt-darkmode-sticky-header')) return;

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

}

Line 37 ⟶ 43:

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

mw.loader.usinghook('skins.vector.es6page_title_scroll').then(function add(vectorStickyCallback) {;

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

});

}

}

function getMsg(suffix) {

var key = 'darkmode-turn-' + (isOn ? 'off' : 'on') + '-' + suffix;

return mw.msg(key);

}

function makePortletLink(portletId, portletLinkId, nextnode) {

var onOrOfflabel = isOn ? 'off' : getMsg('onlabel');

var labeltooltip = mw.msggetMsg('darkmode-turn-' + onOrOff + '-labeltooltip');

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

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

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

e.preventDefault();

toggleMode();

Line 55 ⟶ 63:

function togglePortlets() {

var labelSelector;

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

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

case 'vector':

// Toggle portlet link label and tooltip

case 'vector-2022':

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';

case 'minerva':

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

$( labelSelector = '#pt-darkmode aspan:not(:empty), #pt-darkmode-sticky-header a'span:not(:empty).attr('title', mw.msg('darkmode-turn-' + onOrOff + '-tooltip'));

break;

default:

labelSelector = '#pt-darkmode a';

}

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

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

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

}

Line 69 ⟶ 84:

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

if ($gadgetsLink.length) {

var uriurl = new mw.UriURL($gadgetsLink.prop('href'));

var modules = url.searchParams.get('modules');

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

}

url.searchParams.set('modules', modules);

$gadgetsLink.prop('href', uriurl.getRelativePath()pathname + url.search);

} else {

// No gadget-containing styles are enabled

Line 137 ⟶ 154:

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

setHtmlClass();

setThemeColor();

$(addPortlets();

// Recover state if the navigation was too quick