...
HTML |
---|
<script> document.addEventListener('DOMContentLoaded', ev => { const items = []; const contentByLabel = document.querySelector('#latest-news .content-by-label'); const newsList = document.querySelector('#latest-news .news-grid'); populateArray(); sortFun('desc'); addDomElements(); contentByLabel.remove(); // functions ----------------------------- function populateArray() { Array.from(contentByLabel.children).forEach(element => { try { const arTitle = element.querySelector('.details > a').innerText; const arLink = `https://ec.europa.eu${element.querySelector('.details > a').getAttribute('href')}`; const arTime = formatTime(element.querySelector('.details time').innerTextgetAttribute('datetime')); const sortableTime = new Date(element.querySelector('.details time').innerTextgetAttribute('datetime')); const arPreview = element.querySelector('.details .exc-preview').innerText; const domElement = document.createElement('div'); domElement.classList.add('news-item'); domElement.innerHTML = ` <img loading="lazy" class="article-preview" src="${arPreview}" alt="" aria-hidden="true"> <div class="article-details"> <h5 class="article-title">${arTitle}</h5> <p class="article-date"><img src="/digital-building-blocks/sites/download/attachments/760938508/ico-date.svg"/> ${arTime}</p> <a class="article-link link-cta primary after" href="${arLink}"><span>Read article</span></a> </div> `; items.push({ arTitle: arTitle, arLink: arLink, arTime: arTime, sortableTime: sortableTime, arPreview: arPreview, arDOMElement: domElement }); } catch (err) { } }); } function formatTime(timetxt) { const date = new Date(timetxt); const monthName = date.toLocaleString('en-US', { month: 'long' }); const datetxt = `${date.getDate()} ${monthName} ${date.getFullYear()}`; return datetxt; } function sortFun(type) { if (type === 'desc') { items.sort((a, b) => { return a.sortableTime < b.sortableTime ? 1 : -1 }); return; } items.sort((a, b) => { return a.sortableTime > b.sortableTime ? 1 : -1 }); } function addDomElements() { let num = 3; for (let index = 0; index < num; index++) { let element = items[index]; if(!element) break; newsList.appendChild(element.arDOMElement); } } }); </script> |
...