MediaWiki:Mobile.js: Difference between revisions

/* 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
mw.hook('wikipage.content').add(function () {
  if (window.innerWidth <= 800 && !document.querySelector('.minerva-logo-link')) {
    var logo = document.querySelector('.minerva-logo, .mw-logo, .minerva-header .site-title');
    if (logo && !logo.closest('a')) {
      var a = document.createElement('a');
      a.href = mw.util.getUrl('Main_Page');
      a.className = 'minerva-logo-link';
      a.setAttribute('aria-label', 'Home');
      logo.parentNode.insertBefore(a, logo);
      a.appendChild(logo);
    }
  }
});
// 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 = '&#9776;'; // 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();
  });
});