View Source

<h1 class="heading-deco terciary">EBSI Events<h1>
<p>Thanks for checking out the EBSI events page!</p>
<p>On this page we include the essential details about upcoming EBSI events, ensuring you have all the relevant information you need: from dates and times to exciting locations. Stay informed and never miss out on any of these important activities!</p>

<div class="events-container">
<h2 class="heading-deco terciary">Upcoming Events</h2>
<div id="upcoming-events">
<ul class="event-list"></ul>
<p class="load-button"><a class="btn secondary outline"><span><strong>Load more</strong></span></a></p>
</div>
</div>

<div class="events-container">
<h2 class="heading-deco terciary">Catch up on what you’ve missed</h2>
<div id="past-events">
<ul class="event-list"></ul>
<p class="load-button"><a class="btn secondary outline"><span><strong>Load more</strong></span></a></p>
</div>
</div>

<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/609583364/dual-pill-primary-node-operators.svg" alt="">

Subscribe to our Newsflash

<p>Receive the latest news, invitations to our webinars and remain updated about the European Blockchain Services Infrastructure.</p>
<p><a class="btn secondary" href="https://ec.europa.eu/newsroom/digital/user-subscriptions/3156/create" target="_blank"><span>Sign up</span><span class="ico-external"></span><span class="sr-only">(opens in a new tab)</span></a></p>

/* HOME */
#events-introduction { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/460227009/bg-curve-introduction.svg"); background-position: top right; background-repeat: no-repeat; background-size: contain; }

/* Upcoming-events */
.upcoming-events-section { position: relative; padding-bottom: 10rem; }
#upcoming-events li { display flex; flex-direction: row-reverse; align-items: flex-start; max-width: 100%; gap: 48px; min-height: 400px; }  
#upcoming-events li > img { border-top-left-radius: inherit; border-bottom-left-radius: inherit; position: relative; top: 0; left:0; height: 100%; object-fit: cover; } 
#upcoming-events .smalltext { flex-direction: column; }

#upcoming-events .event-background-card { position: relative; width: 709px; height: 100%; background-size: cover!important; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background-repeat: no-repeat!important; background-position: center!important;  display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 400px; }
.event-background-card .event-padding-div { color: white; font-size: 18px; }
.event-background-card p { color: white; }
.event-background-card img { width: 148px; max-width: 148px; }
#upcoming-events .event-date { font-size: 16px; line-height: 22px; color: #D70058; margin-bottom: 4px; background: #FFF5FA;
border-radius: 8px; padding: 6px 8px; width: fit-content; display: flex; flex-direction: row; gap: 5px; }
#upcoming-events .event-date span {font-weight: 600; }
#upcoming-events .event-title { font-size: 40px; line-height: 48px; margin-bottom: 24px; }
#upcoming-events .event-info { margin-bottom: 24px; font-weight: 600; }
#upcoming-events .event-description { color: #4A3D5D; margin-bottom: 24px; }
#upcoming-events .event-description a { color: #4A3D5D!important; }
#upcoming-events .event-view { }   

/* Past-events */

