...
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').innerText);
const sortableTime = new Date(element.querySelector('.details time').innerText);
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> |
...