<script> $(".smalltext")
.contents()
.filter(function () {
return this.nodeType === 3
})
.remove()
const eventsList = document.querySelectorAll(".content-by-label > li")
const storeEvents = Array.from(eventsList)
const currentDate = new Date()
const currentYear = currentDate.getFullYear()
const eventObj = {
"past-event": [],
"upcoming-event": [],
}
for (const parentElement of storeEvents) {
const childElementsAA = parentElement.querySelectorAll(
".aui-label-split-main"
)
const eventDateElement = parentElement.querySelector(".event-date")
const eventURL = parentElement
.querySelector("li > div.details > a")
.getAttribute("href")
const newElement = document.createElement("p")
newElement.classList.add("event-view")
newElement.innerHTML = `<a class="link-cta text-secondary" href="${eventURL}"><span>See event</span></a>`
parentElement
.querySelector(".smalltext > .event-details-wrapper")
.appendChild(newElement)
if (eventDateElement) {
const eventDateText = eventDateElement.textContent.trim()
const eventDate = new Date(`${eventDateText}`)
for (const childElementAA of childElementsAA) {
const text = childElementAA.textContent
if (text == "ebsi-event" || text == "external-event") {
const eventType = text == "ebsi-event" ? "ebsi-event" : "external-event"
currentDate.setHours(0,0,0,0)
eventDate.setHours(0,0,0,0)
const eventCategory =
eventDate.getTime() <= currentDate.getTime() ? "past-event" : "upcoming-event"
eventObj[eventCategory].push({ [eventType]: parentElement })
}
}
}
}
const pastEventsContainer = document.getElementById("past-events")
const upcomingEventsContainer = document.getElementById("upcoming-events")
const pastEvents = eventObj["past-event"]
const upcomingEvents = eventObj["upcoming-event"]
const pastEventTitleText = "Catch up on what you’ve missed → past events"
const upcomingEventTitleText = "Upcoming Events → new events"
for (const obj of pastEvents) {
const eventElement = Object.values(obj)[0]
const eventTitleElement = eventElement.querySelector(".event-info")
// if (eventTitleElement) {
// eventTitleElement.textContent = pastEventTitleText
// }
const createP = document.createElement("h4")
createP.innerHTML = ``
const image = document.createElement("div")
image.classList.add("event-background-card")
const eventType = Object.keys(obj)[0]
// const externalDetails = document.querySelector(".external-details")
const externalDetails = eventElement.querySelector(".external-details")
// console.log("EXTERNALDETAILS2", externalDetails2)
const logoEvent = externalDetails.querySelector("img")
const titleEvent = externalDetails.querySelector("p")
const specificpage = Object.values(obj)[0].querySelector(".details > a").href
if (eventType == "ebsi-event") {
logoEvent.style.display = "none"
titleEvent.style.display = "none"
image.style.background =
`url('${logoEvent.src}')`
} else {
// ------------------
const imageD = new Image()
imageD.onload = function () {
logoEvent.style.display = "block"
titleEvent.style.display = "none"
}
imageD.onerror = function () {
logoEvent.style.display = "none"
titleEvent.style.display = "block"
}
imageD.src = logoEvent.src
// ------------------
// image.src =
// "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/460227009/Events_collabxebsi_327x196@3x.png?api=v2"
image.style.background =
"url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/460227009/Events_collabxebsi_327x196@3x.png?api=v2')"
}
image.appendChild(createP)
image.appendChild(externalDetails)
eventElement.appendChild(image)
}
for (const obj of upcomingEvents) {
const eventElement = Object.values(obj)[0]
const eventTitleElement = eventElement.querySelector(".event-info")
const createP = document.createElement("h4")
createP.innerHTML = ``
const image = document.createElement("div")
image.classList.add("event-background-card")
const eventType = Object.keys(obj)[0]
const externalDetails = eventElement.querySelector(".external-details")
const logoEvent = externalDetails.querySelector("img")
const titleEvent = externalDetails.querySelector("p")
if (eventType == "ebsi-event") {
logoEvent.style.display = "none"
titleEvent.style.display = "none"
// image.src =
// "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/460227009/Events_ebsi_393x388@3x.png?api=v2"
image.style.background =
"url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/706381732/event-cover_.png?api=v2')"
} else {
// ------------------
const imageD = new Image()
imageD.onload = function () {
logoEvent.style.display = "block"
titleEvent.style.display = "none"
}
imageD.onerror = function () {
logoEvent.style.display = "none"
titleEvent.style.display = "block"
}
imageD.src = logoEvent.src
// ------------------
// image.src =
// "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/460227009/Events_collabxebsi_393x388@3x.png?api=v2"
image.style.background =
"url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/706381732/event-cover.png?api=v2')"
}
image.appendChild(createP)
if (eventType == "ebsi-event") {
image.querySelector("h4").style.position = "absolute"
image.querySelector("h4").style.top = "120px"
} else {
image.querySelector("h4").style.position = "unset"
}
image.appendChild(externalDetails)
eventElement.appendChild(image)
}
// -----------------------------SORT-----------------------------------------
pastEvents.sort((a, b) => {
return (
new Date(
`${Object.values(a)[0]
.querySelector(".event-date")
.textContent.trim()} ${currentYear} `
) -
new Date(
`${Object.values(b)[0]
.querySelector(".event-date")
.textContent.trim()} ${currentYear} `
)
)
})
upcomingEvents.sort((a, b) => {
return (
new Date(
`${Object.values(a)[0]
.querySelector(".event-date")
.textContent.trim()} ${currentYear} `
) -
new Date(
`${Object.values(b)[0]
.querySelector(".event-date")
.textContent.trim()} ${currentYear} `
)
)
})
pastEventsContainer.append(...pastEvents.map((obj) => Object.values(obj)[0]))
upcomingEventsContainer.append(
...upcomingEvents.map((obj) => Object.values(obj)[0])
)
const upcomingEventsList = document.querySelectorAll("#upcoming-events > li")
if (upcomingEventsList.length == 0) {
upcomingEventsContainer.append("")
document.querySelector(".upcoming-events-section").style.display = "none"
document.querySelector(".past-events-section").style.background = "#FFFFFF"
document.querySelector(".home-newsflash").style.display = "block"
}
const toggleItems = (container, items, showLoadButton) => {
for (let i = 0; i < items.length; i++) {
items[i].style.display = i < maxVisibleItems ? "flex" : "none"
}
container.querySelector(".load-button").style.display = showLoadButton
? "block"
: "none"
}
const loadMoreItems = (container, items) => {
let visibleItems = 0
for (let i = 0; i < items.length; i++) {
if (items[i].style.display !== "none") {
visibleItems++
}
}
for (
let i = visibleItems;
i < visibleItems + maxVisibleItems && i < items.length;
i++
) {
items[i].style.display = "flex"
}
container.querySelector(".load-button").style.display =
visibleItems + maxVisibleItems >= items.length ? "none" : "block"
}
const maxVisibleItems = 3
const upcomingContainer = document.querySelector("#upcoming-events")
const pastContainer = document.querySelector("#past-events")
const upcomingItems = upcomingContainer.querySelectorAll(
"#upcoming-events > li"
)
const pastItems = pastContainer.querySelectorAll("#past-events > li")
toggleItems(
upcomingContainer,
upcomingItems,
upcomingItems.length > maxVisibleItems
)
toggleItems(pastContainer, pastItems, pastItems.length > maxVisibleItems)
upcomingContainer
.querySelector(".load-button")
.addEventListener("click", () => {
loadMoreItems(upcomingContainer, upcomingItems)
})
pastContainer.querySelector(".load-button").addEventListener("click", () => {
loadMoreItems(pastContainer, pastItems)
})
function truncateText(pElement, maxWords) {
const lineHeight = parseInt(getComputedStyle(pElement).lineHeight)
const maxLines = 2
const ellipsis = ".."
pElement.style.overflow = "hidden"
pElement.style.display = "-webkit-box"
pElement.style.webkitLineClamp = maxLines
pElement.style.webkitBoxOrient = "vertical"
const words = pElement.textContent.trim().split(" ")
if (
pElement.scrollHeight > lineHeight * maxLines ||
words.length > maxWords
) {
let truncatedText = ""
if (words.length > maxWords) {
truncatedText = words.slice(0, maxWords).join(" ") + ellipsis
} else {
const text = pElement.textContent
truncatedText = text.slice(0, text.indexOf("\n") + 1) + ellipsis
}
pElement.textContent = truncatedText
}
}
const pElements = document.querySelectorAll("#past-events .event-description")
pElements.forEach((pElement) => {
truncateText(pElement, 13)
})
const uElements = document.querySelectorAll(
"#upcoming-events .event-description"
)
uElements.forEach((uElement) => {
truncateText(uElement, 35)
})
if (window.innerWidth <= 1100) {
uElements.forEach((uElement) => {
truncateText(uElement)
})
}
</script> |