MediaWiki:Common.js: Difference between revisions

$( function () {
	document.querySelectorAll( '.medico-desamb-titulo, .medico-faq-q' ).forEach( function ( el ) {
		el.addEventListener( 'click', function () {
			var bloco = el.closest( '.medico-desamb, .medico-faq' );
			if ( bloco ) bloco.classList.toggle( 'fechado' );
		} );
	} );
} );
/* ===== Banner Hero Interativo (Canvas Partículas) ===== */

// Espera a página carregar completamente
$(document).ready(function() {
    // Tenta encontrar o elemento onde o canvas será inserido
    var heroContainer = $('.wiki-hero-canvas-wrapper');
    
    // Se o elemento não existir nesta página, não faz nada
    if (!heroContainer.length) return;

    // Cria o elemento Canvas e adiciona ao container
    var canvas = document.createElement('canvas');
    canvas.id = 'hero-particle-canvas';
    heroContainer.append(canvas);
    var ctx = canvas.getContext('2d');

    // Configurações e Variáveis
    var particles = [];
    var particleCount = 100; // Quantidade de luzinhas (partículas)
    var maxDistance = 100; // Distância máxima para conectar as linhas
    var mouse = { x: null, y: null, radius: 150 }; // Propriedades do mouse

    // Redimensiona o canvas para preencher o container
    function setCanvasSize() {
        canvas.width = heroContainer.width();
        canvas.height = heroContainer.height();
    }

    setCanvasSize();
    $(window).on('resize', setCanvasSize);

    // Rastreia o movimento do mouse dentro do banner
    heroContainer.on('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

    // Zera o mouse quando ele sai do banner
    heroContainer.on('mouseout', function() {
        mouse.x = null;
        mouse.y = null;
    });

    // Classe para criar cada Partícula/Luzinha
    class Particle {
        constructor(x, y, dx, dy, size, color) {
            this.x = x || Math.random() * canvas.width;
            this.y = y || Math.random() * canvas.height;
            this.dx = dx || (Math.random() - 0.5) * 1.5; // Velocidade X
            this.dy = dy || (Math.random() - 0.5) * 1.5; // Velocidade Y
            this.size = size || Math.random() * 2 + 1; // Tamanho
            this.color = color || 'rgba(37, 99, 235, 0.7)'; // Cor azul translúcida
        }

        // Desenha a partícula
        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.random() * Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        }

        // Atualiza a posição e reage ao mouse
        update() {
            // Verifica limites do canvas e rebate
            if (this.x > canvas.width || this.x < 0) this.dx = -this.dx;
            if (this.y > canvas.height || this.y < 0) this.dy = -this.dy;

            // Move a partícula
            this.x += this.dx;
            this.y += this.dy;

            // Interação com o Mouse (faz as partículas fugirem)
            if (mouse.x != null && mouse.y != null) {
                let dxM = this.x - mouse.x;
                let dyM = this.y - mouse.y;
                let distanceMouse = Math.sqrt(dxM * dxM + dyM * dyM);
                
                if (distanceMouse < mouse.radius + this.size) {
                    if (mouse.x < this.x && this.x < canvas.width - this.size * 10) this.x += 2;
                    if (mouse.x > this.x && this.x > this.size * 10) this.x -= 2;
                    if (mouse.y < this.y && this.y < canvas.height - this.size * 10) this.y += 2;
                    if (mouse.y > this.y && this.y < canvas.height - this.size * 10) this.y -= 2;
                }
            }

            this.draw();
        }
    }

    // Inicializa o array de partículas
    function initParticles() {
        particles = [];
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }
    }

    // Loop de animação
    function animate() {
        // Limpa o canvas para o próximo quadro
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Atualiza e desenha cada partícula
        for (let i = 0; i < particles.length; i++) {
            particles[i].update();
            
            // Desenha linhas entre as partículas próximas
            for (let j = i; j < particles.length; j++) {
                let dxP = particles[i].x - particles[j].x;
                let dyP = particles[i].y - particles[j].y;
                let distance = Math.sqrt(dxP * dxP + dyP * dyP);

                if (distance < maxDistance) {
                    // Define a opacidade com base na distância
                    let opacity = 1 - (distance / maxDistance);
                    ctx.strokeStyle = 'rgba(37, 99, 235, ' + opacity * 0.3 + ')';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }
        
        // Chama recursivamente para o próximo quadro
        requestAnimationFrame(animate);
    }

    // Começa a mágica
    initParticles();
    animate();
});