MediaWiki:Timeless.js: Difference between revisions

Revision as of 09:12, 7 November 2025

mw.loader.using(['jquery']).then(function () {
  try {
    if (window.__VortanCleanJS) return;
    window.__VortanCleanJS = true;

    // ===== 0) Limpeza de handlers antigos =====
    $(document).off('.vt-dd .vt-mega');
    $(window).off('.vt-table .vt-mega .vt-table-sizefix .vt-table-unoverflow');
    $('.custom-submenu').remove();

    // ===== 1) DROPDOWNS DO HEADER (não toca na sidebar) =====
    var $dropdowns = $('#personal, #p-variants-desktop');

    function closeAll() { $dropdowns.removeClass('dropdown-active'); }

    $dropdowns.on('click.vt-dd', function (e) {
      var $self = $(this);
      if ($self.hasClass('dropdown-active')) {
        if ($(e.target).closest($('h2, #p-variants-desktop h3')).length > 0) closeAll();
      } else {
        closeAll();
        e.stopPropagation();
        $self.addClass('dropdown-active');
      }
    });

    $(document).on('click.vt-dd', function (e) {
      if ($(e.target).closest($dropdowns).length === 0) closeAll();
    });

    // ===== 2) Utilitários de tabela (teu bloco, idempotente) =====
    mw.hook('wikipage.content').add(function ($content) {
      $content.find('div > table:not( table table )').each(function () {
        var $t = $(this);
        if (!$t.parent().hasClass('content-table')) {
          $t.wrap('<div class="content-table-wrapper"><div class="content-table"></div></div>');
          $t.closest('.content-table-wrapper')
            .prepend('<div class="content-table-left"></div><div class="content-table-right"></div>');
        }
      });

      function setScrollClass($table) {
        var $tableWrapper = $table.parent();
        var scroll = Math.abs($tableWrapper.scrollLeft());
        $tableWrapper.parent()
          .toggleClass('scroll-left', scroll > 1)
          .toggleClass('scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1);
      }

      $content.find('.content-table').off('scroll.vt-table').on('scroll.vt-table', function () {
        setScrollClass($(this).children('table').first());
        if ($content.attr('dir') === 'rtl') {
          $(this).find('caption').css('margin-right', Math.abs($(this).scrollLeft()) + 'px');
        } else {
          $(this).find('caption').css('margin-left', $(this).scrollLeft() + 'px');
        }
      });

      function unOverflowTables() {
        $content.find('.content-table > table').each(function () {
          var $table = $(this),
              $wrapper = $table.parent().parent();
          if ($table.outerWidth() > $wrapper.outerWidth()) {
            $wrapper.addClass('overflowed');
            setScrollClass($table);
          } else {
            $wrapper.removeClass('overflowed scroll-left scroll-right fixed-scrollbar-container');
          }
        });

        $content.find('.content-table > table > caption').each(function () {
          var $table = $(this).parent(),
              $wrapper = $table.parent().parent();
          if ($table.outerWidth() > $wrapper.outerWidth()) {
            var $container = $(this).parents('.content-table-wrapper');
            $(this).width($content.width());
            var tableHeight = $container.innerHeight() - $(this).outerHeight();
            $container.find('.content-table-left').height(tableHeight);
            $container.find('.content-table-right').height(tableHeight);
          }
        });
      }

      unOverflowTables();
      $(window).off('resize.vt-table-unoverflow').on('resize.vt-table-unoverflow', unOverflowTables);

      // Recria barras “spoof”
      $content.find('.content-table-scrollbar').remove();
      $content.find('.content-table').each(function () {
        var $tableWrapper = $(this);
        var $table = $tableWrapper.children('table').first();
        var $scrollbar = $('<div>').addClass('content-table-scrollbar inactive').width($content.width());
        var $spoof = $('<div>').addClass('content-table-spoof').width($table.outerWidth());
        $tableWrapper.parent().prepend($scrollbar.prepend($spoof));
      });

      $content.find('.content-table').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () {
        $(this).siblings('.inactive').first().scrollLeft($(this).scrollLeft());
      });
      $content.find('.content-table-scrollbar').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () {
        if (!$(this).hasClass('inactive')) {
          $(this).siblings('.content-table').first().scrollLeft($(this).scrollLeft());
        }
      });

      function determineActiveSpoofScrollbars() {
        $content.find('.overflowed .content-table').each(function () {
          var $scrollbar = $(this).siblings('.content-table-scrollbar').first();
          var captionHeight = $(this).find('caption').outerHeight() || 0;
          if (captionHeight) captionHeight += 8;

          var tableTop = $(this).offset().top;
          var tableBottom = tableTop + $(this).outerHeight();
          var viewBottom = window.scrollY + document.documentElement.clientHeight;
          var active = tableTop + captionHeight < viewBottom && tableBottom > viewBottom;
          $scrollbar.toggleClass('inactive', !active);
        });
      }

      determineActiveSpoofScrollbars();
      $(window).off('scroll.vt-table resize.vt-table').on('scroll.vt-table resize.vt-table', determineActiveSpoofScrollbars);

      $(window).off('resize.vt-table-sizefix').on('resize.vt-table-sizefix', function () {
        $content.find('.content-table-scrollbar').each(function () {
          var $ct = $(this).siblings().first().find('table').first();
          $(this).find('.content-table-spoof').first().width($ct.width());
          $(this).width($content.width());
        });
      });
    });

    // ===== 3) Garante que Navigation/Wiki tools continuam como lista =====
    $('#p-navigation .mw-portlet-body > ul, #p-tb .mw-portlet-body > ul').show();

    // ===== 4) Mega-menu SÓ para os portlets da esquerda (exclui Navigation/Wiki tools) =====
    var NAV_SEL = '#site-navigation .sidebar-inner';
    var EXCLUDE = '#p-navigation, #p-tb'; // acrescente aqui se tiver outro que deva ficar como lista

    function buildMega() {
      var $container = $(NAV_SEL);
      if (!$container.length) return;

      // limpa resquícios
      $container.find('h3.vt-hasmega').removeClass('vt-hasmega active');
      $container.find('ul.submenu').remove();
      $(document).off('.vt-mega');
      $(window).off('.vt-mega');

      $container.find('.mw-portlet').not(EXCLUDE).each(function () {
        var $portlet = $(this);
        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');
        if (!$links.length) return;

        $h3.addClass('vt-hasmega');

        var n = $links.length;
        var cls = 'submenu';
        if (n > 20) cls += ' submenu-4-columns';
        else if (n > 12) cls += ' submenu-3-columns';
        else if (n > 6) cls += ' submenu-2-columns';

        var $submenu = $('<ul/>', { 'class': cls }).appendTo($portlet);
        $links.each(function () { $('<li/>').append($(this).clone()).appendTo($submenu); });

        // esconde a lista original: agora o portlet mostra só o título
        $ul.hide();

        function reposition() {
          var left = $container.outerWidth() + 12;
          var top = $h3.position().top - 6;
          $submenu.css({ left: left, top: top });
        }

        function open() {
          $container.find('h3.vt-hasmega').not($h3).removeClass('active');
          $container.find('ul.submenu').not($submenu).hide();
          $h3.addClass('active');
          reposition();
          $submenu.stop(true, true).fadeIn(90);
        }

        function close() {
          $h3.removeClass('active');
          $submenu.stop(true, true).fadeOut(90);
        }

        function toggle() { ($submenu.is(':visible')) ? close() : open(); }

        var closeTimer = null;

        $h3.on('mouseenter.vt-mega', function () {
          if (window.innerWidth >= 851) open();
        }).on('mouseleave.vt-mega', function () {
          if (window.innerWidth >= 851) {
            closeTimer = setTimeout(function () {
              if (!$submenu.is(':hover') && !$h3.is(':hover')) close();
            }, 120);
          }
        }).on('click.vt-mega', function (e) {
          if (window.innerWidth < 851) { e.preventDefault(); toggle(); }
        });

        $submenu.on('mouseenter.vt-mega', function () {
          if (window.innerWidth >= 851) { clearTimeout(closeTimer); open(); }
        }).on('mouseleave.vt-mega', function () {
          if (window.innerWidth >= 851) {
            closeTimer = setTimeout(function () {
              if (!$h3.is(':hover')) close();
            }, 120);
          }
        });

        $(window).on('resize.vt-mega', reposition);
      });

      $(document).on('click.vt-mega', function (e) {
        if ($(e.target).closest(NAV_SEL).length === 0) {
          var $c = $(NAV_SEL);
          $c.find('h3.vt-hasmega').removeClass('active');
          $c.find('ul.submenu').hide();
        }
      });
    }

    $(buildMega);
    mw.hook('wikipage.content').add(buildMega);

    console.log('[Vortan Clean JS + Mega (sidebar)] OK');
  } catch (err) {
    console.error('[Vortan Clean JS] erro', err);
  }
});