MediaWiki:Common.js: mudanças entre as edições
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 | ||
======================================================= */ | ======================================================= */ | ||
/ | 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); | |||
}); | |||
}); | }); | ||
/* ======================================================= | /* ======================================================= | ||
| 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';
});
});
});