const INTEGRATIONS_INCLUDE_CSS=`
.inner {
opacity: 0;
}
.outer {
opacity: 0;
}
.logo {
opacity: 0;
transform: scale(0);
}
.fade-in-fast {
opacity: 0;
}
.fade-in-slow {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.logo.visible {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.fade-in-slow.visible {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.hoverable {
will-change: transform;
-webkit-backface-visibility: hidden;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out 0.1s;
transform-origin: center;
transform-box: fill-box;
cursor: pointer;
}
.hoverable * {
transition: stroke-width 0.2s ease-in-out;
}
.hoverable.hover {
transform: scale(1.25);
}
.hoverable.hover * {
stroke-width: 16px;
}
.hoverable.muted {
opacity: 0.7;
}
`;
const INTEGRATIONS_CONNECTIONS={
"OUTER Payment": ["LOGO Paypal", "LOGO Klarna."],
};
function initIntegrationsSVG(){
var svg=document.getElementById("integrations-object").contentDocument;
var style=document.createElement("style");
style.innerHTML=INTEGRATIONS_INCLUDE_CSS;
svg.documentElement.appendChild(style);
svg.getElementById("Reybex logo").classList.add("fade-in-fast");
svg.getElementById("Reybex logo glow").classList.add("fade-in-slow");
svg.getElementById("GlowRing").classList.add("fade-in-slow");
svg.getElementById("Background").classList.add("fade-in-fast");
var groups=svg.querySelectorAll("#Integrations > *");
groups.forEach(function (group){
if(group.id.startsWith("LOGO")){
group.classList.add("logo");
group.classList.add("hoverable");
}});
setTimeout(function (){
document.getElementById("integrations-object").classList.add("loaded");
}, 500);
}
function runIntegrationsAnimation(){
var svg=document.getElementById("integrations-object").contentDocument;
var logo=svg.querySelectorAll(".logo");
for (let i=logo.length - 1; i > 0; i--){
const j=Math.floor(Math.random() * (i + 1));
[logo[i], logo[j]]=[logo[j], logo[i]];
}
const DELAY_LOGO_MS=25;
svg.getElementById("Background").classList.add("visible");
svg.getElementById("Reybex logo").classList.add("visible");
var delay=400;
for (let i=0; i < logo.length; i++){
setTimeout(function (){
requestAnimationFrame(function (){
logo[i].classList.add("visible");
});
}, delay);
delay +=DELAY_LOGO_MS;
}
setTimeout(function (){
svg.getElementById("Reybex logo glow").classList.add("visible");
svg.getElementById("GlowRing").classList.add("visible");
}, delay + 250);
};