MediaWiki:Common.js

Nota: Após publicar, 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)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

/* =======================================================
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   ======================================================= */
mw.loader.using(['jquery', 'mediawiki.util'], function () {
    $(function() {
        const $wrapper = $('.carousel-wrapper');
        const $items = $('.carousel-item');
        const $next = $('.right-btn');
        const $prev = $('.left-btn');
        
        if (!$wrapper.length) return; // Só executa se o carrossel existir na página

        let current = 0;
        let autoPlayTimer;

        function updateCarousel() {
            // Atualiza a classe ativa para o efeito visual de destaque
            $items.removeClass('active').eq(current).addClass('active');

            const activeItem = $items.get(current);
            const scrollPosition = 
                activeItem.offsetLeft - 
                ($wrapper.width() / 2) + 
                ($(activeItem).outerWidth() / 2);

            $wrapper.stop().animate({
                scrollLeft: scrollPosition
            }, 500);
        }

        // Funções de Navegação
        function moveNext() {
            current = (current + 1) % $items.length;
            updateCarousel();
        }

        function movePrev() {
            current = (current - 1 + $items.length) % $items.length;
            updateCarousel();
        }

        // Eventos de Clique
        $next.on('click', function() {
            stopAutoPlay();
            moveNext();
        });

        $prev.on('click', function() {
            stopAutoPlay();
            movePrev();
        });

        // Auto-Play (4 segundos)
        function startAutoPlay() {
            autoPlayTimer = setInterval(moveNext, 4000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlayTimer);
        }

        // Inicialização
        updateCarousel();
        startAutoPlay();

        // Pausa o carrossel se o mouse estiver em cima
        $wrapper.hover(stopAutoPlay, startAutoPlay);
    });
});


/* =======================================================
   ARVORE HABILIDADE - WIKI EVERLIGHT
   ======================================================= */


document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.skill-card');

    cards.forEach(card => {
        card.addEventListener('click', () => {
            const skillName = card.querySelector('.skill-name').innerText;
            console.log(`Habilidade clicada: ${skillName}`);
            
            // Exemplo de efeito visual simples
            card.style.filter = "brightness(1.2)";
            setTimeout(() => {
                card.style.filter = "brightness(1)";
            }, 150);
        });
    });
});

document.querySelectorAll('.carousel-track').forEach(track => {
  track.addEventListener('mouseenter', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'paused';
    });
  });
  track.addEventListener('mouseleave', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'running';
    });
  });
});







// ========= CARROSSEL AUTOMÁTICO =========
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.everlight-carousel');
    if (!carousel) return;
    
    const wrapper = carousel.querySelector('.carousel-wrapper');
    const leftBtn = carousel.querySelector('.left-btn');
    const rightBtn = carousel.querySelector('.right-btn');
    const items = carousel.querySelectorAll('.carousel-item');
    
    let currentIndex = 0;
    const itemWidth = 240; // Largura aproximada do item + gap
    
    // Função para mover carrossel
    function moveCarousel(direction) {
        const maxIndex = items.length - Math.floor(wrapper.clientWidth / itemWidth);
        
        if (direction === 'left') {
            currentIndex = Math.max(0, currentIndex - 1);
        } else {
            currentIndex = Math.min(maxIndex, currentIndex + 1);
        }
        
        wrapper.scrollTo({
            left: currentIndex * itemWidth,
            behavior: 'smooth'
        });
    }
    
    // Eventos dos botões
    leftBtn.addEventListener('click', () => moveCarousel('left'));
    rightBtn.addEventListener('click', () => moveCarousel('right'));
    
    // Auto-scroll a cada 5 segundos
    let autoScroll = setInterval(() => moveCarousel('right'), 5000);
    
    // Pausa auto-scroll no hover
    carousel.addEventListener('mouseenter', () => clearInterval(autoScroll));
    carousel.addEventListener('mouseleave', () => {
        autoScroll = setInterval(() => moveCarousel('right'), 5000);
    });
});

// ========= EFEITO DE DIGITAÇÃO NO TÍTULO (opcional) =========
document.addEventListener('DOMContentLoaded', function() {
    const title = document.querySelector('.everlight-section-title');
    if (!title) return;
    
    const originalText = title.textContent;
    title.textContent = '';
    
    let i = 0;
    function typeWriter() {
        if (i < originalText.length) {
            title.textContent += originalText.charAt(i);
            i++;
            setTimeout(typeWriter, 50);
        }
    }
    
    // Inicia quando a seção aparece na tela
    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            typeWriter();
            observer.unobserve(title);
        }
    });
    
    observer.observe(title);
});

// ========= CONTADOR ANIMADO NO FOOTER =========
document.addEventListener('DOMContentLoaded', function() {
    // Adiciona estatísticas dinâmicas se houver elementos com classe .stat-number
    const statNumbers = document.querySelectorAll('.stat-number');
    
    statNumbers.forEach(stat => {
        const target = parseInt(stat.getAttribute('data-target') || stat.textContent);
        const duration = 2000;
        const step = Math.ceil(target / (duration / 16));
        let current = 0;
        
        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            stat.textContent = current.toLocaleString();
        }, 16);
    });
});

// ========= TOOLTIPS PARA OS CARDS =========
document.addEventListener('DOMContentLoaded', function() {
    const cards = document.querySelectorAll('.img-hover');
    
    cards.forEach(card => {
        // Adiciona tooltip com o título do link
        const link = card.querySelector('a');
        if (link) {
            const title = link.getAttribute('title') || link.textContent;
            card.setAttribute('title', title);
        }
        
        // Efeito de brilho ao passar o mouse
        card.addEventListener('mouseenter', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const shine = document.createElement('div');
            shine.className = 'card-shine';
            shine.style.cssText = `
                position: absolute;
                top: ${y}px;
                left: ${x}px;
                width: 0;
                height: 0;
                background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
                transform: translate(-50%, -50%);
                pointer-events: none;
                animation: shineExpand 0.6s forwards;
                z-index: 5;
            `;
            
            this.style.position = 'relative';
            this.appendChild(shine);
            
            setTimeout(() => {
                if (shine.parentNode) shine.parentNode.removeChild(shine);
            }, 600);
        });
    });
});

// Adiciona estilo CSS para o efeito de brilho
const shineStyle = document.createElement('style');
shineStyle.textContent = `
@keyframes shineExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}
`;
document.head.appendChild(shineStyle);