__I18N_スタイル_6__
(function () {
const tabs = Array.from(document.querySelectorAll('.news-tab'));
const filterOptions = Array.from(document.querySelectorAll('.news-filter-option'));
const filterBtn = document.getElementById('news-filter-toggle');
const filterPopover = document.getElementById('news-filter-popover');
const sortBtn = document.getElementById('news-sort-toggle');
const grid = document.querySelector('.post-grid');
if (!grid) {
return;
}
let cards = Array.from(grid.querySelectorAll('.post-card'));
let sortDirection = sortBtn ? sortBtn.getAttribute('data-direction') || 'desc' : 'desc';
const setActiveFilter = (value) => {
tabs.forEach(tab => tab.classList.toggle('is-active', tab.dataset.filter === value));
filterOptions.forEach(option => option.classList.toggle('is-active', option.dataset.filter === value));
};
const applyFilter = (value) => {
cards.forEach(card => {
const topic = card.dataset.topic || 'all';
card.hidden = value !== 'all' && topic !== value;
});
};
const sortCards = (direction) => {
const sortedCards = [...cards].sort((a, b) => {
const aDate = new Date(a.dataset.date || 0);
const bDate = new Date(b.dataset.date || 0);
return direction === 'asc' ? aDate - bDate : bDate - aDate;
});
sortedCards.forEach(card => grid.appendChild(card));
cards = sortedCards;
};
tabs.forEach(tab => {
tab.addEventListener('click', event => {
event.preventDefault();
const filterValue = tab.dataset.filter || 'all';
setActiveFilter(filterValue);
applyFilter(filterValue);
});
});
filterOptions.forEach(option => {
option.addEventListener('click', () => {
const filterValue = option.dataset.filter || 'all';
setActiveFilter(filterValue);
applyFilter(filterValue);
if (filterPopover) {
filterPopover.classList.remove('is-open');
}
if (filterBtn) {
filterBtn.setAttribute('aria-expanded', 'false');
}
});
});
if (filterBtn && filterPopover) {
const closePopover = (event) => {
if (!filterPopover.contains(event.target) && !filterBtn.contains(event.target)) {
filterPopover.classList.remove('is-open');
filterBtn.setAttribute('aria-expanded', 'false');
document.removeEventListener('click', closePopover);
document.removeEventListener('keydown', handleEscape, true);
}
};
const handleEscape = (event) => {
if (event.key === 'Escape') {
filterPopover.classList.remove('is-open');
filterBtn.setAttribute('aria-expanded', 'false');
document.removeEventListener('click', closePopover);
document.removeEventListener('keydown', handleEscape, true);
}
};
filterBtn.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
const isOpen = filterPopover.classList.toggle('is-open');
filterBtn.setAttribute('aria-expanded', String(isOpen));
if (isOpen) {
document.addEventListener('click', closePopover);
document.addEventListener('keydown', handleEscape, true);
} else {
document.removeEventListener('click', closePopover);
document.removeEventListener('keydown', handleEscape, true);
}
});
}
if (sortBtn) {
sortBtn.addEventListener('click', () => {
sortDirection = sortDirection === 'desc' ? 'asc' : 'desc';
sortBtn.setAttribute('data-direction', sortDirection);
sortBtn.classList.toggle('is-asc', sortDirection === 'asc');
sortCards(sortDirection);
});
}
})();