MediaWiki:Common.js: Difference between revisions

From OtherX
Jump to navigation Jump to search
No edit summary
No edit summary
 
(4 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() {
var pinchStartDistance;
    const body = document.body;
    body.classList.toggle('dark-mode');


document.addEventListener('gesturestart', function(e) {
    // Save user preference in localStorage
     pinchStartDistance = getPinchDistance(e);
    const isDarkMode = body.classList.contains('dark-mode');
});
     localStorage.setItem('darkMode', isDarkMode ? 'true' : 'false');
}


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


     if (pinchDistance > pinchStartDistance) {
     if (isDarkMode) {
         /* Zoom in */
         body.classList.add('dark-mode');
        initialScale *= 1.1;
    } else if (pinchDistance < pinchStartDistance && initialScale > 1) {
        /* Zoom out */
        initialScale /= 1.1;
     }
     }


     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 getPinchDistance(e) {
        personalTools.querySelector('.vector-menu-content-list').appendChild(darkModeToggle);
    return Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
}
 
function updateViewport() {
    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);
    }
});