MediaWiki:Timeless.js: Difference between revisions

Revision as of 12:21, 6 November 2025

$( function () {
	// sidebar-chunk only applies to desktop-small, but the toggles are hidden at
	// other resolutions regardless and the css overrides any visible effects.
	var $dropdowns = $( '#personal, #p-variants-desktop, .sidebar-chunk' );

	/**
	 * Desktop menu click-toggling
	 *
	 * We're not even checking if it's desktop because the classes in play have no effect
	 * on mobile regardless... this may break things at some point, though.
	 */

	/**
	 * Close all dropdowns
	 */
	function closeOpen() {
		$dropdowns.removeClass( 'dropdown-active' );
	}

	/**
	 * Click behaviour
	 */
	$dropdowns.on( 'click', function ( e ) {
		// Check if it's already open so we don't open it again
		// eslint-disable-next-line no-jquery/no-class-state
		if ( $( this ).hasClass( 'dropdown-active' ) ) {
			if ( $( e.target ).closest( $( 'h2, #p-variants-desktop h3' ) ).length > 0 ) {
				// treat reclick on the header as a toggle
				closeOpen();
			}
			// Clicked inside an open menu; don't do anything
		} else {
			closeOpen();
			e.stopPropagation(); // stop hiding it!
			$( this ).addClass( 'dropdown-active' );
		}
	} );
	$( document ).on( 'click', function ( e ) {
		if ( $( e.target ).closest( $dropdowns ).length > 0 ) {
			// Clicked inside an open menu; don't close anything
		} else {
			closeOpen();
		}
	} );
} );

