Jump to content

MediaWiki:Common.js: Difference between revisions

From ATRONIA Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


$(document).ready(function() {
(function() {
    // 1. Procura o link de PROBES na barra lateral através do texto exato do link
    function initSidebarDropdown() {
    $('.vector-main-menu-sidebar a, .mw-sidebar-navigation a').each(function() {
        // Procura todos os links na barra lateral
        var $link = $(this);
        var links = document.querySelectorAll('.vector-main-menu-sidebar a, .mw-sidebar-navigation a, #mw-panel-nav a');
          
          
         if ($link.text().trim() === 'PROBES') {
         links.forEach(function(link) {
            var $liPrincipal = $link.closest('li');
            // Se encontrar o link que diz exatamente "PROBES"
           
            if (link.textContent.trim() === 'PROBES') {
            // 2. Encontra a lista de sublinks (as sondas com 3 asteriscos) que o MediaWiki colocou logo a seguir
                var parentLi = link.closest('li');
            var $subLista = $liPrincipal.find('ul');
                 if (!parentLi) return;
            if ($subLista.length === 0) {
                 $subLista = $liPrincipal.next('ul');
            }
           
            if ($subLista.length > 0) {
                // Esconde as sondas inicialmente
                $subLista.hide();
                  
                  
                 // 3. Adiciona a seta de dropdown antes do texto PROBES
                 // Encontra a lista ul subsequente que contém as sondas
                 var $seta = $('<span class="seta-dropdown" style="cursor:pointer; margin-right:6px; display:inline-block; font-size:10px; transition: transform 0.2s;">▶</span>');
                 var subList = parentLi.querySelector('ul') || (parentLi.nextElementSibling && parentLi.nextElementSibling.tagName === 'UL' ? parentLi.nextElementSibling : null);
                $link.before($seta);
                  
                  
                 // 4. Cria a ação de clicar para abrir e fechar
                 if (subList) {
                $link.parent().css('cursor', 'pointer').on('click', function(e) {
                    // 1. Esconde as sondas imediatamente
                     // Impede o navegador de tentar saltar para outra página se o link for apenas uma âncora (#Probes)
                    subList.style.display = 'none';
                     if ($link.attr('href').indexOf('#') !== -1) {
                   
                        e.preventDefault();
                     // 2. Injeta uma seta visual antes do link
                     }
                    var arrow = document.createElement('span');
                     arrow.innerHTML = '';
                    arrow.style.cursor = 'pointer';
                    arrow.style.marginRight = '5px';
                    arrow.style.display = 'inline-block';
                    arrow.style.transition = 'transform 0.2s';
                    link.insertBefore(arrow, link.firstChild);
                      
                    // 3. Altera o comportamento do clique no bloco inteiro
                    var clickTarget = link.parentElement;
                    clickTarget.style.cursor = 'pointer';
                      
                      
                     $subLista.slideToggle('fast', function() {
                     clickTarget.addEventListener('click', function(e) {
                         // Roda a seta: se estiver visível fica para baixo (90deg), se não, volta ao normal
                         // Se o link tiver '#' (âncora), impede de recarregar a página
                         if ($subLista.is(':visible')) {
                         if (link.getAttribute('href').indexOf('#') !== -1) {
                             $seta.css('transform', 'rotate(90deg)');
                             e.preventDefault();
                            e.stopPropagation();
                        }
                       
                        // Alterna a visibilidade
                        if (subList.style.display === 'none') {
                            subList.style.display = 'block';
                            arrow.style.transform = 'rotate(90deg)';
                         } else {
                         } else {
                             $seta.css('transform', 'rotate(0deg)');
                             subList.style.display = 'none';
                            arrow.style.transform = 'rotate(0deg)';
                         }
                         }
                     });
                     });
                 });
                 }
             }
             }
         }
         });
     });
     }
});
 
    // Executa assim que o documento estiver pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebarDropdown);
    } else {
        initSidebarDropdown();
    }
})();





Revision as of 15:38, 12 June 2026

/* Any JavaScript here will be loaded for all users on every page load. */

