110 lines
3.5 KiB
JavaScript
110 lines
3.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchInput = document.getElementById('blog-search');
|
|
const searchClear = document.getElementById('search-clear');
|
|
const categoryBtns = document.querySelectorAll('.category-btn');
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const resetBtn = document.getElementById('reset-filters');
|
|
const resultsCount = document.getElementById('results-count');
|
|
const emptyState = document.getElementById('empty-state');
|
|
|
|
const allCards = document.querySelectorAll('.blog-card, .featured-card');
|
|
let activeCategory = 'all';
|
|
let activeFilter = 'all';
|
|
let searchQuery = '';
|
|
|
|
function filterArticles() {
|
|
let visibleCount = 0;
|
|
|
|
allCards.forEach(card => {
|
|
const categories = card.dataset.categories || '';
|
|
const isFeatured = card.dataset.featured === 'true';
|
|
const title = card.querySelector('.featured-title, .card-title')?.textContent.toLowerCase() || '';
|
|
const excerpt = card.querySelector('.featured-excerpt, .card-excerpt')?.textContent.toLowerCase() || '';
|
|
|
|
// 1. Filtro de categoría
|
|
const matchCategory = activeCategory === 'all' || categories.includes(activeCategory);
|
|
|
|
// 2. Filtro de tipo (Todos / Destacados)
|
|
const matchFilter = activeFilter === 'all' || (activeFilter === 'destacados' && isFeatured);
|
|
|
|
// 3. Filtro de búsqueda
|
|
const matchSearch = searchQuery === '' || title.includes(searchQuery) || excerpt.includes(searchQuery);
|
|
|
|
if (matchCategory && matchFilter && matchSearch) {
|
|
card.style.display = 'flex';
|
|
visibleCount++;
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Actualizar contador y estado vacío
|
|
if (resultsCount) {
|
|
resultsCount.innerHTML = `Mostrando <strong>${visibleCount}</strong> artículo${visibleCount !== 1 ? 's' : ''}`;
|
|
}
|
|
|
|
if (emptyState) {
|
|
emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
|
|
}
|
|
|
|
// Mostrar/ocultar botón de limpiar búsqueda
|
|
if (searchClear) {
|
|
searchClear.classList.toggle('visible', searchQuery.length > 0);
|
|
}
|
|
}
|
|
|
|
// Event Listeners
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', (e) => {
|
|
searchQuery = e.target.value.toLowerCase().trim();
|
|
filterArticles();
|
|
});
|
|
}
|
|
|
|
if (searchClear) {
|
|
searchClear.addEventListener('click', () => {
|
|
searchInput.value = '';
|
|
searchQuery = '';
|
|
searchInput.focus();
|
|
filterArticles();
|
|
});
|
|
}
|
|
|
|
categoryBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
categoryBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
activeCategory = btn.dataset.category;
|
|
filterArticles();
|
|
});
|
|
});
|
|
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
filterBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
activeFilter = btn.dataset.filter;
|
|
filterArticles();
|
|
});
|
|
});
|
|
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', () => {
|
|
activeCategory = 'all';
|
|
activeFilter = 'all';
|
|
searchQuery = '';
|
|
if (searchInput) searchInput.value = '';
|
|
|
|
categoryBtns.forEach(b => b.classList.remove('active'));
|
|
document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
|
|
|
|
filterBtns.forEach(b => b.classList.remove('active'));
|
|
document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
|
|
|
|
filterArticles();
|
|
});
|
|
}
|
|
|
|
// Ejecutar al inicio
|
|
filterArticles();
|
|
}); |