MediaWiki:Common.js

Nota: Após salvar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Internet Explorer: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
• Opera: Vá para Menu → Configurações (Opera → Preferencias no Mac) e depois para Privacidade e Segurança → Limpar dados de navegação → Imagens e arquivos em cache.

/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */

$(function() {
    // Cria o botão scroll-to-top button
    var $botaoTopo = $('<div id="botaoTopo">⬆️ Topo</div>').css({
        display: "none",
        position: "fixed",
        bottom: "85px", // <-- distância do roda pé (~85px)
        right: "20px",
        padding: "10px 15px",
        background: "#9bbeab",
        color: "#000",
        "border-radius": "8px",
        cursor: "pointer",
        "box-shadow": "0 2px 6px rgba(0,0,0,0.3)",
        "font-weight": "bold",
        "z-index": "9999"
    }).appendTo("body");

    // Mostrar/esconder com base no scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > $(document).height() / 2) {
            $botaoTopo.fadeIn();
        } else {
            $botaoTopo.fadeOut();
        }
    });

    // Ação ao clicar
    $botaoTopo.click(function() {
        $("html, body").animate({scrollTop: 0}, 500);
        return false;
    });
});

/* ═══════════════════════════════════════════
   MICROPÉDIA BRASIL — Common.js
   Melhorias de UX progressivas
   ═══════════════════════════════════════════ */

jQuery(document).ready(function ($) {

    /* ── 1. TICKER SUAVE
       O letreiro usa marquee nativo, mas vamos garantir
       que ele tenha a classe e o estilo corretos ── */
    $('marquee').each(function () {
        $(this).closest('div, p')
            .addClass('LetreiroModern')
            .css({ 'border-radius': '6px', 'overflow': 'hidden' });
    });

    /* ── 2. CARDS — adiciona border-radius via JS
       como fallback para navegadores que ignoram
       border-radius em <table> ── */
    $('table.MainPageBG.mph-card, table.mph-card').each(function () {
        $(this).css({
            'border-radius': '10px',
            'overflow': 'hidden',
            'border-collapse': 'separate'
        });
    });

    /* ── 3. SMOOTH SCROLL para links internos ── */
    $('a[href^="#"]').on('click', function (e) {
        var target = $(this.getAttribute('href'));
        if (target.length) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: target.offset().top - 20 }, 350);
        }
    });

    /* ── 4. LINKS EXTERNOS — abre em nova aba ── */
    $('a[href^="http"]').not('a[href*="' + window.location.hostname + '"]').each(function () {
        $(this).attr('target', '_blank').attr('rel', 'noopener noreferrer');
    });

    /* ── 5. DESTAQUE NA BUSCA
       Sublinha o termo buscado nas páginas de resultado ── */
    var urlParams = new URLSearchParams(window.location.search);
    var searchTerm = urlParams.get('search');
    if (searchTerm && $('.searchresult, #mw-content-text').length) {
        /* highlight leve, sem quebrar links */
        var regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
        $('#mw-content-text p, .searchresult').each(function () {
            if ($(this).find('a, input, button').length === 0) {
                $(this).html(
                    $(this).html().replace(
                        regex,
                        '<mark style="background:#ffdd75;color:#3a2e00;border-radius:3px;padding:0 2px;">$1</mark>'
                    )
                );
            }
        });
    }

    /* ── 6. BOTÃO "VOLTAR AO TOPO" ── */
    if ($('body').height() > 800) {
        var $btn = $('<button id="back-to-top" title="Voltar ao topo">▲</button>').css({
            position:   'fixed',
            bottom:     '20px',
            right:      '20px',
            background: '#9bbeab',
            color:      '#1a3a28',
            border:     '1px solid #82a895',
            borderRadius: '50%',
            width:      '36px',
            height:     '36px',
            fontSize:   '14px',
            fontWeight: 'bold',
            cursor:     'pointer',
            display:    'none',
            zIndex:     999,
            lineHeight: '34px',
            textAlign:  'center',
            boxShadow:  '0 2px 6px rgba(0,0,0,0.18)'
        });
        $('body').append($btn);

        $(window).on('scroll', function () {
            $btn.toggle($(this).scrollTop() > 300);
        });
        $btn.on('click', function () {
            $('html, body').animate({ scrollTop: 0 }, 350);
        });
    }

    /* ── 7. EFEITO HOVER nas imagens dos artigos ── */
    $('#mw-content-text img, .thumbimage').css({
        'border-radius': '6px',
        'transition':    'transform 0.2s ease, box-shadow 0.2s ease'
    }).on('mouseenter', function () {
        $(this).css({ 'transform': 'scale(1.02)', 'box-shadow': '0 4px 12px rgba(0,0,0,0.15)' });
    }).on('mouseleave', function () {
        $(this).css({ 'transform': 'scale(1)', 'box-shadow': 'none' });
    });

});