...
| Html-bobswift |
|---|
<script>
document.addEventListener('DOMContentLoaded', ev => {
newsContent();
interviewsContent();
window.addEventListener('click', ev => {
if(!ev.target.closest('.sort-select')){
document.querySelectorAll('.sort-select').forEach(select => {
select.setAttribute('aria-expanded', false);
});
}
});
function newsContent(){
const items = [];
const loadMoreBtn = document.querySelector('.articles-wrapper .load-more');
let itemsDisplayed = 0;
let newsList = document.querySelector('.section .news-grid');
const contentByLabel = document.querySelector('.news-cbl .content-by-label');
populateArray();
if(items.length > 5){
loadMoreBtn.style.display = 'flex';
}
// descending order by date
sortFun('desc');
setupSorting();
addDomElements(false);
loadMoreBtn.addEventListener('click', ev => {
ev.preventDefault();
addDomElements(false);
});
// contentByLabel.remove();
// functions
function populateArray(){
console.log(new Date());
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')}`;
console.log(element.querySelector('.details time').innerText);
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;
console.log(arTime);
console.logtypeof(sortableTime));
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 addDomElements(flag){
// if flag = true, it will render elements from 0 to whatever value the itemsDisplayed was
// (if you have clicked the load more button before - pretty much if you have clicked on sort). If false it will
// start from the last itemsDisplayed value
let num = 5;
if(flag){
num = itemsDisplayed;
}
for (let index = 0; index < num; index++) {
let element;
flag ? element = items[index] : element = items[itemsDisplayed];
if(!element){
loadMoreBtn.style.display = 'none';
break;
}
newsList.appendChild(element.arDOMElement);
!flag ? itemsDisplayed++ : null;
}
const rowIndexing = itemsDisplayed % 8;
if(rowIndexing !== 0 && rowIndexing !== 2 && rowIndexing !== 5){
let element = items[itemsDisplayed];
itemsDisplayed++;
!element ? loadMoreBtn.style.display = 'none' : newsList.appendChild(element.arDOMElement);
}
}
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 setupSorting(){
const select = document.querySelector('.articles-wrapper .sort-select');
['click', 'keyup'].forEach(action => {
select.addEventListener(action, ev => {
if(ev.type === 'click' || ev.key === 'Enter'){
const isExpanded = select.getAttribute('aria-expanded') === 'true';
select.setAttribute('aria-expanded', !isExpanded);
}
});
})
const options = select.querySelectorAll('.options-wrapper *[role="option"]');
options.forEach(option => {
['click', 'keyup'].forEach(action => {
option.addEventListener(action, ev => {
if(ev.type === 'click' || ev.key === 'Enter'){
select.querySelector('[aria-selected="true"]').setAttribute('aria-selected', false);
option.setAttribute('aria-selected', true);
select.querySelector('.selected-sort > span').innerText = option.innerText;
sortFun(option.getAttribute('value'));
newsList.innerHTML = '';
addDomElements(true);
}
});
});
});
}
}
function interviewsContent(){
const items = [];
const loadMoreBtn = document.querySelector('.interviews-wrapper .load-more');
let itemsDisplayed = 0;
let interviewsList = document.querySelector('.section .interviews-grid');
const contentByLabel = document.querySelector('.interviews-cbl .content-by-label');
populateArray();
if(items.length > 3){
loadMoreBtn.style.display = 'flex';
}
// descending order by date
sortFun('desc');
setupSorting();
addDomElements(false);
loadMoreBtn.addEventListener('click', ev => {
addDomElements(false);
});
// contentByLabel.remove();
// functions
function populateArray(){
try{
Array.from(contentByLabel.children).forEach(element => {
const interCountry = element.querySelector('.details .exc-country').innerText;
const interName = element.querySelector('.details .exc-name').innerText;
const interProf = element.querySelector('.details .exc-prof').innerText;
const interLink = `https://ec.europa.eu${element.querySelector('.details > a').getAttribute('href')}`;
const interTime = formatTime(element.querySelector('.details time').innerTextgetAttribute('datetime'));
const sortableTime = new Date(element.querySelector('.details time').innerTextgetAttribute('datetime'));
const interPreview = element.querySelector('.details .exc-preview').innerText;
const domElement = document.createElement('div');
domElement.classList.add('interview-item');
domElement.innerHTML = `
<img loading="lazy" class="interview-preview" src="${interPreview}" alt="" aria-hidden="true">
<div class="interview-details">
<h5 class="interview-country">${interCountry}</h5>
<p class="interview-name"><img src="/digital-building-blocks/sites/download/attachments/760938508/ico-person.svg"/> ${interName}</p>
<p class="interview-prof">${interProf}</p>
<a class="interview-link link-cta primary after" href="${interLink}"><span>Read interview</span></a>
</div>
`;
items.push({
interCountry: interCountry,
interName: interName,
interProf: interProf,
interLink: interLink,
interTime: interTime,
sortableTime: sortableTime,
interPreview: interPreview,
interDOMElement: domElement
});
});
}catch(err){}
}
function addDomElements(flag){
// if flag = true, it will render elements from 0 to whatever value the itemsDisplayed was
// (if you have clicked the load more button before - pretty much if you have clicked on sort). If false it will
// start from the last itemsDisplayed value
let num = 3;
if(flag){
num = itemsDisplayed;
}
for (let index = 0; index < num; index++) {
let element = items[itemsDisplayed];
if(flag){
element = items[index];
}
if(!element){
loadMoreBtn.style.display = 'none';
break;
}
interviewsList.appendChild(element.interDOMElement);
if(!flag){
itemsDisplayed++;
}
}
}
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 setupSorting(){
const select = document.querySelector('.interviews-wrapper .sort-select');
['click', 'keyup'].forEach(action => {
select.addEventListener(action, ev => {
if(ev.type === 'click' || ev.key === 'Enter'){
const isExpanded = select.getAttribute('aria-expanded') === 'true';
select.setAttribute('aria-expanded', !isExpanded);
}
});
});
const options = select.querySelectorAll('.options-wrapper *[role="option"]');
options.forEach(option => {
['click', 'keyup'].forEach(action => {
option.addEventListener(action, ev => {
if(ev.type === 'click' || ev.key === 'Enter'){
select.querySelector('[aria-selected="true"]').setAttribute('aria-selected', false);
option.setAttribute('aria-selected', true);
select.querySelector('.selected-sort > span').innerText = option.innerText;
sortFun(option.getAttribute('value'));
interviewsList.innerHTML = '';
addDomElements(true);
}
});
});
});
}
}
});
</script> |
...