MediaWiki:Timeless.js: Difference between revisions

Revision as of 07:48, 7 November 2025

/* MegaMenu Vortan – limpo e com whitelist (Timeless) */
mw.loader.using('jquery').then(function () {
  if (window.VORTAN_MM) return; window.VORTAN_MM = 1;

  var NAV = '#site-navigation .sidebar-inner';

  // Só estes portlets viram mega-menu. Ajuste se quiser (IDs dos divs .mw-portlet)
  var MEGA_IDS = [
    'p-Sobre_VortanMU','p-Classes','p-Mapas','p-Items','p-NPCs',
    'p-Eventos','p-Mini-Eventos','p-Quests','p-Chaos_Machine','p-Guias','p-Outros'
  ];
  // O que NÃO está nessa lista (ex.: p-navigation, p-tb/Wiki tools) fica como está.

  function isMega($portlet){
    var id = $portlet.attr('id') || '';
    return MEGA_IDS.indexOf(id) !== -1;
  }
  function colCount(n){ return n>20?4:n>12?3:n>6?2:1; }

  function build(){
    var $nav = $(NAV); if (!$nav.length) return;

    // limpar execuções anteriores
    $nav.find('h3.has-mega').removeClass('has-mega active');
    $nav.find('ul.mm-submenu').remove();
    $(document).off('.vmm'); $(window).off('.vmm');

    // largura do botão padrão da sidebar (para o submenu copiar)
    var $refBtn = $nav.find('li > a').first();
    var btnW = $refBtn.outerWidth(); // inclui padding
    var gap  = 12; // mesmo “ritmo” da sidebar

    $nav.find('.mw-portlet').each(function(){
      var $p = $(this);
      if (!isMega($p)) return;

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

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

      var n = $links.length;
      var cols = colCount(n);

      // painel com grid e variáveis inline para casar com a sidebar
      var $panel = $('<ul/>', { 'class':'mm-submenu mm-'+cols })
        .css({'--mm-col-w': btnW+'px','--cols': cols, '--mm-gap': gap+'px'})
        .appendTo($p);

      $links.each(function(){
        $('<li class="mm-item"/>')
          .append($(this).clone().addClass('mm-link'))
          .appendTo($panel);
      });

      $h3.addClass('has-mega');
      $ul.hide();
      $panel.hide();

      function position(){
        var left = $nav.outerWidth() + 12;
        var top  = $h3.position().top - 6;
        $panel.css({ left:left, top:top });
      }
      function open(){
        $nav.find('h3.has-mega').not($h3).removeClass('active');
        $nav.find('ul.mm-submenu').not($panel).hide();
        $h3.addClass('active'); position(); $panel.stop(true,true).fadeIn(90);
      }
      function close(){ $h3.removeClass('active'); $panel.stop(true,true).fadeOut(90); }

      var timer=null;
      $h3.on('mouseenter.vmm', function(){ if (window.innerWidth>=851) open(); })
         .on('mouseleave.vmm', function(){
            if (window.innerWidth>=851){
              timer=setTimeout(function(){ if(!$panel.is(':hover') && !$h3.is(':hover')) close(); },120);
            }
         })
         .on('click.vmm', function(e){
            if (window.innerWidth<851){ e.preventDefault(); $panel.toggle(); position(); }
         });

      $panel.on('mouseenter.vmm', function(){ clearTimeout(timer); if (window.innerWidth>=851) open(); })
            .on('mouseleave.vmm', function(){
              if (window.innerWidth>=851){
                timer=setTimeout(function(){ if(!$h3.is(':hover')) close(); },120);
              }
            });

      $(window).on('resize.vmm scroll.vmm', position);
    });

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

  mw.hook('wikipage.content').add(build);
  $(build);
});