|
|
| Line 1: |
Line 1: |
| $( function () { | | $(function(){ |
| // sidebar-chunk only applies to desktop-small, but the toggles are hidden at
| | // Ao passar o mouse no item da sidebar |
| // other resolutions regardless and the css overrides any visible effects.
| | $('#mw-panel .sidebar-inner ul li a').mouseenter(function(e){ |
| var $dropdowns = $( '#personal, #p-variants-desktop, .sidebar-chunk' );
| | var itemName = $(this).attr('href').split(':').pop(); |
|
| |
|
| /**
| | // Remove qualquer submenu antigo |
| * Desktop menu click-toggling
| | $('.custom-submenu').remove(); |
| *
| |
| * 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.
| |
| */
| |
|
| |
|
| /**
| | // Carrega o submenu via API |
| * Close all dropdowns
| | $.get(mw.util.wikiScript('api'), { |
| */
| | action: 'parse', |
| function closeOpen() {
| | page: 'MediaWiki:Custommenu-' + itemName, |
| $dropdowns.removeClass( 'dropdown-active' );
| | format: 'json' |
| }
| | }).done(function(data){ |
| | if(data.parse){ |
| | var submenu = $('<div class="custom-submenu">').html(data.parse.text['*']); |
| | $('body').append(submenu); |
|
| |
|
| /**
| | // Posicionamento vertical alinhado ao item |
| * Click behaviour
| | var offset = $(e.target).offset(); |
| */
| | submenu.css({ |
| $dropdowns.on( 'click', function ( e ) {
| | top: offset.top - $(window).scrollTop(), |
| // Check if it's already open so we don't open it again
| | left: $('#mw-panel').width() + 10 |
| // eslint-disable-next-line no-jquery/no-class-state
| | }).fadeIn(200); |
| 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 ) {
| | // Remove submenu ao sair da sidebar |
| // Gotta wrap them for this to work; maybe later the parser etc will do this for us?!
| | $('#mw-panel').mouseleave(function(){ |
| $content.find( 'div > table:not( table table )' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
| | $('.custom-submenu').fadeOut(100, function(){ $(this).remove(); }); |
| $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 () {
| |
| try { | |
| if (window.__megaMenuStable) return;
| |
| window.__megaMenuStable = true;
| |
| | |
| var NAV_SEL = '#site-navigation .sidebar-inner';
| |
| var isDesktop = function () { return window.innerWidth >= 851; };
| |
| | |
| function build() {
| |
| var $container = $(NAV_SEL);
| |
| if (!$container.length) return;
| |
| | |
| // limpa qualquer resíduo de execuções anteriores
| |
| $container.find('h3.has-mega').removeClass('has-mega active');
| |
| $container.find('ul.submenu').remove();
| |
| $(document).off('.megamenu');
| |
| $(window).off('.megamenu');
| |
| | |
| // para cada seção (portlet)
| |
| $container.find('.mw-portlet').each(function () {
| |
| var $portlet = $(this);
| |
| 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');
| |
| if (!$links.length) return;
| |
| | |
| // marca o título como "tem mega"
| |
| $h3.addClass('has-mega');
| |
| | |
| // define colunas dinamicamente
| |
| var n = $links.length;
| |
| var cls = 'mm-submenu';
| |
| if (n > 20) cls += ' mm-4';
| |
| else if (n > 12) cls += ' mm-3';
| |
| else if (n > 6) cls += ' mm-2';
| |
| | |
| // cria o painel
| |
| var $submenu = $('<ul/>', { 'class': cls }).appendTo($portlet);
| |
| $links.each(function () {
| |
| $('<li/>').append($(this).clone()).appendTo($submenu);
| |
| });
| |
| | |
| // esconde a lista original e o painel
| |
| $ul.hide();
| |
| $submenu.hide();
| |
| | |
| // posiciona ao lado da barra e alinhado ao título
| |
| 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() {
| |
| // fecha outros
| |
| $container.find('h3.has-mega').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();
| |
| }
| |
| | |
| // 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);
| |
| }
| |
| }); | | }); |
