'">`
: `
`;
return `
${imageContent}
${news.category}
${formatDate(news.date)}
${news.title}
${news.excerpt}
Read More
`;
}
function renderNews(){
const wrapper = document.getElementById('newsScrollWrapper');
const sorted = [...newsData].sort((a,b)=> new Date(b.date) - new Date(a.date));
wrapper.innerHTML = sorted.map(createCompactNewsCard).join('');
}
function setupScrolling(){
const wrapper = document.getElementById('newsScrollWrapper');
const prevBtn = document.getElementById('scrollPrev');
const nextBtn = document.getElementById('scrollNext');
prevBtn.type = 'button'; nextBtn.type = 'button';
prevBtn.setAttribute('aria-controls','newsScrollWrapper');
nextBtn.setAttribute('aria-controls','newsScrollWrapper');
const getScrollStep = () => {
const card = wrapper.querySelector('.news-card-compact');
const gap = parseFloat(getComputedStyle(wrapper).gap) || 0;
return card ? card.offsetWidth + gap : Math.round(wrapper.clientWidth * 0.9);
};
const updateButtons = () => {
const maxScroll = wrapper.scrollWidth - wrapper.clientWidth - 1;
prevBtn.disabled = wrapper.scrollLeft <= 0;
nextBtn.disabled = wrapper.scrollLeft >= maxScroll;
};
prevBtn.addEventListener('click', () => {
wrapper.scrollBy({ left: -getScrollStep(), behavior:'smooth' });
});
nextBtn.addEventListener('click', () => {
wrapper.scrollBy({ left: getScrollStep(), behavior:'smooth' });
});
wrapper.addEventListener('scroll', updateButtons);
wrapper.addEventListener('wheel', (e) => {
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
e.preventDefault();
wrapper.scrollBy({ left: e.deltaY > 0 ? getScrollStep() : -getScrollStep(), behavior:'smooth' });
}, { passive:false });
wrapper.tabIndex = 0;
wrapper.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') { e.preventDefault(); wrapper.scrollBy({ left:getScrollStep(), behavior:'smooth' }); }
if (e.key === 'ArrowLeft') { e.preventDefault(); wrapper.scrollBy({ left:-getScrollStep(), behavior:'smooth' }); }
});
const ro = new ResizeObserver(updateButtons);
ro.observe(wrapper);
requestAnimationFrame(updateButtons);
}
function init(){ renderNews(); setupScrolling(); }
document.addEventListener('DOMContentLoaded', init);
