|
|
| Line 1: |
Line 1: |
| $( 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 estável – Timeless (.mw-portlet) ===== */
| |
| mw.loader.using(['jquery']).then(function () { | | mw.loader.using(['jquery']).then(function () { |
| try { | | var NAV = '#site-navigation .sidebar-inner'; |
| if (window.__megaMenuStable) return; | | var EXCLUDE = new Set([ |
| window.__megaMenuStable = true; | | 'p-navigation', // deixa Navigation normal |
| | 'p-tb', // Page tools (ou Tools) |
| | 'p-variants-desktop', |
| | 'personal' |
| | ]); |
|
| |
|
| var NAV_SEL = '#site-navigation .sidebar-inner';
| | // limpa restos |
| var isDesktop = function () { return window.innerWidth >= 851; };
| | $(NAV).find('h3.mm-ready').removeClass('mm-ready active'); |
| | $(NAV).find('ul.submenu').remove(); |
| | $(document).off('.mm'); |
|
| |
|
| function build() {
| | $(NAV).find('.mw-portlet').each(function () { |
| var $container = $(NAV_SEL);
| | var $portlet = $(this); |
| if (!$container.length) return;
| | var id = $portlet.attr('id'); |
| | if (!id || EXCLUDE.has(id)) return; |
|
| |
|
| // limpa qualquer resíduo de execuções anteriores
| | var $h3 = $portlet.children('h3').first(); |
| $container.find('h3.has-mega').removeClass('has-mega active');
| | var $ul = $portlet.find('> .mw-portlet-body > ul').first(); |
| $container.find('ul.submenu').remove();
| | if (!$h3.length || !$ul.length) return; |
| $(document).off('.megamenu');
| |
| $(window).off('.megamenu');
| |
|
| |
|
| // para cada seção (portlet)
| | var $links = $ul.find('> li > a'); |
| $container.find('.mw-portlet').each(function () {
| | var n = $links.length; |
| var $portlet = $(this);
| | if (!n) return; |
| var $h3 = $portlet.children('h3').first();
| |
| var $ul = $portlet.children('ul').first();
| |
| if (!$ul.length) $ul = $portlet.find('> .mw-portlet-body > ul').first();
| |
| if (!$h3.length || !$ul.length) return;
| |
|
| |
|
| var $links = $ul.find('> li > a');
| | // cria painel |
| if (!$links.length) return;
| | var $panel = $('<ul class="submenu" />'); |
| | $links.each(function () { $('<li>').append($(this).clone()).appendTo($panel); }); |
|
| |
|
| // marca o título como "tem mega"
| | // define colunas |
| $h3.addClass('has-mega');
| | if (n > 20) $panel.addClass('mm-cols-4'); |
| | else if (n > 12) $panel.addClass('mm-cols-3'); |
| | else if (n > 6) $panel.addClass('mm-cols-2'); |
|
| |
|
| // define colunas dinamicamente
| | $portlet.append($panel); |
| var n = $links.length;
| | $ul.hide(); // esconde lista original |
| var cls = 'submenu';
| | $h3.addClass('mm-ready'); |
| if (n > 20) cls += ' submenu-4-columns';
| |
| else if (n > 12) cls += ' submenu-3-columns';
| |
| else if (n > 6) cls += ' submenu-2-columns';
| |
|
| |
|
| // cria o painel
| | function open () { |
| var $submenu = $('<ul/>', { 'class': cls }).appendTo($portlet);
| | $(NAV).find('h3.mm-ready').not($h3).removeClass('active'); |
| $links.each(function () {
| | $(NAV).find('ul.submenu').not($panel).hide(); |
| $('<li/>').append($(this).clone()).appendTo($submenu);
| | $h3.addClass('active'); |
| });
| |
|
| |
|
| // esconde a lista original e o painel
| | // alinha pelo topo do h3 |
| $ul.hide();
| | var top = $h3.position().top - 6; |
| $submenu.hide();
| | $panel.css({ top: top }).show(); |
| | | } |
| // posiciona ao lado da barra e alinhado ao título
| | function close () { $h3.removeClass('active'); $panel.hide(); } |
| function reposition() {
| |
| var left = $container.outerWidth() + 12; // distância da sidebar
| |
| var top = $h3.position().top - 6; // alinhado pela altura do h3
| |
| $submenu.css({ left: left, top: top });
| |
| }
| |
|
| |
|
| function open() {
| | // desktop: hover; mobile: click |
| // fecha outros
| | $h3.on('mouseenter.mm', function () { if (window.innerWidth >= 851) open(); }); |
| $container.find('h3.has-mega').not($h3).removeClass('active');
| | $h3.on('mouseleave.mm', function () { |
| $container.find('ul.submenu').not($submenu).hide();
| | if (window.innerWidth >= 851) setTimeout(function () { |
| | if (!$panel.is(':hover') && !$h3.is(':hover')) close(); |
| | }, 120); |
| | }); |
| | $panel.on('mouseleave.mm', function () { if (window.innerWidth >= 851) close(); }); |
| | $h3.on('click.mm', function (e) { |
| | if (window.innerWidth < 851) { e.preventDefault(); $panel.toggle(); $h3.toggleClass('active'); } |
| | }); |
| | }); |
|
| |
|
| $h3.addClass('active');
| | // fecha clicando fora |
| reposition();
| | $(document).on('click.mm', function (e) { |
| $submenu.stop(true, true).fadeIn(90);
| | if ($(e.target).closest(NAV).length === 0) { |
| }
| | $(NAV).find('h3.mm-ready').removeClass('active'); |
| | | $(NAV).find('ul.submenu').hide(); |
| function close() {
| |
| $h3.removeClass('active');
| |
| $submenu.stop(true, true).fadeOut(90);
| |
| }
| |
| | |
| function toggle() {
| |
| ($submenu.is(':visible')) ? close() : open();
| |
| }
| |
| | |
| // hover/click com delay pra não sumir no caminho do mouse
| |
| var closeTimer = null;
| |
| | |
| $h3.on('mouseenter.megamenu', function () {
| |
| if (isDesktop()) open();
| |
| }).on('mouseleave.megamenu', function () {
| |
| if (isDesktop()) {
| |
| closeTimer = setTimeout(function () {
| |
| if (!$submenu.is(':hover') && !$h3.is(':hover')) close();
| |
| }, 120);
| |
| }
| |
| }).on('click.megamenu', function (e) {
| |
| if (!isDesktop()) { e.preventDefault(); toggle(); }
| |
| });
| |
| | |
| $submenu.on('mouseenter.megamenu', function () {
| |
| if (isDesktop()) { clearTimeout(closeTimer); open(); }
| |
| }).on('mouseleave.megamenu', function () {
| |
| if (isDesktop()) {
| |
| closeTimer = setTimeout(function () {
| |
| if (!$h3.is(':hover')) close();
| |
| }, 120);
| |
| }
| |
| });
| |
| | |
| $(window).on('resize.megamenu', reposition);
| |
| });
| |
| | |
| // fecha clicando fora
| |
| $(document).on('click.megamenu', function (e) {
| |
| if ($(e.target).closest(NAV_SEL).length === 0) {
| |
| var $c = $(NAV_SEL);
| |
| $c.find('h3.has-mega').removeClass('active');
| |
| $c.find('ul.submenu').hide();
| |
| }
| |
| });
| |
| } | | } |
| | | }); |
| mw.hook('wikipage.content').add(build);
| |
| $(build);
| |
| console.log('[MegaMenu] OK');
| |
| } catch (err) { | |
| console.error('[MegaMenu] erro', err);
| |
| }
| |
| }); | | }); |