(function() {
    function initSidebarDropdown() {
        // Procura todos os links na barra lateral
        var links = document.querySelectorAll('.vector-main-menu-sidebar a, .mw-sidebar-navigation a, #mw-panel-nav a');
        
        links.forEach(function(link) {
            // Se encontrar o link que diz exatamente "PROBES"
            if (link.textContent.trim() === 'PROBES') {
                var parentLi = link.closest('li');
                if (!parentLi) return;
                
                // Encontra a lista ul subsequente que contém as sondas
                var subList = parentLi.querySelector('ul') || (parentLi.nextElementSibling && parentLi.nextElementSibling.tagName === 'UL' ? parentLi.nextElementSibling : null);
                
                if (subList) {
                    // 1. Esconde as sondas imediatamente
                    subList.style.display = 'none';
                    
                    // 2. Injeta uma seta visual antes do link
                    var arrow = document.createElement('span');
                    arrow.innerHTML = '▶ ';
                    arrow.style.cursor = 'pointer';
                    arrow.style.marginRight = '5px';
                    arrow.style.display = 'inline-block';
                    arrow.style.transition = 'transform 0.2s';
                    link.insertBefore(arrow, link.firstChild);
                    
                    // 3. Altera o comportamento do clique no bloco inteiro
                    var clickTarget = link.parentElement;
                    clickTarget.style.cursor = 'pointer';
                    
                    clickTarget.addEventListener('click', function(e) {
                        // Se o link tiver '#' (âncora), impede de recarregar a página
                        if (link.getAttribute('href').indexOf('#') !== -1) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                        
                        // Alterna a visibilidade
                        if (subList.style.display === 'none') {
                            subList.style.display = 'block';
                            arrow.style.transform = 'rotate(90deg)';
                        } else {
                            subList.style.display = 'none';
                            arrow.style.transform = 'rotate(0deg)';
                        }
                    });
                }
            }
        });
    }

    // Executa assim que o documento estiver pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebarDropdown);
    } else {
        initSidebarDropdown();
    }
})();



// ==========================================================================
    // CONTROLADOR DE DROPDOWN NO ÍNDICE (TOC) - VERSÃO VISUAL FINAL
    // ==========================================================================
    
    $('.vector-toc-contents .vector-toc-list .vector-toc-list-item').each(function() {
        var $listItem = $(this);
        
        // Proteção total ao cabeçalho global
        if ($listItem.find('.vector-toc-title, #vector-toc-collapsed-button, .vector-toc-header').length > 0 || $listItem.hasClass('vector-toc-title')) {
            return;
        }

        var $subList = $listItem.children('.vector-toc-list, ul');
        
        // Só injeta o botão se contiver subcapítulos
        if ($subList.length > 0 && $subList.children('.vector-toc-list-item, li').length > 0) {
            
            if ($listItem.children('.toc-toggle-arrow').length === 0) {
                // Injeta o container da seta preparado para renderizar o SVG do CSS
                var $arrow = $('<span class="toc-toggle-arrow"><span class="arrow-icon"></span></span>');
                
                $arrow.click(function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $listItem.toggleClass('toc-expanded');
                });
                
                $listItem.prepend($arrow);
            }
        }
    });




// 2. LÓGICA DA SETA (ALL MODELS)
    // Deteta o clique no contentor nativo do MediaWiki que criaste
    $('.variations-toggle').css('cursor', 'pointer').click(function() {
        // Encontra a seta com a classe .arrow-icon dentro do bloco clicado
        var $arrow = $(this).find('.arrow-icon');
        
        // Alterna a classe de rotação configurada no CSS
        $arrow.toggleClass('rotated');
    });




$(function() {
    // Procura apenas por blocos de código técnicos e ignora a área de produtos
    $('.mw-highlight pre, .syntaxhighlight pre, pre.mw-code-example').each(function() {
        var $this = $(this);
        
        // Verifica se o elemento já tem um botão para não duplicar
        if ($this.parent().find('.copy-code-button').length > 0) return;

        var $button = $('<button>')
            .text('Copy')
            .addClass('copy-code-button')
            .click(function() {
                var text = $this.text();
                navigator.clipboard.writeText(text).then(function() {
                    $button.text('Copied!');
                    setTimeout(function() { $button.text('Copy'); }, 2000);
                });
            });

        // Insere o botão antes do bloco de código
        $this.before($button);
    });
});


