MediaWiki:Vector.js

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5

/* ==========================================================
TENARIUS RO - MENU MOVIL SIDEBAR CORREGIDO
Pegar en MediaWiki:Vector.js

Este JS:
- Detecta celular/tablet.
- Agrega body.tenarius-mobile-mode.
- Crea botón flotante Menu.
- Abre/cierra el sidebar.
========================================================== */
(function () {
    function ready(fn) {
        if (document.readyState !== 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    function isMobileOrTablet() {
        var width = window.innerWidth || document.documentElement.clientWidth || screen.width;
        var coarse = false;

        try {
            coarse = window.matchMedia &&
                (window.matchMedia('(hover: none) and (pointer: coarse)').matches ||
                 window.matchMedia('(max-device-width: 1024px)').matches);
        } catch (e) {}

        return width <= 1024 || coarse;
    }

    ready(function () {
        var panel = document.getElementById('mw-panel');
        if (!panel) {
            return;
        }

        function updateMode() {
            if (isMobileOrTablet()) {
                document.body.classList.add('tenarius-mobile-mode');
            } else {
                document.body.classList.remove('tenarius-mobile-mode');
                document.body.classList.remove('tenarius-sidebar-open');
            }
        }

        updateMode();
        window.addEventListener('resize', updateMode);

        if (document.getElementById('tenarius-mobile-sidebar-button')) {
            return;
        }

        var button = document.createElement('button');
        button.id = 'tenarius-mobile-sidebar-button';
        button.type = 'button';
        button.innerHTML = 'Menu';
        button.setAttribute('aria-label', 'Abrir o cerrar menu de navegacion');
        button.setAttribute('aria-expanded', 'false');

        var overlay = document.createElement('div');
        overlay.id = 'tenarius-mobile-sidebar-overlay';

        function closeMenu() {
            document.body.classList.remove('tenarius-sidebar-open');
            button.setAttribute('aria-expanded', 'false');
            button.innerHTML = 'Menu';
        }

        function openMenu() {
            document.body.classList.add('tenarius-sidebar-open');
            button.setAttribute('aria-expanded', 'true');
            button.innerHTML = 'Cerrar';
        }

        function toggleMenu() {
            if (document.body.classList.contains('tenarius-sidebar-open')) {
                closeMenu();
            } else {
                openMenu();
            }
        }

        button.addEventListener('click', function () {
            updateMode();
            toggleMenu();
        });

        overlay.addEventListener('click', closeMenu);

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                closeMenu();
            }
        });

        panel.addEventListener('click', function (event) {
            var node = event.target;
            while (node && node !== panel) {
                if (node.tagName && node.tagName.toLowerCase() === 'a') {
                    closeMenu();
                    break;
                }
                node = node.parentNode;
            }
        });

        document.body.appendChild(overlay);
        document.body.appendChild(button);
    });
})();