document.addEventListener("DOMContentLoaded", () => { let cachedArticlesHtml = null; let isFetching = false; const renderTopline = (container) => { container.innerHTML = `

Topline

${cachedArticlesHtml}

`; }; const replaceWidget = () => { const leadSection = document.querySelector('section.app-main-container'); if (leadSection) { const leadWidgetGrid = leadSection.querySelector('.widget-divided'); if (leadWidgetGrid) { const cells = Array.from(leadWidgetGrid.children).filter(el => el.classList.contains('widget-divided__cell')); const rightSideCell = cells[2]; if (rightSideCell && !rightSideCell.dataset.replaced) { rightSideCell.dataset.replaced = 'true'; if (cachedArticlesHtml) { renderTopline(rightSideCell); } else { rightSideCell.innerHTML = '

'; if (!isFetching) { isFetching = true; fetch('https://cms-staging.thebeyondheadlines.com/api/pages/home-topline/widgets/') .then(res => res.json()) .then(json => { if (json && json.data && json.data.layout && json.data.layout[0] && json.data.layout[0].data && json.data.layout[0].data.items) { const items = json.data.layout[0].data.items; cachedArticlesHtml = items.map((news, index) => { const primaryCategory = news.categories ? news.categories.filter((category) => category.is_primary === true)[0] : null; const shoulderText = primaryCategory ? primaryCategory.name : ''; return `

${index + 1}

${shoulderText ? `${shoulderText} / ` : ''}${news.headline}

`; }).join(''); // Re-query in case DOM changed during fetch const currentSection = document.querySelector('section.app-main-container'); if (currentSection) { const currentGrid = currentSection.querySelector('.widget-divided'); if (currentGrid) { const currentCells = Array.from(currentGrid.children).filter(el => el.classList.contains('widget-divided__cell')); if (currentCells[2]) { currentCells[2].dataset.replaced = 'true'; renderTopline(currentCells[2]); } } } } isFetching = false; }) .catch(err => { console.error("Error fetching topline widgets:", err); isFetching = false; }); } } } } } }; replaceWidget(); const observer = new MutationObserver(() => { replaceWidget(); }); observer.observe(document.body, { childList: true, subtree: true }); });