MediaWiki:Mobile.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All JavaScript here will be loaded for users of the mobile site */
mw.hook('wikipage.content').add(function () {

    const toc = document.querySelector('.toc');
    if (!toc) return;

    // Button
    const btn = document.createElement('div');
    btn.id = 'gr-toc-button';
    btn.innerHTML = '☰';

    // Backdrop
    const backdrop = document.createElement('div');
    backdrop.id = 'gr-toc-backdrop';

    // Overlay
    const overlay = document.createElement('div');
    overlay.id = 'gr-toc-overlay';

    overlay.appendChild(toc.cloneNode(true));

    document.body.appendChild(btn);
    document.body.appendChild(backdrop);
    document.body.appendChild(overlay);

    function openTOC() {
        overlay.classList.add('open');
        backdrop.classList.add('open');
    }

    function closeTOC() {
        overlay.classList.remove('open');
        backdrop.classList.remove('open');
    }

    btn.addEventListener('click', openTOC);
    backdrop.addEventListener('click', closeTOC);

    overlay.querySelectorAll('a').forEach(a => {
        a.addEventListener('click', closeTOC);
    });
});