nosotros + blog en curso

2026-09-20 11:18:14 -03:00
parent 2a0cfbde0e
commit cd67fca3dc
10 changed files with 1649 additions and 310 deletions
@@ -0,0 +1,185 @@
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Blog JS cargado');
+  
+  const searchInput = document.getElementById('blog-search');
+  const searchClear = document.getElementById('search-clear');
+  const blogGrid = document.getElementById('blog-grid');
+  const emptyState = document.getElementById('empty-state');
+  const resultsCount = document.getElementById('results-count');
+  const filtersHeader = document.getElementById('blog-filters-header');
+  
+  if (!searchInput || !blogGrid) {
+    console.error('Faltan elementos del DOM');
+    return;
+  }
+
+  let currentFilters = {
+    search: '',
+    category: 'all',
+    featured: 'all',
+    sort: 'recent'
+  };
+
+  // ===== EFECTO SCROLL EN FILTROS =====
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 100) {
+      filtersHeader.classList.add('is-scrolled');
+    } else {
+      filtersHeader.classList.remove('is-scrolled');
+    }
+  });
+
+  // ===== BUSCADOR =====
+  searchInput.addEventListener('input', (e) => {
+    const value = e.target.value.trim();
+    currentFilters.search = value;
+    
+    if (searchClear) {
+      searchClear.classList.toggle('visible', value.length > 0);
+    }
+    
+    filterArticles();
+  });
+
+  if (searchClear) {
+    searchClear.addEventListener('click', () => {
+      searchInput.value = '';
+      searchClear.classList.remove('visible');
+      currentFilters.search = '';
+      filterArticles();
+      searchInput.focus();
+    });
+  }
+
+  // ===== FILTROS PRINCIPALES =====
+  document.querySelectorAll('.filter-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentFilters.featured = btn.dataset.filter;
+      filterArticles();
+    });
+  });
+
+  // ===== CATEGORÍAS =====
+  document.querySelectorAll('.category-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentFilters.category = btn.dataset.category;
+      filterArticles();
+    });
+  });
+
+  // ===== ORDENAMIENTO =====
+  const sortSelect = document.getElementById('sort-select');
+  if (sortSelect) {
+    sortSelect.addEventListener('change', (e) => {
+      currentFilters.sort = e.target.value;
+      sortArticles();
+    });
+  }
+
+  // ===== RESET =====
+  const resetFilters = document.getElementById('reset-filters');
+  if (resetFilters) {
+    resetFilters.addEventListener('click', () => {
+      currentFilters = { search: '', category: 'all', featured: 'all', sort: 'recent' };
+      searchInput.value = '';
+      searchClear?.classList.remove('visible');
+      
+      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
+      
+      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+      document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
+      
+      if (sortSelect) sortSelect.value = 'recent';
+      
+      filterArticles();
+    });
+  }
+
+  // ===== FUNCIÓN DE FILTRADO =====
+  const filterArticles = () => {
+    const articles = document.querySelectorAll('.blog-card, .featured-card');
+    let visibleCount = 0;
+
+    articles.forEach(article => {
+      const categories = article.dataset.categories || '';
+      const tags = article.dataset.tags || '';
+      const isFeatured = article.dataset.featured === 'true';
+      
+      const title = article.querySelector('.card-title, .featured-title')?.textContent.toLowerCase() || '';
+      const excerpt = article.querySelector('.card-excerpt, .featured-excerpt')?.textContent.toLowerCase() || '';
+      
+      const searchTerm = currentFilters.search.toLowerCase();
+      const matchSearch = searchTerm === '' || 
+        title.includes(searchTerm) || 
+        excerpt.includes(searchTerm) ||
+        categories.toLowerCase().includes(searchTerm) ||
+        tags.toLowerCase().includes(searchTerm);
+      
+      const matchCategory = currentFilters.category === 'all' || 
+        categories.toLowerCase().includes(currentFilters.category.toLowerCase());
+      
+      let matchFeatured = true;
+      if (currentFilters.featured === 'destacados') {
+        matchFeatured = isFeatured;
+      }
+      
+      if (matchSearch && matchCategory && matchFeatured) {
+        article.style.display = '';
+        visibleCount++;
+      } else {
+        article.style.display = 'none';
+      }
+    });
+
+    sortArticles();
+    updateResultsCount(visibleCount);
+    
+    if (emptyState) {
+      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
+    }
+  };
+
+  const sortArticles = () => {
+    const articles = Array.from(document.querySelectorAll('.blog-card'));
+    const container = blogGrid;
+    
+    switch(currentFilters.sort) {
+      case 'recent':
+        articles.sort((a, b) => {
+          const dateA = new Date(a.querySelector('time')?.datetime || 0);
+          const dateB = new Date(b.querySelector('time')?.datetime || 0);
+          return dateB - dateA;
+        });
+        break;
+      case 'alphabetical':
+        articles.sort((a, b) => {
+          const titleA = a.querySelector('.card-title')?.textContent || '';
+          const titleB = b.querySelector('.card-title')?.textContent || '';
+          return titleA.localeCompare(titleB);
+        });
+        break;
+    }
+    
+    articles.forEach(article => container.appendChild(article));
+  };
+
+  const updateResultsCount = (count) => {
+    if (!resultsCount) return;
+    
+    if (count === 0) {
+      resultsCount.innerHTML = 'No se encontraron artículos';
+    } else if (currentFilters.category === 'all' && currentFilters.search === '') {
+      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículos`;
+    } else {
+      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículo${count !== 1 ? 's' : ''}`;
+    }
+  };
+
+  // Inicializar
+  filterArticles();
+});