Anonymous

MediaWiki:Common.js: Difference between revisions

From Melvor Idle

MediaWiki:Common.js (view source)

Revision as of 17:38, 15 December 2022

2,663 bytes added ,  15 December 2022
Rework dark mode implementation, prevents FOUC on page load
m (Reverted edits by Malcs (talk) to last revision by Auron956)
Tag: Rollback
(Rework dark mode implementation, prevents FOUC on page load)
Line 550: Line 550:
}
}


function toggleDarkMode() {
const darkModeSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
document.body.classList.toggle('darkMode');
const darkModeNoticeDismissed = (localStorage.getItem('mi-darkMode-noticeDismissed') === null ? 'false' : localStorage.getItem('mi-darkMode-noticeDismissed')) !== 'false';
localStorage.setItem('darkMode', localStorage.getItem('darkMode') !== 'true');
const darkModeActive = (localStorage.getItem('darkMode') === null ? 'false' : localStorage.getItem('darkMode')) !== 'false';
var darkModeNoticeElem = undefined;
 
function darkModeNoticeVisible(show) {
darkModeNoticeElem.innerHTML = darkModeNoticeHTML();
darkModeNoticeElem.style.display = (show ? 'block' : 'none');
}
 
function darkModeNoticeToggle() {
// If the legacy dark mode flag & the user's scheme preference conflict, then display a notice,
// but only if the user hasn't already acknowledged that notice
const visibility = !darkModeNoticeDismissed && ((darkModeActive && !darkModeSchemeQuery.matches) || (!darkModeActive && darkModeSchemeQuery.matches))
darkModeNoticeVisible(visibility);
}
 
function darkModeNoticeDismiss() {
localStorage.setItem('mi-darkMode-noticeDismissed', 'true');
darkModeNoticeVisible(false);
// Returning false prevents default onclick behaviour
return false;
}
 
function darkModeNoticeHTML() {
const schemeDesiredText = (darkModeActive ? 'dark' : 'light');
return 'Themes on the wiki have changed. To continue using ' + schemeDesiredText + ' mode please change your device or browser theme settings:<br/><a class="external text" href="https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DAndroid&oco=1">Android</a> • <a class="external text" href="https://support.apple.com/en-gb/HT210332">iPhone & iPad</a> • <a class="external text" href="https://support.apple.com/en-gb/HT208976">Mac</a> • <a class="external text" href="https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DDesktop&oco=1">Chrome</a> • <a class="external text" href="https://support.mozilla.org/en-US/kb/change-web-appearance-settings-firefox">Firefox</a> • <a class="external text" href="https://support.microsoft.com/en-gb/microsoft-edge/use-the-dark-theme-in-microsoft-edge-9b74617b-f542-77ed-033b-1a5cfb17a2df">Edge</a><br/><div style="text-align:right"><a href="#" onclick="darkModeNoticeDismiss();">Dismiss this message</a></div>';
}
}


$(document).ready(function () {
$(document).ready(function () {
// Table sticky headers
const elemSticky = document.getElementsByClassName('stickyHeader');
const elemSticky = document.getElementsByClassName('stickyHeader');
if (elemSticky.length > 0) {
if (elemSticky.length > 0) {
Line 577: Line 602:
}
}


const darkMode = localStorage.getItem('darkMode');
// Dark mode
if (darkMode === 'true') {
if (!darkModeNoticeDismissed) {
document.body.classList.add('darkMode');
// Initialize element
} else {
var newDiv = document.createElement('div');
document.body.classList.remove('darkMode');
// TODO - Define new class called noticebox or something
newDiv.classList.toggle('noticebox');
newDiv.style.cssText = 'display:none; max-width:100%; width:100%; text-align:center;';
darkModeNoticeElem = newDiv;
 
const cnElem = document.getElementById('mw-content'); // centralNotice
if (cnElem !== null) {
cnElem.insertBefore(darkModeNoticeElem, cnElem.firstChild);
//cnElem.appendChild(darkModeNoticeElem);
}
 
darkModeNoticeToggle();
if (darkModeSchemeQuery.addEventListener) {
darkModeSchemeQuery.addEventListener('change', darkModeNoticeToggle);
}
}
}
});
});
Line 593: Line 632:
$(dmLinkTools).on('click', function(e) {
$(dmLinkTools).on('click', function(e) {
e.preventDefault();
e.preventDefault();
toggleDarkMode();
darkModeNoticeVisible(true);
});
});
$(dmLinkPersonal).on('click', function(e) {
$(dmLinkPersonal).on('click', function(e) {
e.preventDefault();
e.preventDefault();
toggleDarkMode();
darkModeNoticeVisible(true);
});
});
} );
});
Retrieved from "https://wiki.melvoridle.com/w/Special:MobileDiff/60084"