...
| HTML |
|---|
<script>
const categoryContainer = document.querySelector(".category-articles")
const loaderContainer = document.querySelector(".loader")
categoryContainer.style.display = "none"
loaderContainer.style.display = "flex"
const urlParams = new URLSearchParams(window.location.search)
if (!urlParams.has("category")) {
window.location.href =
"https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Blog"
}
const queryString = window.location.search
const regex = /[?&]category=([^&#]*)/
const match = regex.exec(queryString)
const parentId = match && decodeURIComponent(match[1])
$(".smalltext")
.contents()
.filter(function () {
return this.nodeType === 3
})
.remove()
document.addEventListener("DOMContentLoaded", function () {
const ARTICLE_LABEL = "newsv2"
const cardArticles = document.querySelectorAll(".content-by-label > li")
const categoryHeader = document.querySelector(
"#article-category-title .category-header"
)
const poolContainer = document.querySelector("#label-pool")
allCards(cardArticles, ARTICLE_LABEL)
const labelsCompareResults = labelsCompare(cardArticles)
isListOnChecker(
categoryHeader,
parentId,
labelsCompareResults.labelsPool,
poolContainer
)
addHTMLlink(cardArticles)
cardArticleModifier(cardArticles)
const loadCTA = document.querySelector(".loadmore-cta")
loadCTA.style.display = "none"
loadCTA.addEventListener("click", loadNextArticles)
pagination()
const IDs = articleIds(labelsCompareResults.validArticles)
for (const id of IDs) {
readingTime(id)
}
loaderContainer.style.display = "none"
categoryContainer.style.display = "block"
})
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 labelsCompare = (cardArticles) => {
const labelsPool = []
for (const article of cardArticles) {
const articleLabels = article.getAttribute("article-tags")
const articleLabelsArray = articleLabels.split(/\s*,\s*/)
const checker = articleLabelsArray.some((label) => {
return label === parentId
})
if (!checker) {
const storedLabelLink = article.querySelectorAll(
".labels-container > div"
)
labelsPool.push(...storedLabelLink)
}
!checker
? article.remove()
: article.setAttribute("style", "display:block;")
}
const validArticles = document.querySelectorAll(".content-by-label > li")
return { labelsPool, validArticles }
}
const isListOnChecker = (
categoryHeader,
parentId,
labelsPool,
poolContainer
) => {
const isListOn = document.querySelectorAll(".content-by-label > li")
if (isListOn.length > 0) {
styleHead(categoryHeader, constructLabel(parentId))
document.querySelector(".wrapper-main").style.display = "block"
document.querySelector(".wrapper-notfound").style.display = "none"
} else {
styleHead(categoryHeader, "No articles found :(")
document.querySelector(".wrapper-main").style.display = "none"
const wrapperNotFound = document.querySelector(".wrapper-notfound")
document.querySelector("#other-topics h4").textContent = "All topics"
wrapperNotFound.style.display = "block"
wrapperNotFound.querySelector(".category-id").textContent = `${parentId}`
}
filterDuplicates(labelsPool).forEach((el) => poolContainer.appendChild(el))
}
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" },
{ "europeum-edic": "EUROPEUM-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 filterDuplicates = (nodeList) => {
var uniqueTextContents = []
var uniqueChildren = []
nodeList.forEach(function (child) {
var anchor = child.querySelector("a")
if (anchor) {
var textContent = anchor.textContent.trim()
if (!uniqueTextContents.includes(textContent)) {
uniqueTextContents.push(textContent)
uniqueChildren.push(child)
}
}
})
return uniqueChildren
}
const styleHead = (categoryHeader, text) => {
const categoryTitle = categoryHeader.querySelector("h1")
const categoryTag = categoryHeader.querySelector("div")
const categoryIntroContainer = document.querySelector(
"#article-category-title .col-12"
)
categoryTitle.textContent = text
categoryIntroContainer.classList.add("heading-deco", "terciary")
}
const pagination = () => {
const loadCTA = document.querySelector(".loadmore-cta")
const cardArticlesRefreshed = document.querySelectorAll(
".content-by-label > li"
)
cardArticlesRefreshed.length < 1
? (loadCTA.style.display = "none")
: (loadCTA.style.display = "flex")
const cardsLimit = 5
const showOnLoad = () => {
cardArticlesRefreshed.forEach((article, index) => {
index > cardsLimit
? (article.style.display = "none")
: (article.style.display = "block")
index > cardsLimit
? (loadCTA.style.display = "flex")
: (loadCTA.style.display = "none")
})
}
if (cardArticlesRefreshed.length > 0) {
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"
}
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
}
//---------
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)}`
} catch (error) {
console.log(error)
}
}
</script> |