|
|
| Line 1: |
Line 1: |
| /* All JavaScript here will be loaded for users of the mobile site */ | | /* Make the Minerva/logo area link to the Main Page on small screens */ |
| // Make the Minerva/logo area link to the Main Page on small screens
| |
| mw.hook('wikipage.content').add(function () { | | mw.hook('wikipage.content').add(function () { |
| if (window.innerWidth <= 800 && !document.querySelector('.minerva-logo-link')) { | | if (window.innerWidth <= 800 && !document.querySelector('.minerva-logo-link')) { |
| Line 13: |
Line 12: |
| } | | } |
| } | | } |
| });
| |
| // Lightweight custom mobile hamburger + overlay menu
| |
| mw.hook('wikipage.content').add(function () {
| |
| if (window.innerWidth > 800) return;
| |
|
| |
| if (document.querySelector('.custom-mobile-hamburger')) return;
| |
|
| |
| // Create hamburger button
| |
| var btn = document.createElement('button');
| |
| btn.className = 'custom-mobile-hamburger';
| |
| btn.setAttribute('aria-label', 'Open menu');
| |
| btn.innerHTML = '☰'; // hamburger glyph
| |
|
| |
| // Insert into header (try a few selectors)
| |
| var header = document.querySelector('.minerva-header') || document.querySelector('#mw-head') || document.body;
| |
| header.insertBefore(btn, header.firstChild);
| |
|
| |
| // Create overlay
| |
| var overlay = document.createElement('div');
| |
| overlay.className = 'custom-mobile-overlay';
| |
| var panel = document.createElement('nav');
| |
| panel.className = 'custom-mobile-panel';
| |
| overlay.appendChild(panel);
| |
|
| |
| // Close control
| |
| var close = document.createElement('div');
| |
| close.className = 'custom-mobile-close';
| |
| close.innerHTML = '<a href="#" aria-label="Close menu">✕</a>';
| |
| panel.appendChild(close);
| |
|
| |
| // Menu links — mirror your MediaWiki:Mobile-menu entries
| |
| var links = [
| |
| { href: mw.util.getUrl('Main_Page'), label: 'Home' },
| |
| { href: mw.util.getUrl('Special:Search'), label: 'Search' },
| |
| { href: mw.util.getUrl('Recentchanges'), label: 'Recent changes' },
| |
| { href: mw.util.getUrl('Special:Random'), label: 'Random page' },
| |
| { href: mw.util.getUrl('Special:AllPages'), label: 'All pages' },
| |
| { href: mw.util.getUrl('Special:Categories'), label: 'Categories' },
| |
| { href: mw.util.getUrl('Special:Upload'), label: 'Upload file' }
| |
| ];
| |
|
| |
| links.forEach(function (lnk) {
| |
| var a = document.createElement('a');
| |
| a.href = lnk.href;
| |
| a.textContent = lnk.label;
| |
| panel.appendChild(a);
| |
| });
| |
|
| |
| document.body.appendChild(overlay);
| |
|
| |
| function openMenu() {
| |
| overlay.style.display = 'flex';
| |
| document.body.style.overflow = 'hidden';
| |
| btn.setAttribute('aria-expanded', 'true');
| |
| }
| |
| function closeMenu() {
| |
| overlay.style.display = 'none';
| |
| document.body.style.overflow = '';
| |
| btn.setAttribute('aria-expanded', 'false');
| |
| }
| |
|
| |
| btn.addEventListener('click', function (e) {
| |
| e.preventDefault();
| |
| openMenu();
| |
| });
| |
|
| |
| overlay.addEventListener('click', function (e) {
| |
| if (e.target === overlay) closeMenu();
| |
| });
| |
|
| |
| close.addEventListener('click', function (e) {
| |
| e.preventDefault();
| |
| closeMenu();
| |
| });
| |
| }); | | }); |