mw.hook( 'wikipage.content' ).add( function ( $content ) {
	// Gotta wrap them for this to work; maybe later the parser etc will do this for us?!
	$content.find( 'div > table:not( table table )' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
	$content.find( '.content-table-wrapper' ).prepend( '<div class="content-table-left"></div><div class="content-table-right"></div>' );

	/**
	 * Set up borders for experimental overflowing table scrolling
	 *
	 * I have no idea what I'm doing.
	 *
	 * @param {jQuery} $table
	 */
	function setScrollClass( $table ) {
		var $tableWrapper = $table.parent(),
			// wtf browser rtl implementations
			scroll = Math.abs( $tableWrapper.scrollLeft() );

		$tableWrapper.parent()
			// 1 instead of 0 because of weird rtl rounding errors or something
			.toggleClass( 'scroll-left', scroll > 1 )
			.toggleClass( 'scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1 );
	}

	$content.find( '.content-table' ).on( 'scroll', 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' );
		}
	} );

	/**
	 * Mark overflowed tables for scrolling
	 */
	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' );
			}
		} );

		// Set up sticky captions
		$content.find( '.content-table > table > caption' ).each( function () {
			var $container, tableHeight,
				$table = $( this ).parent(),
				$wrapper = $table.parent().parent();

			if ( $table.outerWidth() > $wrapper.outerWidth() ) {
				$container = $( this ).parents( '.content-table-wrapper' );
				$( this ).width( $content.width() );
				tableHeight = $container.innerHeight() - $( this ).outerHeight();

				$container.find( '.content-table-left' ).height( tableHeight );
				$container.find( '.content-table-right' ).height( tableHeight );
			}
		} );
	}

	unOverflowTables();
	$( window ).on( 'resize', unOverflowTables );

	/**
	 * Sticky scrollbars maybe?!
	 */
	$content.find( '.content-table' ).each( function () {
		var $table, $tableWrapper, $spoof, $scrollbar;

		$tableWrapper = $( this );
		$table = $tableWrapper.children( 'table' ).first();

		// Assemble our silly crap and add to page
		$scrollbar = $( '<div>' ).addClass( 'content-table-scrollbar inactive' ).width( $content.width() );
		$spoof = $( '<div>' ).addClass( 'content-table-spoof' ).width( $table.outerWidth() );
		$tableWrapper.parent().prepend( $scrollbar.prepend( $spoof ) );
	} );

	/**
	 * Scoll table when scrolling scrollbar and visa-versa lololol wut
	 */
	$content.find( '.content-table' ).on( 'scroll', function () {
		// Only do this here if we're not already mirroring the spoof
		var $mirror = $( this ).siblings( '.inactive' ).first();

		$mirror.scrollLeft( $( this ).scrollLeft() );
	} );
	$content.find( '.content-table-scrollbar' ).on( 'scroll', function () {
		var $mirror = $( this ).siblings( '.content-table' ).first();

		// Only do this here if we're not already mirroring the table
		// eslint-disable-next-line no-jquery/no-class-state
		if ( !$( this ).hasClass( 'inactive' ) ) {
			$mirror.scrollLeft( $( this ).scrollLeft() );
		}
	} );

	/**
	 * Set active when actually over the table it applies to...
	 */
	function determineActiveSpoofScrollbars() {
		$content.find( '.overflowed .content-table' ).each( function () {
			var $scrollbar = $( this ).siblings( '.content-table-scrollbar' ).first();

			// Skip caption
			var captionHeight = $( this ).find( 'caption' ).outerHeight() || 0;
			if ( captionHeight ) {
				// Pad slightly for reasons
				captionHeight += 8;
			}

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

	determineActiveSpoofScrollbars();
	$( window ).on( 'scroll resize', determineActiveSpoofScrollbars );


	function showContent(id) {
		const conteudos = document.querySelectorAll('.nav-content');
		conteudos.forEach((div) => {
			div.classList.remove('show-content');
		});
		document.getElementById(id).classList.add('show-content');
	}

	/**
	 * Make sure tablespoofs remain correctly-sized?
	 */
	$( window ).on( 'resize', function () {
		$content.find( '.content-table-scrollbar' ).each( function () {
			var width = $( this ).siblings().first().find( 'table' ).first().width();
			$( this ).find( '.content-table-spoof' ).first().width( width );
			$( this ).width( $content.width() );
		} );
	} );
} );
/* Mega-menu (robusto p/ Timeless + .mw-portlet) */
mw.loader.using(['jquery']).then(function () {
  try {
    if (window.__megaMenuPortlets) return;
    window.__megaMenuPortlets = true;

    function build() {
      var $container = $('#site-navigation .sidebar-inner');
      if (!$container.length) return;

      // Para cada portlet (seção) da sidebar
      $container.find('.mw-portlet').each(function () {
        var $portlet = $(this);
        var $h3 = $portlet.children('h3').first(); // título da seção
        // ul pode estar direto ou dentro de .mw-portlet-body
        var $ul = $portlet.children('ul').first();
        if (!$ul.length) $ul = $portlet.children('.mw-portlet-body').find('> ul').first();
        if (!$h3.length || !$ul.length) return;

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

        // marca o título como "tem mega"
        $h3.addClass('has-mega');

        // monta submenu com colunas automáticas
        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);
        });
      // --- POSICIONAMENTO: alinha o painel na altura do h3 e ao lado da barra
      function reposition() {
        var left = $nav.outerWidth() + 8;          // distância da sidebar
        var top  = $h3.position().top - 6;         // alinha pela altura do título
        $submenu.css({ left: left, top: top });
      }
      reposition();
      $(window).on('resize', reposition);

      // --- Mantém aberto quando o mouse entra no painel
      $submenu.on('mouseenter', function () {
        open();
      }).on('mouseleave', function () {
        if (window.innerWidth >= 851) close();
      });

        // esconde a lista original (fonte de dados)
        $ul.hide();
        $submenu.hide();

        function open() {
          $('#site-navigation h3.has-mega').removeClass('active');
          $('#site-navigation ul.submenu').hide();
          $h3.addClass('active');
          $submenu.show();
        }
        function close() { $h3.removeClass('active'); $submenu.hide(); }
        function toggle() { ($h3.hasClass('active') ? close() : open()); }

        // desktop = hover, mobile = click
        $h3.on('mouseenter', function () {
          if (window.innerWidth >= 851) open();
        }).on('mouseleave', function () {
          if (window.innerWidth >= 851) close();
        }).on('click', function (e) {
          e.preventDefault();
          toggle();
        });
      });

      // fecha clicando fora
      $h3.on('mouseenter', function () {
        if (window.innerWidth >= 851) open();
      }).on('mouseleave', function () {
        // não fecha aqui; quem fecha é o mouseleave do submenu (acima)
      }).on('click', function (e) {
        e.preventDefault();
        toggle();
      });
    }

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