...
| HTML |
|---|
<script>
$(".smalltext")
.contents()
.filter(function () {
return this.nodeType === 3
})
.remove()
const loaderSection = document.querySelector(".loader")
const articleLatestSection = document.querySelector("#latest-article")
const articlesRestSection = document.querySelector(".rest-av-articles")
articleLatestSection.style.display = "none"
articlesRestSection.style.display = "none"
const allCards = (container, ARTICLE_LABEL) => {
try {
for (const article of container) {
const labelHolders = article.querySelectorAll(".aui-label > a")
const labelList = Array.from(labelHolders)
const labelsContainer = article.querySelector(".labels-container")
const labelNames = isArticleValid(ARTICLE_LABEL, labelList)
setLabels(labelsContainer, labelNames)
const articleLabels = labelsContainer.getAttribute("data-labels")
article.setAttribute("article-tags", articleLabels)
}
} catch (error) {
console.error("An error occurred:", error)
}
}
const isArticleValid = (ARTICLE_LABEL, labelList) => {
const labelNames = labelList.map((label) => label.textContent.trim())
const found = labelNames.some((label) => label === ARTICLE_LABEL)
if (found) {
const index = labelNames.indexOf(ARTICLE_LABEL)
if (index !== -1) {
labelNames.splice(index, 1)
}
}
return labelNames
}
const setLabels = (labelsContainer, labelNames) => {
labelsContainer.setAttribute("data-labels", labelNames.join(","))
for (const val of labelNames) {
if ( val !== 'news') {
const div = document.createElement("div")
const anchor = document.createElement("a")
anchor.setAttribute(
"href",
`https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/articles?category=${val}`
)
anchor.textContent = constructLabel(val)
div.appendChild(anchor)
labelsContainer.appendChild(div)
}
}
}
const constructLabel = (val) => {
let result = null
const storage = [
{ ede: "EDE" },
{ contextbroker: "Context Broker" },
{ bdti: "BDTI" },
{ success_stories: "Success Stories" },
{ earchiving: "eArchiving" },
{ einvoicing: "eInvoicing" },
{ etranslation: "eTranslation" },
{ esignature: "eSignature" },
{ edelivery: "eDelivery" },
{ eid: "eID" },
{ ssi: "SSI (Self-Sovereign Identity)" },
{ degov: "DeGov" },
{ did: "DID" },
{ w3c: "W3C" },
{ dlt: "DLT" },
{ cef: "CEF" },
{ apis: "APIs" },
{ "early-adopters-programme": "Early Adopters programme" },
{ ebsi: "EBSI" },
{ "smart-contracts": "Smart Contracts" },
{ "ebip": "EBIP" },
{ "esspass": "ESSPASS"},
{ "xp-center": 'EBSI Experience Center' },
{ "edic": "EDIC"}
]
storage.find(function (obj) {
const [key, value] = Object.entries(obj)[0]
if (key === val) {
result = value
return true
}
})
if (result === null) {
result = val
.replace(/-/g, " ")
.replace(/\b\w/g, (match) => match.toUpperCase())
}
return result
}
const addHTMLlink = (container) => {
container.forEach((card) => {
const anchorLink = card.querySelector(".details > a").getAttribute("href")
const articleWrapper = card.querySelector(".article-wrapper")
const div = document.createElement("div")
div.classList.add("card-content-footer")
const p = document.createElement("p")
const anchor = document.createElement("a")
anchor.classList.add("link-cta", "text-secondary")
anchor.setAttribute("aria-label", "Read the article")
anchor.setAttribute("href", anchorLink)
const span = document.createElement("span")
span.textContent = "Read the article"
anchor.appendChild(span)
p.appendChild(anchor)
div.appendChild(p)
articleWrapper
? articleWrapper.appendChild(div)
: console.log("Article's pool not found")
})
}
const seperateNewest = (cardArticles, latestArticleContainer) => {
const allArticles = Array.from(cardArticles)
const newestArticle = cardArticles[0]
const newestArticleData2 = newestArticle.cloneNode(true)
const newestArticleData = {
title: newestArticle.querySelector(".ext-article-heading").cloneNode(true),
publication: newestArticle
.querySelector(".article-publication")
.cloneNode(true),
img: newestArticle
.querySelector(".article-preview > img")
.getAttribute("src"),
}
const restArticles = []
for (let i = 0; i < cardArticles.length; i++) {
//i === 0 ? latestArticleContainer.appendChild(cardArticles[i]) : restArticles.push(cardArticles[i])
i === 0
? appendData(latestArticleContainer, cardArticles[i], newestArticleData2)
: restArticles.push(cardArticles[i])
}
const restructuredNewestArticle = document.querySelector(
".content-by-label-ii > li"
)
return { restructuredNewestArticle, restArticles, allArticles }
}
const appendData = (
latestArticleContainer,
firstArticle,
newestArticleData2
) => {
latestArticleContainer.appendChild(newestArticleData2)
firstArticle.remove()
}
const cardArticleModifier = (cardArticles) => {
for (const article of cardArticles) {
const h4 = document.createElement("h4")
const strong = document.createElement("strong")
const anchor = article.querySelector(".ext-article-heading > a")
strong.textContent = constructLabel(anchor.textContent)
h4.appendChild(strong)
anchor.parentNode.replaceChild(h4, anchor)
}
}
const pagination = (cardArticles) => {
const loadCTA = document.querySelector(".loadmore-cta")
const cardsLimit = 8
const showOnLoad = () => {
cardArticles.forEach((article, index) => {
index > cardsLimit
? (article.style.display = "none")
: (article.style.display = "block")
index > cardsLimit
? (loadCTA.style.display = "flex")
: (loadCTA.style.display = "none")
})
}
showOnLoad()
}
const loadNextArticles = () => {
const loadCTA = document.querySelector(".loadmore-cta")
const hiddenCards = Array.from(
document.querySelectorAll(".content-by-label > li")
).filter(function (liElement) {
return window.getComputedStyle(liElement).display === "none"
})
if (hiddenCards.length <= 6) {
loadCTA.style.display = "none"
hiddenCards.forEach((article) => {
article.style.display = "block"
})
} else {
const nextArray = hiddenCards.slice(0, 6)
nextArray.forEach((article) => {
article.style.display = "block"
})
}
}
const articleIds = (cardArticles) => {
const result = []
for (const article of cardArticles) {
const id = article.querySelector(".article-publication").getAttribute("id")
result.push(id)
}
return result
}
document.addEventListener("DOMContentLoaded", function () {
const ARTICLE_LABEL = "newsv2"
const latestArticleContainer = document.querySelector(
"#latest-article > .content-by-label-ii"
)
const cardArticles = document.querySelectorAll(".content-by-label > li")
allCards(cardArticles, ARTICLE_LABEL)
const partition = seperateNewest(cardArticles, latestArticleContainer)
cardArticleModifier([partition.restructuredNewestArticle])
cardArticleModifier(partition.restArticles)
addHTMLlink([partition.restructuredNewestArticle])
addHTMLlink(partition.restArticles)
const loadCTA = document.querySelector(".loadmore-cta")
loadCTA.addEventListener("click", loadNextArticles)
pagination(partition.restArticles)
const IDs = articleIds(cardArticles)
for (const id of IDs) {
readingTime(id)
}
})
//---------
async function readingTime(id) {
try {
const response = await fetch(
`https://ec.europa.eu/digital-building-blocks/sites/rest/api/content/${id}?expand=body.view`
)
const data = await response.json()
const pageContent = data.body.view.value
const parser = new DOMParser()
const htmlDoc = parser.parseFromString(pageContent, "text/html")
const allText = htmlDoc.body.innerText
const allWords = allText.split(/\s+/).filter((word) => word.trim() !== "")
const numWords = allWords.length - 50
const cardArticle = document.getElementById(id)
cardArticle.querySelector(
".reading-time > span"
).textContent = `${Math.ceil(numWords / 200)}`
loaderSection.style.display = "none"
articleLatestSection.style.display = "block"
articlesRestSection.style.display = "block"
} catch (error) {
console.log(error)
}
}
</script> |
...