MediaWiki:Common.js: Difference between revisions

From OtherX
Jump to navigation Jump to search
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Restrict zooming out beyond the initial page size on mobile */
// Dark mode toggle
var initialScale = 1;
function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle('dark-mode');


document.addEventListener('wheel', function(e) {
    // Save user preference in localStorage
     if (e.deltaY < 0 && window.innerWidth <= window.screen.width) {
    const isDarkMode = body.classList.contains('dark-mode');
        /* Zoom in */
    localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
        initialScale *= 1.1;
}
     } else if (e.deltaY > 0 && window.innerWidth <= window.screen.width && initialScale > 1) {
 
         /* Zoom out */
// Check user preference on page load
        initialScale /= 1.1;
document.addEventListener('DOMContentLoaded', () => {
     const isDarkMode = localStorage.getItem('darkMode') === 'true';
    const body = document.body;
 
     if (isDarkMode) {
         body.classList.add('dark-mode');
     }
     }


     updateViewport();
     // Add dark mode toggle to personal tools menu
});
    const personalTools = document.getElementById('p-personal');
    if (personalTools) {
        const darkModeToggle = document.createElement('li');
        darkModeToggle.id = 'pt-darkmode';
        darkModeToggle.className = 'mw-list-item';
        darkModeToggle.innerHTML = '<a href="javascript:void(0);" onclick="toggleDarkMode();"><span>Dark mode</span></a>';


function updateViewport() {
        personalTools.querySelector('.vector-menu-content-list').appendChild(darkModeToggle);
    var viewport = document.querySelector("meta[name=viewport]");
    if (viewport) {
        viewport.content = "width=device-width, initial-scale=" + initialScale + ", maximum-scale=1, user-scalable=yes";
     }
     }
}
});

Latest revision as of 21:25, 24 December 2023

// Dark mode toggle
function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle('dark-mode');

    // Save user preference in localStorage
    const isDarkMode = body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
}

// Check user preference on page load
document.addEventListener('DOMContentLoaded', () => {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    const body = document.body;

    if (isDarkMode) {
        body.classList.add('dark-mode');
    }

    // Add dark mode toggle to personal tools menu
    const personalTools = document.getElementById('p-personal');
    if (personalTools) {
        const darkModeToggle = document.createElement('li');
        darkModeToggle.id = 'pt-darkmode';
        darkModeToggle.className = 'mw-list-item';
        darkModeToggle.innerHTML = '<a href="javascript:void(0);" onclick="toggleDarkMode();"><span>Dark mode</span></a>';

        personalTools.querySelector('.vector-menu-content-list').appendChild(darkModeToggle);
    }
});