.past-events-section { background: #E6F7FD; padding-bottom: 10rem; position: relative; }
.events-section .load-button { position: absolute; bottom: 64px; left: 50%; z-index: 10; }
#past-events li { display: flex; flex-direction: column-reverse; align-items: flex-start; min-height: 496px; max-height: 543px; justify-content: space-between; }
#past-events li > img {  border-top-left-radius: inherit; border-top-right-radius: 16px; width: 100%; }
#past-events .event-background-card { width: 100%; height: 100%; background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; border-top-left-radius: 16px; border-top-right-radius: 16px; display: flex; flex-direction: column; align-items: center; max-height: 212px; min-height: 212px; }
#past-events .smalltext { flex-direction: row; gap: 24px; align-items: flex-start; }
#past-events .smalltext > p:last-child { display: none; }

#past-events .event-background-card .event-padding-div { margin-top: 2rem; }
#past-events .event-background-card img { width: 117px; max-width: 118px; }

#past-events .details { margin: 0px 40px 40px 24px; padding: 24px 0px 0px 0;  height: 100%; }
#past-events .event-details-wrapper { display: flex; flex-direction: column; height: 100%; }

/* #past-events .event-date { display: flex; flex-direction: column-reverse; align-items: center; gap: 0px; flex-wrap: wrap; font-size: 18px; line-height: 20px; color: #D70058; margin-bottom: 21px; text-align: center;  } */
/* #past-events .event-date > span { order: 1; font-size: 32px; line-height: 33px; } */



#past-events .event-date { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; line-height: 22px; font-weight: 600; min-width: 72px; color: #D70058; background: #FFF5FA; border-radius: 8px; padding: 6px 8px; max-width: max-content; width: 100%; }
#past-events .event-date span { font-weight: 600; }
#past-events .event-date > span:first-child { margin-right: 5px; }



#past-events .event-title { font-size: 24px; line-height: 28px; margin-bottom: 16px; min-height: 56px; }
#past-events .event-info { font-size: 14px; margin-bottom: 24px; font-weight: 600; }
#past-events .event-description { color: #4A3D5D; margin-bottom: 24px; flex-grow: 1; }
#past-events .event-description a { color: #4A3D5D; }
/* #past-events .event-view { position: absolute; bottom: 0; } */



 /*--- HOME NEWSFLASH ---*/ 
.home-newsflash { padding-top: 5rem; padding-bottom:0; margin-top: 7rem; display: none;}
.home-newsflash .container { position: relative;}
.home-newsflash .cols { z-index: 5; position: relative;}
.home-newsflash .home-newsflash-bg { display: block; z-index: 4; position:absolute; bottom: 0; left:-100%; width: 200%;}
.home-newsflash .home-newsflash-bg p { margin:0; line-height:0;}
.home-newsflash .home-newsflash-bg p img { margin:0; max-width: 100%; height: auto;}
.home-newsflash .btn { margin-bottom: 2rem;}

@media screen and (min-width: 768px) { 
	.home-newsflash .home-newsflash-bg { left:-30%; width: 100%;}
	.home-newsflash .btn { margin-bottom: 3rem;}
}
@media screen and ( max-width: 550px ) {
.events-container li { max-width: 89vw!important; }
}
@media screen and ( max-width: 950px) {
#upcoming-events li > img { border-bottom-left-radius: unset!important; }
#upcoming-events li { display: flex; flex-direction: column-reverse; align-items: flex-start; max-width: 392px; min-height: 464px; gap: unset!important; }

#upcoming-events .details { margin: 0px 24px 40px 24px; padding: 24px 0px 0px 0; }
#upcoming-events .event-background-card {

    width: 100%!important;
    height: 212px!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: unset!important;


}  

#upcoming-events li { min-height: 400px; }


#upcoming-events .event-background-card .event-padding-div { top: 23px!important; }

#upcoming-events .smalltext { flex-direction: row; gap: 24px; align-items: flex-start; }
#upcoming-events .smalltext > p:last-child { display: none; }

#upcoming-events .event-date { display: flex; flex-direction: column!important; align-items: center; jsutify-content: center; gap: 0px!important; flex-wrap: wrap; font-size: 16px; line-height: 22px; color: #D70058; margin-bottom: 9px; text-align: center; max-width: max-content; width: 100%; }
#upcoming-events .event-date span { order: 1; font-size: 16px; line-height: 22px; }
#upcoming-events .event-title {    font-size: 24px; line-height: 28px; margin-bottom: 16px; }
#upcoming-events .event-info { font-size: 14px; margin-bottom: 24px; font-weight: 600; }
#upcoming-events .event-description { color: #4A3D5D; margin-bottom: 24px; }
/* #upcoming-events .event-view { position: absolute; bottom: 0; } */
}

@media screen and (min-width: 1360px) { 
	.home-newsflash .home-newsflash-bg { left:-30%; width: 90%; }
}

.events-container .smalltext > p:first-child, .smalltext > p:nth-child(6) { display: none; }
#upcoming-events, #past-events { display: flex; gap: 24px; flex-wrap: wrap; }
.events-container { display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px;} 
.events-container li { list-style-type: none; }
.events-container li p { margin-bottom: 0; }
.events-container li > div:first-child { display: none; }
.events-container li > .details > a { display: none; } 
.events-container li { max-width: 403px; min-width: 300px; overflow: initial; height: auto;  background: #ffffff; box-shadow: 0px 4px 10px rgb(0 55 100 / 10%); border-radius: 16px;} 
.events-container .details { margin: 0; padding: 68px 58px 40px 0; } 
.events-container .label-details { display: none; }
.events-container .smalltext { display: flex; position: relative; height: 100%; }
.events-container .event-list{display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; padding-left:0;}

.hidden-event {
  display: none;
}

<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.querySelector("#past-events > .event-list");
  const upcomingEventsContainer = document.querySelector("#upcoming-events > .event-list");

  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("div");
    createP.classList.add('event-padding-div')
    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("div");
    createP.classList.add('event-padding-div');
    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/460227009/EBSI%20participating.png')";
    } 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(".event-padding-div").style.position = "absolute";
      image.querySelector(".event-padding-div").style.top = "120px";
    } else {
      image.querySelector(".event-padding-div").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 > .event-list > 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 > .event-list > li"
  );
  const pastItems = pastContainer.querySelectorAll("#past-events > .event-list > 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>