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.

/* MediaWiki:Timeless.js  – comportamentos do menu, sem tocar no JS do tema */
/* global mw, $ */

mw.loader.using( ['mediawiki.util'] ).then( function () {
  $(function () {
    const $win = $(window);

    const isMobile = () => window.matchMedia('(max-width: 850px)').matches;

    // raízes de navegação do Timeless
    const $menus = $('#mw-site-navigation .sidebar-inner, #mw-related-navigation .sidebar-inner');

    function markHasSubmenu() {
      $menus.find('li').each(function () {
        const $li = $(this);
        if ($li.children('ul.submenu').length && !$li.hasClass('has-submenu')) {
          $li.addClass('has-submenu');
        }
      });
    }

    // define automaticamente 2/3/4 colunas conforme quantidade de itens
    function autoColumns() {
      $menus.find('ul.submenu').each(function () {
        const $u = $(this).removeClass('submenu-2-columns submenu-3-columns submenu-4-columns');
        const n = $u.children('li').length;
        if (n >= 20) $u.addClass('submenu-4-columns');
        else if (n >= 12) $u.addClass('submenu-3-columns');
        else if (n >= 8) $u.addClass('submenu-2-columns');
      });
    }

    // liga o comportamento de abrir/fechar
    function bindHandlers() {
      // limpa handlers antigos para evitar duplicação
      $menus.find('li.has-submenu, li.has-submenu > a').off('.vtm');

      if (isMobile()) {
        // mobile: clique para abrir; segundo clique segue o link
        $menus.on('click.vtm', 'li.has-submenu > a', function (e) {
          const $li = $(this).parent();
          if (!$li.hasClass('active')) {
            e.preventDefault();
            $li.siblings('.active').removeClass('active');
            $li.addClass('active');
          } // se já estiver ativo, deixa o link seguir
        });

        // clique fora fecha
        $(document).off('.vtmClose').on('click.vtmClose', function (e) {
          if ($(e.target).closest('li.has-submenu, #mw-site-navigation, #mw-related-navigation').length === 0) {
            $menus.find('li.has-submenu.active').removeClass('active');
          }
        });
      } else {
        // desktop: hover com pequeno delay
        $menus.on('mouseenter.vtm', 'li.has-submenu', function () {
          $(this).addClass('active');
        }).on('mouseleave.vtm', 'li.has-submenu', function () {
          const $li = $(this);
          // delay curto para evitar "pisca"
          setTimeout(function () { $li.removeClass('active'); }, 120);
        });
      }
    }

    function init() {
      markHasSubmenu();
      autoColumns();
      bindHandlers();
    }

    init();
    // reavalia em resize (debounce)
    $win.on('resize.vtm', mw.util.debounce(init, 200));
  });
});