<script>
const calculateCard = function () {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
const windowWidth = window.innerWidth
cardsContainer.forEach((child, index) => {
const hcCard = child.querySelector(".hc-card")
parentElement = child
if (windowWidth > 854) {
if (index % 2 === 0) {
hcCard.style.left = "50%"
hcCard.style.transform = "translateX(64px)"
} else {
hcCard.style.right = "50%"
hcCard.style.transform = "translateX(-64px)"
}
parentElement = child
const childElement = hcCard
const childHeight = childElement.offsetHeight
parentElement.style.height = childHeight + "px"
that = parentElement
} else {
parentElement.style.height = ""
hcCard.style.left = "unset"
hcCard.style.right = "unset"
hcCard.style.transform = "unset"
}
})
}
const ctas = function () {
$(".expanded a, .collapsed a").click(function (e) {
e.stopPropagation()
let $container = $(this).parents("div")
let that = $(this).closest(".hc-card-container")
let bullet = that.find(".hc-bullet")
let collapsed = that.find(".collapsed")
$container.children(".expanded, .collapsed").toggle()
calculateCard()
if ($(collapsed).css("display") === "none") {
$(bullet).attr("isActive", "active")
$(bullet).css("transform", "rotate(45deg)")
$(bullet).css("transition", "transform 0.1s ease")
} else {
$(bullet).attr("isActive", "")
$(bullet).css("transform", "rotate(0deg)")
$(bullet).css("transition", "transform 0.1s ease")
}
e.preventDefault()
})
}
const bullets = function () {
$(".hc-bullet").click(function (e) {
e.stopPropagation()
let that = $(this).next(".hc-card")
that.children(".expanded, .collapsed").toggle()
e.preventDefault()
if ($(this).attr("isactive") === "active") {
$(this).css("transform", "rotate(0deg)")
$(this).css("transition", "transform 0.1s ease")
$(this).attr("isactive", "")
} else {
$(this).css("transform", "rotate(45deg)")
$(this).css("transition", "transform 0.1s ease")
$(this).attr("isactive", "active")
}
calculateCard()
e.preventDefault()
})
}
window.addEventListener("DOMContentLoaded", function () {
$(".expanded").hide()
calculateCard()
ctas()
bullets()
const mediaQuery = window.matchMedia("(min-width: 854px)")
if (mediaQuery.matches) {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
cardsContainer.forEach((parentElement) => {
parentElement.style.height = 239 + "px"
})
}
})
const mediaQuery = window.matchMedia("(min-width: 854px)")
function handleScreenChange(e) {
const hcSection = document.querySelector("#hc-cards-section")
const cardsContainer = hcSection.querySelectorAll(".hc-card-container")
cardsContainer.forEach((child, index) => {
const hcCard = child.querySelector(".hc-card")
let parentElement = child
if (e.matches) {
if (index % 2 === 0) {
hcCard.style.left = "50%"
hcCard.style.transform = "translateX(64px)"
} else {
hcCard.style.right = "50%"
hcCard.style.transform = "translateX(-64px)"
}
parentElement = child
const childElement = hcCard
const childHeight = childElement.offsetHeight
parentElement.style.height = childHeight + "px"
that = parentElement
} else {
parentElement.style.height = ""
hcCard.style.left = "unset"
hcCard.style.right = "unset"
hcCard.style.transform = "unset"
}
})
}
mediaQuery.addEventListener("change", handleScreenChange)
//!======================
$("#eu-expert-group-on-blockchain-ethics-container").hide()
const mediaQuery2 = window.matchMedia("(max-width: 1070px)")
const structureNav = () => {
const mediaQuery = window.matchMedia("(max-width: 1070px)")
const tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (mediaQuery.matches) {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent = "EGBE")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent = "Sandbox")
: tab.querySelector("a > span").textContent
} else {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent =
"EU Expert Group on Blockchain Ethics")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent =
"European Blockchain Sandbox")
: tab.querySelector("a > span").textContent
}
})
}
structureNav()
mediaQuery2.addEventListener("change", structureNav)
const setImageInActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "about-us"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
$(that.children[0].children[2]).css("fontWeight", "600")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "eu-bc-sb"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
}
}
const setImageActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "about-us"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
$(that.children[0].children[2]).css("fontWeight", "600")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "eu-bc-sb"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
}
}
const tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (
tab.getAttribute("data-index") == 0 ||
tab.getAttribute("id") == "about-us"
) {
$(tab).addClass("active")
setImageActive(tab)
}
$(tab).on("click", function (e) {
e.stopPropagation()
tabs.forEach((tab) => {
$(tab).removeClass("active")
setImageInActive(tab)
})
this.classList.toggle("active")
setImageActive(this)
if (this.getAttribute("data-index") == 1) {
window.location.href =
"https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/EU+Expert+Group+on+Blockchain+Ethics"
}
if (this.getAttribute("data-index") == 2) {
window.location.href =
"https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Sandbox+Project"
}
e.preventDefault()
})
})
</script> |