document.addEventListener('DOMContentLoaded', function() {
const pills = document.querySelectorAll('.filter-pills a');
pills.forEach(pill => {
pill.addEventListener('click', function(e) {
e.preventDefault();
const url = this.href.split('#')[0];
const currentPill = this;
// Находим контейнер с карточками (ищем ближайший .feed-list или #feed-content)
const section = currentPill.closest('section');
const container = section.querySelector('.feed-list') || section.querySelector('#feed-content');
if (!container) return;
// Обновляем активный класс
section.querySelectorAll('.filter-pills a').forEach(p => p.classList.remove('active'));
currentPill.classList.add('active');
// Плавное затухание
container.style.opacity = '0.4';
container.style.transition = 'opacity 0.2s ease';
fetch(url)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Ищем такой же контейнер в загруженной странице
const newSection = doc.querySelector('section');
const newContainer = newSection ? (newSection.querySelector('.feed-list') || newSection.querySelector('#feed-content')) : null;
if (newContainer) {
container.innerHTML = newContainer.innerHTML;
container.style.opacity = '1';
window.history.pushState({}, '', url);
} else {
container.style.opacity = '1';
window.location.href = url; // Fallback: обычная перезагрузка, если что-то пошло не так
}
})
.catch(() => {
container.style.opacity = '1';
window.location.href = url;
});
});
});
});