MediaWiki:Timeless.js: Difference between revisions

Revision as of 09:43, 7 November 2025

/* ===== Mega-menu LITE — Timeless ===== */
mw.loader.using(['jquery']).then(function () {
  try {
    if (window.__megaMenuLite) return;
    window.__megaMenuLite = true;

    var NAV_SEL = '#site-navigation .sidebar-inner';
    var isDesktop = function () { return window.innerWidth >= 851; };

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

      // limpeza de execuções antigas e lixos que possam ter sobrado
      $nav.find('.mw-portlet').each(function () {
        var $p = $(this);
        var $ulOrig = $p.find('> .mw-portlet-body > ul, > ul').first();

        $p.removeClass('has-mega active has-submenu').off('.megamenu');
        // remove ULs clonados que possam ter sido anexados direto no portlet
        $p.children('ul.submenu').remove();

        // restaura o UL original
        if ($ulOrig.length) {
          $ulOrig.show()
            .removeClass('submenu submenu-2-columns submenu-3-columns submenu-4-columns')
            .off('.megamenu');
        }
      });

      // aplica comportamento sem alterar DOM
      $nav.find('.mw-portlet').each(function () {
        var $p = $(this);
        var $h3 = $p.children('h3').first();
        var $ul = $p.find('> .mw-portlet-body > ul, > ul').first();
        if (!$h3.length || !$ul.length) return;

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

        // marca como tendo submenu e classifica colunas
        $p.addClass('has-submenu');           // usado pelo CSS
        $ul.addClass('submenu');              // painel
        var n = $links.length;
        if (n > 20)       $ul.addClass('submenu-4-columns');
        else if (n > 12)  $ul.addClass('submenu-3-columns');
        else if (n > 6)   $ul.addClass('submenu-2-columns');

        // escondido por padrão; CSS/JS mostram quando necessário
        $ul.hide();

        // interação (hover no desktop, clique no mobile)
        var closeTimer = null;
        function open()  { $p.addClass('active'); $ul.stop(true, true).fadeIn(90); }
        function close() { $p.removeClass('active'); $ul.stop(true, true).fadeOut(90); }
        function toggle(){ $ul.is(':visible') ? close() : open(); }

        $h3.on('mouseenter.megamenu', function () {
          if (isDesktop()) open();
        }).on('mouseleave.megamenu', function () {
          if (isDesktop()) {
            closeTimer = setTimeout(function () {
              if (!$ul.is(':hover') && !$h3.is(':hover')) close();
            }, 120);
          }
        }).on('click.megamenu', function (e) {
          if (!isDesktop()) { e.preventDefault(); toggle(); }
        });

        $ul.on('mouseenter.megamenu', function () {
          if (isDesktop()) { clearTimeout(closeTimer); open(); }
        }).on('mouseleave.megamenu', function () {
          if (isDesktop()) {
            closeTimer = setTimeout(function () {
              if (!$h3.is(':hover')) close();
            }, 120);
          }
        });
      });

      // fechar clicando fora
      $(document).off('click.megamenu').on('click.megamenu', function (e) {
        if ($(e.target).closest(NAV_SEL + ' .mw-portlet').length === 0) {
          var $nav = $(NAV_SEL);
          $nav.find('.mw-portlet.active').removeClass('active');
          $nav.find('.mw-portlet .submenu:visible').fadeOut(90);
        }
      });
    }

    mw.hook('wikipage.content').add(build);
    $(build);
    console.log('[MegaMenu LITE] pronto');
  } catch (err) {
    console.error('[MegaMenu LITE] erro', err);
  }
});