...
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(){ 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').innerText); const sortableTime = new Date(element.querySelector('.details time').innerText); const arPreview = element.querySelector('.details .exc-preview').innerText; console.log(typeof(arTimesortableTime)); 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').innerText); const sortableTime = new Date(element.querySelector('.details time').innerText); 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> |
...