/*FOOTER*/

$(function() {
    var imgBase = "https://wiki.atronia.eu/images/";
    var img = {
        fb: imgBase + "5/55/Facebook.png",
        ln: imgBase + "9/99/Linkdin.png",
        ig: imgBase + "b/b7/Instagram.png",
        igus: imgBase + "2/2b/Igus.svg",
        selo: imgBase + "2/23/Selo_ID_reconhecimento_idoneidade_branco_.png",
        cp: imgBase + "9/92/Compete.png",
        ce: imgBase + "c/ce/Centro.png",
        ps: imgBase + "2/20/Pessoas.png",
        pr: imgBase + "4/42/Prr.png"
    };

    var linkStyle = 'style="color: #ffffff !important; display: block; margin-bottom: 10px; font-size: 14px; text-decoration: none; font-family:\'Rubik\', sans-serif;"';
    var titleStyle = 'style="color: #ffffff !important; font-weight: bold; margin-bottom: 20px; font-size: 16px; border: none; text-transform: none; font-family:\'Rubik\', sans-serif;"';

    var html = 
    '<div id="custom-atronia-footer" style="background-color: #111; font-family:\'Rubik\', sans-serif;">' +
        // 1. SCROLLING TEXT
        '<div class="atronia-scrolling-container">' +
            '<div class="atronia-scrolling-content">' +
                '<span>TECH THAT MAKES SENSE. • TECH THAT MAKES SENSE. • </span>' +
                '<span>TECH THAT MAKES SENSE. • TECH THAT MAKES SENSE. • </span>' +
                '<span>TECH THAT MAKES SENSE. • TECH THAT MAKES SENSE. • </span>' +
                '<span>TECH THAT MAKES SENSE. • TECH THAT MAKES SENSE. • </span>' +
            '</div>' +
        '</div>' +

        // 2. CONTEÚDO PRINCIPAL (CONTACTOS E MENUS)
        '<div style="display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1300px; margin: 0 auto; padding: 60px 20px; color: #ffffff; gap: 40px;">' +
            // Contactos
            '<div style="flex: 1.5; min-width: 280px;">' +
                '<h4 '+titleStyle+'>Visit but keep in mind we\'re busy</h4>' +
                '<p style="color: #ffffff !important;">Rua do Norte 9,<br>Ílhavo, 3830-167, Portugal</p>' +
                '<h4 '+titleStyle+' style="margin-top:30px">Contact Us</h4>' +
                '<p style="color: #ffffff !important; margin-bottom: 5px;">+351 934 886 253</p>' +
                '<p style="color: #ffffff !important; margin-bottom: 15px;">(Custo de chamada para rede móvel nacional)</p>' +
                '<p style="color: #ffffff !important;">info@atronia.eu</p>' +
                '<div style="display:flex; gap:15px; margin-top:20px">' +
                    '<a href="https://www.facebook.com/atronia.eu/" target="_blank"><img src="'+img.fb+'" width="25" style="filter: brightness(0) invert(1) !important;"></a>' +
                    '<a href="https://www.linkedin.com/company/atroniaeu/?originalSubdomain=pt" target="_blank"><img src="'+img.ln+'" width="25" style="filter: brightness(0) invert(1) !important;"></a>' +
                    '<a href="https://www.instagram.com/atronia.eu/" target="_blank"><img src="'+img.ig+'" width="25" style="filter: brightness(0) invert(1) !important;"></a>' +
                '</div>' +
            '</div>' +
            // Menus
            '<div style="flex: 3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;">' +
                '<div><h4 '+titleStyle+'>Menu</h4>' +
                    '<a '+linkStyle+' href="https://atronia.eu/" target="_blank">Home</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/about-us/" target="_blank">About us</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/hardware/" target="_blank">Hardware</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/solutions/" target="_blank">Solutions</a>' +
                '</div>' +
                '<div><h4 '+titleStyle+'>Hardware</h4>' +
                    '<a '+linkStyle+' href="https://atronia.eu/hardware/monarch/" target="_blank">Monarch</a>' +                    
                    '<a '+linkStyle+' href="https://atronia.eu/hardware/atlas/" target="_blank">Atlas</a>' +
                    '<a '+linkStyle+'  target="_blank">Probes</a>' +
                    '<a '+linkStyle+'  target="_blank">Accessories</a>' +
                '</div>' +
                '<div><h4 '+titleStyle+'>Solutions</h4>' +
                    '<a '+linkStyle+' href="https://atronia.eu/aquaguard/" target="_blank">Aquaguard</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/solutions/firefly/" target="_blank">Firefly</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/solutions/melisafe/" target="_blank">Melisafe</a>' +
                    '<a '+linkStyle+' href="https://atronia.eu/solutions/prevent/" target="_blank">Prevent</a>' +
                '</div>' +
                '<div><h4 '+titleStyle+'>Knowledge</h4>' +
                    '<a '+linkStyle+' href="https://wiki.atronia.eu">Wiki</a>' +
                '</div>' +
            '</div>' +
        '</div>' +

        '<div class="atronia-full-width-line"></div>' +

        // 4. SECÇÃO FINAL (LOGOS COM ESPAÇAMENTO REDUZIDO)
        '<div style="padding: 40px 20px; max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 60px;">' +
            
            // 1. Approved by
            '<div style="flex: 0 1 auto; min-width: 120px;">' +
                '<p style="font-size:11px; opacity:0.6; color:#ffffff !important; margin-bottom:15px; font-weight:bold; text-transform: uppercase;">Approved by:</p>' +
                '<img src="'+img.selo+'" style="height: auto; width: 90px; display: block; border:none;">' +
            '</div>' +

            // 2. Powered by
            '<div style="flex: 0 1 auto; min-width: 150px;">' +
                '<p style="font-size:11px; opacity:0.6; color:#ffffff !important; margin-bottom:15px; font-weight:bold; text-transform: uppercase;">Powered by:</p>' +
                '<a href="https://www.igus.pt/" target="_blank"><img src="'+img.igus+'" style="height: auto; width: 130px; display: block; border:none;"></a>' +
            '</div>' +

            // 3. Co-sponsored by
            '<div style="flex: 0 1 auto; min-width: 300px;">' +
                '<p style="font-size:11px; opacity:0.6; color:#ffffff !important; margin-bottom:15px; font-weight:bold; text-transform: uppercase;">Co-sponsored by:</p>' +
                '<div style="display: grid; grid-template-columns: repeat(2, auto); gap: 15px 30px; justify-content: start; align-items: center;">' +
                    '<a href="https://atronia.eu/wp-content/uploads/2025/12/Ficha-do-projeto-ATRONIA-LDA.pdf" target="_blank"><img src="'+img.cp+'" style="height: 40px; max-width: 250px; width: auto; object-fit: contain; border:none;"></a>' +
                    '<a href="https://atronia.eu/wp-content/uploads/2025/09/Ficha-de-Operacao_Tilt-Wind.pdf" target="_blank"><img src="'+img.ce+'" style="height: 40px; max-width: 250px; width: auto; object-fit: contain; border:none;"></a>' +
                    '<a href="https://atronia.eu/wp-content/uploads/2025/01/Pessoas2030.jpg" target="_blank"><img src="'+img.ps+'" style="height: 40px; max-width: 250px; width: auto; object-fit: contain; border:none;"></a>' +
                    '<a href="https://atronia.eu/wp-content/uploads/2025/02/Ficha-de-Projeto.pdf" target="_blank"><img src="'+img.pr+'" style="height: 40px; max-width: 250px; width: auto; object-fit: contain; border:none;"></a>' +
                '</div>' +
            '</div>' +

        '</div>' +

        // Links Legais (alinhados abaixo dos logos)
        '<div style="padding: 0 20px 40px 20px; max-width: 1300px; margin: 0 auto;">' +
            '<p style="font-size: 13px; color: #ffffff !important;">' +
                '<strong><a href="https://www.livroreclamacoes.pt/" target="_blank" style="color: #ffffff !important; text-decoration: underline;">Livro de Reclamações</a> | <a href="https://atronia.eu/privacy-policy/" target="_blank" style="color: #ffffff !important; text-decoration: underline;">Privacy Policy</a></strong>' +
            '</p>' +
        '</div>' +

    '</div>';

    $('#custom-atronia-footer').remove();
    $('body').append(html);

    /* BOTÕES FLUTUANTES */
    var floatingNav = $('<div id="atronia-floating-nav" style="display:none; position:fixed; bottom:40px; right:40px; display:flex; gap:12px; z-index:9999; align-items:center;"></div>');
    var backToTop = $('<div id="back-to-top" style="width:50px; height:50px; background-color:#BFFF00; color:#000000; border-radius:50%; text-align:center; line-height:50px; font-size:24px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:all 0.3s ease;">↑</div>');
    var siteBtn = $('<a href="https://atronia.eu/" target="_blank" style="text-decoration:none;"><div style="height:50px; padding:0 25px; background-color:#BFFF00; color:#000000; border-radius:25px; line-height:50px; font-weight:bold; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.3); cursor:pointer; transition:all 0.3s ease; font-family:\'Rubik\', sans-serif;">atronia.eu</div></a>');

    floatingNav.append(backToTop).append(siteBtn);
    $('body').append(floatingNav);

    $(window).scroll(function() {
        if ($(window).scrollTop() > 300) { floatingNav.fadeIn().css('display', 'flex'); } else { floatingNav.fadeOut(); }
    });

    backToTop.click(function() { $('html, body').animate({scrollTop: 0}, 600); });
    $('#atronia-floating-nav > a > div, #back-to-top').hover(
        function() { $(this).css({ 'transform': 'scale(1.1)', 'background-color': '#A0D500' }); },
        function() { $(this).css({ 'transform': 'scale(1.0)', 'background-color': '#BFFF00' }); }
    );
});

