MediaWiki:Timeless.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.

/* ==============================
   VortanMU - Mega flyout (hover + colunas)
   Cole no FINAL do MediaWiki:Timeless.js
   ============================== */
(function () {
  function onReady(fn) {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", fn);
    } else {
      fn();
    }
  }

  function clamp(n, min, max) {
    return Math.max(min, Math.min(max, n));
  }

  function calcColumns(portletId, itemCount) {
    // Regra principal: ~6 itens por coluna
    // Mapas é exceção: aceita mais por coluna pra não virar 5+ colunas
    var perCol = 6;
    if (portletId === "p-Mapas") perCol = 10;

    var cols = Math.ceil(itemCount / perCol);
    return clamp(cols, 1, 4);
  }

  onReady(function () {
    var nav = document.getElementById("site-navigation");
    if (!nav) return;

    var portlets = nav.querySelectorAll(".mw-portlet");
    portlets.forEach(function (portlet) {
      var h3 = portlet.querySelector("h3");
      var body = portlet.querySelector(".mw-portlet-body");
      if (!h3 || !body) return;

      var ul = body.querySelector("ul");
      if (!ul) return;

      var lis = Array.from(ul.querySelectorAll("li"));
      if (!lis.length) return;

      // Marca como “mega”
      h3.classList.add("has-mega");

      // Cria o submenu (se ainda não existe)
      var submenu = portlet.querySelector("ul.submenu");
      if (!submenu) {
        submenu = document.createElement("ul");
        submenu.className = "submenu";
        portlet.appendChild(submenu);
      }

      // Reconstrói os itens do flyout (mantém sempre consistente)
      submenu.innerHTML = "";
      lis.forEach(function (li) {
        var a = li.querySelector("a");
        if (!a) return;
        var li2 = document.createElement("li");
        li2.appendChild(a.cloneNode(true));
        submenu.appendChild(li2);
      });

      // Define quantidade de colunas por regra
      var count = submenu.querySelectorAll("li").length;
      var cols = calcColumns(portlet.id || "", count);

      submenu.classList.remove(
        "submenu-1-columns",
        "submenu-2-columns",
        "submenu-3-columns",
        "submenu-4-columns"
      );
      submenu.classList.add("submenu-" + cols + "-columns");

      // Esconde UL original (menu vira “botão” + flyout)
      ul.style.display = "none";
      body.style.display = "none";

      // Hover abre/fecha com pequeno delay (pra dar tempo de mover o mouse)
      var hideTimer = null;

      function show() {
        if (hideTimer) clearTimeout(hideTimer);
        submenu.style.display = "grid";
      }

      function hide() {
        hideTimer = setTimeout(function () {
          submenu.style.display = "none";
        }, 140);
      }

      // Hover desktop
      h3.addEventListener("mouseenter", show);
      portlet.addEventListener("mouseenter", show);
      portlet.addEventListener("mouseleave", hide);
      submenu.addEventListener("mouseenter", show);
      submenu.addEventListener("mouseleave", hide);

      // Clique (fallback)
      h3.addEventListener("click", function (e) {
        // em desktop isso não atrapalha, e em touch ajuda
        e.preventDefault();
        var isOpen = submenu.style.display === "grid";
        submenu.style.display = isOpen ? "none" : "grid";
      });
    });
  });
})();