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.

mw.loader.using(['jquery']).then(function () {
  var NAV = '#site-navigation .sidebar-inner';
  var EXCLUDE = new Set([
    'p-navigation',     // deixa Navigation normal
    'p-tb',             // Page tools (ou Tools)
    'p-variants-desktop',
    'personal'
  ]);

  // limpa restos
  $(NAV).find('h3.mm-ready').removeClass('mm-ready active');
  $(NAV).find('ul.submenu').remove();
  $(document).off('.mm');

  $(NAV).find('.mw-portlet').each(function () {
    var $portlet = $(this);
    var id = $portlet.attr('id');
    if (!id || EXCLUDE.has(id)) return;

    var $h3 = $portlet.children('h3').first();
    var $ul = $portlet.find('> .mw-portlet-body > ul').first();
    if (!$h3.length || !$ul.length) return;

    var $links = $ul.find('> li > a');
    var n = $links.length;
    if (!n) return;

    // cria painel
    var $panel = $('<ul class="submenu" />');
    $links.each(function () { $('<li>').append($(this).clone()).appendTo($panel); });

    // define colunas
    if (n > 20) $panel.addClass('mm-cols-4');
    else if (n > 12) $panel.addClass('mm-cols-3');
    else if (n > 6) $panel.addClass('mm-cols-2');

    $portlet.append($panel);
    $ul.hide();           // esconde lista original
    $h3.addClass('mm-ready');

    function open () {
      $(NAV).find('h3.mm-ready').not($h3).removeClass('active');
      $(NAV).find('ul.submenu').not($panel).hide();
      $h3.addClass('active');

      // alinha pelo topo do h3
      var top = $h3.position().top - 6;
      $panel.css({ top: top }).show();
    }
    function close () { $h3.removeClass('active'); $panel.hide(); }

    // desktop: hover; mobile: click
    $h3.on('mouseenter.mm', function () { if (window.innerWidth >= 851) open(); });
    $h3.on('mouseleave.mm', function () {
      if (window.innerWidth >= 851) setTimeout(function () {
        if (!$panel.is(':hover') && !$h3.is(':hover')) close();
      }, 120);
    });
    $panel.on('mouseleave.mm', function () { if (window.innerWidth >= 851) close(); });
    $h3.on('click.mm', function (e) {
      if (window.innerWidth < 851) { e.preventDefault(); $panel.toggle(); $h3.toggleClass('active'); }
    });
  });

  // fecha clicando fora
  $(document).on('click.mm', function (e) {
    if ($(e.target).closest(NAV).length === 0) {
      $(NAV).find('h3.mm-ready').removeClass('active');
      $(NAV).find('ul.submenu').hide();
    }
  });
});