/*FIM DO FOOTER*/




/* Botões Flutuantes: Voltar ao Topo (Esquerda) + Website (Direita) */
var floatingNav = $('<div id="atronia-floating-nav" style="display:none; position:fixed; bottom:40px; right:40px; display:flex; gap:12px; z-index:9999; align-items:center;"></div>');

// 1. Botão de Topo (Agora configurado para aparecer primeiro na fila)
var backToTop = $('<div id="back-to-top" style="width:50px; height:50px; background-color:#BFFF00; color:#000000; border-radius:50%; text-align:center; line-height:50px; font-size:24px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:all 0.3s ease;">↑</div>');

// 2. Botão do Website
var siteBtn = $('<a href="https://atronia.eu/" target="_blank" style="text-decoration:none;">' +
    '<div style="height:50px; padding:0 25px; background-color:#BFFF00; color:#000000; border-radius:25px; line-height:50px; font-weight:bold; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.3); cursor:pointer; transition:all 0.3s ease; font-family:\'Rubik\', sans-serif;">' +
        'atronia.eu' +
    '</div>' +
'</a>');

// Montagem: Primeiro o backToTop, depois o siteBtn
floatingNav.append(backToTop).append(siteBtn);
$('body').append(floatingNav);

// Lógica de Scroll
$(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
        floatingNav.fadeIn().css('display', 'flex');
    } else {
        floatingNav.fadeOut();
    }
});

// Ação de Clique
backToTop.click(function() {
    $('html, body').animate({scrollTop: 0}, 600);
});

// Efeito de Hover
$('#atronia-floating-nav > a > div, #back-to-top').hover(
    function() { 
        $(this).css({ 'transform': 'scale(1.1)', 'background-color': '#A0D500' }); 
    },
    function() { 
        $(this).css({ 'transform': 'scale(1.0)', 'background-color': '#BFFF00' }); 
    }
);


// 4. GOOGLE ANALYTICS (Fora do $(function) para carregar logo)
var gaScript = document.createElement('script');
gaScript.src = "https://www.googletagmanager.com/gtag/js?id=G-MX174P23PW";
gaScript.async = true;
document.head.appendChild(gaScript);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MX174P23PW');