MediaWiki:Common.js: mudanças entre as edições

De Farmland
Ir para navegação Ir para pesquisar
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
Etiqueta: Reversão manual
Linha 2: Linha 2:
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   ======================================================= */
   ======================================================= */
/* Certifique-se de que as bibliotecas GSAP e Lenis estão carregadas na sua Wiki */
mw.loader.using(['jquery', 'mediawiki.util'], function () {
document.addEventListener('DOMContentLoaded', () => {
    $(function() {
  // 1. Smooth Scroll (Lenis)
        const $wrapper = $('.carousel-wrapper');
  const lenis = new Lenis();
        const $items = $('.carousel-item');
  function raf(time) {
        const $next = $('.right-btn');
    lenis.raf(time);
        const $prev = $('.left-btn');
    requestAnimationFrame(raf);
       
  }
        if (!$wrapper.length) return; // Só executa se o carrossel existir na página
  requestAnimationFrame(raf);
 
        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);
        }


  // 2. Efeito de rotação da Seção 2 (A imagem que "levanta")
        // Inicialização
  gsap.to('.image-motion', {
        updateCarousel();
    transform: 'rotatex(0deg)',
        startAutoPlay();
    scrollTrigger: {
      trigger: '.section2',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });


  // 3. Animação de entrada dos cards na Seção 3
        // Pausa o carrossel se o mouse estiver em cima
  gsap.from('.wiki-carousel-item', {
        $wrapper.hover(stopAutoPlay, startAutoPlay);
    opacity: 0,
     });
    y: 50,
    stagger: 0.1,
     duration: 0.8,
    scrollTrigger: {
      trigger: '.wiki-loop-container',
      start: 'top 80%'
    }
  });
});
});


/* =======================================================
/* =======================================================
Linha 56: Linha 90:
         });
         });
     });
     });
});
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';
    });
  });
});
});

Edição das 13h05min de 21 de janeiro de 2026

/* =======================================================
   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';
    });
  });
});