|
|
| Linha 103: |
Linha 103: |
| }); | | }); |
| }); | | }); |
| });
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| // =========================
| |
| // FUNCIONALIDADE DOS BOTÕES
| |
| // =========================
| |
|
| |
| document.addEventListener('DOMContentLoaded', function() {
| |
| const guideItems = document.querySelectorAll('.hr-guide-item');
| |
| const filterButtons = document.querySelectorAll('.filter-btn');
| |
| const searchInput = document.querySelector('.search-input');
| |
| const searchClear = document.querySelector('.search-clear');
| |
| const controlButtons = {
| |
| shuffle: document.getElementById('shuffleGuides'),
| |
| expand: document.getElementById('expandAll'),
| |
| collapse: document.getElementById('collapseAll'),
| |
| popular: document.getElementById('showPopular'),
| |
| icons: document.getElementById('toggleIcons')
| |
| };
| |
| const pageButtons = document.querySelectorAll('.page-btn, .page-number');
| |
|
| |
| // 1. FILTRAGEM
| |
| filterButtons.forEach(button => {
| |
| button.addEventListener('click', function() {
| |
| // Remove active de todos
| |
| filterButtons.forEach(btn => btn.classList.remove('active'));
| |
| // Adiciona active no clicado
| |
| this.classList.add('active');
| |
|
| |
| const filter = this.dataset.filter;
| |
| filterGuides(filter);
| |
| });
| |
| });
| |
|
| |
| function filterGuides(filter) {
| |
| guideItems.forEach(item => {
| |
| const category = item.dataset.category;
| |
| const isPopular = item.dataset.popular === 'true';
| |
| const isUpdated = item.dataset.updated === 'true';
| |
|
| |
| let shouldShow = true;
| |
|
| |
| switch(filter) {
| |
| case 'all':
| |
| shouldShow = true;
| |
| break;
| |
| case 'progression':
| |
| shouldShow = category === 'progression';
| |
| break;
| |
| case 'systems':
| |
| shouldShow = category === 'systems';
| |
| break;
| |
| case 'economy':
| |
| shouldShow = category === 'economy';
| |
| break;
| |
| case 'content':
| |
| shouldShow = category === 'content';
| |
| break;
| |
| case 'popular':
| |
| shouldShow = isPopular;
| |
| break;
| |
| case 'updated':
| |
| shouldShow = isUpdated;
| |
| break;
| |
| }
| |
|
| |
| if (shouldShow) {
| |
| item.classList.remove('hidden');
| |
| setTimeout(() => {
| |
| item.classList.add('highlighted');
| |
| setTimeout(() => item.classList.remove('highlighted'), 300);
| |
| }, 100);
| |
| } else {
| |
| item.classList.add('hidden');
| |
| }
| |
| });
| |
| }
| |
|
| |
| // 2. BUSCA EM TEMPO REAL
| |
| searchInput.addEventListener('input', function() {
| |
| const term = this.value.toLowerCase().trim();
| |
|
| |
| guideItems.forEach(item => {
| |
| const link = item.querySelector('.guide-link');
| |
| const text = link.textContent.toLowerCase();
| |
|
| |
| if (term === '' || text.includes(term)) {
| |
| item.classList.remove('hidden');
| |
| if (term !== '') {
| |
| item.classList.add('highlighted');
| |
| } else {
| |
| item.classList.remove('highlighted');
| |
| }
| |
| } else {
| |
| item.classList.add('hidden');
| |
| item.classList.remove('highlighted');
| |
| }
| |
| });
| |
| });
| |
|
| |
| searchClear.addEventListener('click', function() {
| |
| searchInput.value = '';
| |
| searchInput.dispatchEvent(new Event('input'));
| |
| });
| |
|
| |
| // 3. EMBARALHAR GUIAS
| |
| controlButtons.shuffle.addEventListener('click', function() {
| |
| const grid = document.querySelector('.hr-guides-grid');
| |
| const items = Array.from(guideItems);
| |
|
| |
| // Embaralha array
| |
| for (let i = items.length - 1; i > 0; i--) {
| |
| const j = Math.floor(Math.random() * (i + 1));
| |
| [items[i], items[j]] = [items[j], items[i]];
| |
| }
| |
|
| |
| // Remove e readiciona em ordem embaralhada
| |
| items.forEach(item => {
| |
| grid.appendChild(item);
| |
| item.classList.add('highlighted');
| |
| setTimeout(() => item.classList.remove('highlighted'), 500);
| |
| });
| |
|
| |
| // Efeito visual
| |
| this.classList.add('shuffling');
| |
| setTimeout(() => this.classList.remove('shuffling'), 1000);
| |
| });
| |
|
| |
| // 4. MOSTRAR POPULARES
| |
| controlButtons.popular.addEventListener('click', function() {
| |
| filterButtons.forEach(btn => btn.classList.remove('active'));
| |
| document.querySelector('[data-filter="popular"]').classList.add('active');
| |
| filterGuides('popular');
| |
| });
| |
|
| |
| // 5. TOGGLE ÍCONES
| |
| controlButtons.icons.addEventListener('click', function() {
| |
| const icons = document.querySelectorAll('.hr-icon');
| |
| const areHidden = icons[0].style.opacity === '0';
| |
|
| |
| icons.forEach(icon => {
| |
| icon.style.opacity = areHidden ? '1' : '0';
| |
| icon.style.transform = areHidden ? 'scale(1)' : 'scale(0)';
| |
| });
| |
|
| |
| this.querySelector('.control-icon').textContent = areHidden ? '👁️' : '👁️🗨️';
| |
| });
| |
|
| |
| // 6. PAGINAÇÃO (exemplo básico)
| |
| pageButtons.forEach(button => {
| |
| button.addEventListener('click', function() {
| |
| if (this.classList.contains('active') || this.disabled) return;
| |
|
| |
| // Atualiza página ativa
| |
| document.querySelectorAll('.page-number.active').forEach(el => {
| |
| el.classList.remove('active');
| |
| });
| |
|
| |
| if (this.classList.contains('page-number')) {
| |
| this.classList.add('active');
| |
| }
| |
|
| |
| // Aqui você implementaria a lógica de paginação real
| |
| // Por enquanto apenas efeito visual
| |
| guideItems.forEach(item => {
| |
| item.classList.add('hidden');
| |
| setTimeout(() => item.classList.remove('hidden'), 300);
| |
| });
| |
| });
| |
| });
| |
|
| |
| // 7. CONTADOR DINÂMICO
| |
| function updateGuideCount() {
| |
| const visibleGuides = Array.from(guideItems).filter(item =>
| |
| !item.classList.contains('hidden')
| |
| ).length;
| |
|
| |
| document.querySelector('.stat-count').textContent = visibleGuides;
| |
| }
| |
|
| |
| // Atualiza contador em todas as interações
| |
| const observer = new MutationObserver(updateGuideCount);
| |
| guideItems.forEach(item => {
| |
| observer.observe(item, {
| |
| attributes: true,
| |
| attributeFilter: ['class']
| |
| });
| |
| });
| |
|
| |
| // Inicialização
| |
| updateGuideCount();
| |
| }); | | }); |
/* =======================================================
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';
});
});
});