class PongoLauncher_b3102b6bf7a565d99f2c96a6db6fc216 {
constructor(position, color, icon, url, hasWiggle, hasBadge, size) {
this.position = position
this.color = color
this.icon = icon
this.url = url
this.currentState = '0'
this.timeoutId = null
this.container = null
this.frame = null
this.ifrmContainer = null
this.hasWiggle = hasWiggle
this.hasBadge = hasBadge
this.size = size ?? 1
}
#buildWidget() {
this.currentState = localStorage.getItem('heypongo-widget-display')
if (!this.currentState) {
this.currentState = '0'
localStorage.setItem('heypongo-widget-display', this.currentState)
}
this.container = document.createElement('div')
const globalStyles = document.createElement('style')
const wiggleAnimation = `
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes wiggle {
0% { transform: rotate(0deg); }
80% { transform: rotate(0deg); }
85% { transform: rotate(5deg); }
95% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
`
const widgetGlobalStyle = `
:root {
--scale: ${this.size}
}
@media screen and (max-width: 768px) {
:root {
--scale: 1
}
}
@keyframes scale-in-center {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(var(--scale));
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-out-bottom {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(50px);
opacity: 0;
}
}
`
globalStyles.innerHTML = this.hasWiggle ? `${widgetGlobalStyle}${wiggleAnimation}` : widgetGlobalStyle;
const containerStyle = `
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
transition: transform 0.16s linear 0s, opacity 0.08s linear 0s;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
`
this.container.appendChild(globalStyles)
const widget = document.createElement('div')
widget.setAttribute('id', 'web-launcher')
widget.style.cssText = `
position: fixed;
z-index: 2147483003;
width: 60px;
height: 60px;
transform: scale(var(--scale));
border-radius: 50%;
background: #${this.color};
cursor: pointer;
box-shadow: rgb(0 0 0 / 6%) 0px 1px 6px 0px, rgb(0 0 0 / 16%) 0px 2px 32px 0px;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
`
widget.style.cssText += this.#getWidgetPosition()
this.container.appendChild(widget)
const widgetPingAnimation = document.createElement('div')
widgetPingAnimation.style.cssText = `
position: absolute;
width: 43px;
opacity: 0.75;
height: 43px;
border-radius: 50%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
user-select: none;
background: #${this.color};
cursor: pointer;
`
widgetPingAnimation.style.animation = this.currentState === '0' ? 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite' : 'none'
widget.appendChild(widgetPingAnimation)
const imgContainer = document.createElement('div')
imgContainer.style.cssText = containerStyle
imgContainer.style.opacity = this.currentState === '0' ? '1' : '0'
imgContainer.style.transform = this.currentState === '0' ? 'rotate(0deg) scale(1)' : 'rotate(30deg) scale(0)'
widget.appendChild(imgContainer)
const caretContainer = document.createElement('div')
caretContainer.style.cssText = containerStyle
caretContainer.style.opacity = this.currentState === '0' ? '0' : '1'
caretContainer.style.transform = this.currentState === '0' ? 'rotate(-60deg)' : 'rotate(0deg)'
widget.appendChild(caretContainer)
const icon = document.createElement('img')
icon.src = this.icon
icon.style.width = '40px'
icon.style.height = '40px'
icon.style.animation = 'wiggle 1s infinite'
icon.setAttribute('alt', 'launcher-image')
imgContainer.appendChild(icon)
const caret = document.createElementNS("http://www.w3.org/2000/svg", "svg")
caret.setAttribute("viewBox", "0 0 16 14")
caret.setAttribute("width", "16");
caret.setAttribute("height", "25")
caret.innerHTML = `
`
caretContainer.appendChild(caret)
this.ifrmContainer = document.createElement('div')
this.ifrmContainer.style.cssText = `
position: fixed;
box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
`
this.ifrmContainer.style.opacity = this.currentState
this.ifrmContainer.style.right = '-9192929px'
const ifrm = document.createElement("iframe")
ifrm.setAttribute("src", this.url)
ifrm.style.cssText = `
width: 100%;
border: 0;
position: relative;
z-index: 0;
`
this.ifrmContainer.appendChild(ifrm)
const closeBtn = document.createElement('div')
closeBtn.style.cssText = `
z-index: 2147483005;
position: absolute;
border-radius: 8px 8px 0 0;
width: 100%;
height: 3rem;
top: 0px;
right: 0px;
background-position: center center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: end;
padding-right: 0.8rem;
`
if (this.hasBadge) {
const badge = document.createElement("div");
badge.style.cssText = `
position: absolute;
top: -3px;
right: -3px;
background-color: #E84435;
border-radius: 50%;
min-width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 11px;
color: white;`;
badge.style.opacity = this.currentState === "0" ? "1" : "0";
badge.textContent = 1;
widget.appendChild(badge);
}
const closeBtnIcon = document.createElement('div')
closeBtnIcon.style.cssText = `
width: 25px;
height: 25px;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
transform: translateZ(0px);
transition: background-color 200ms ease 0s;
`
closeBtnIcon.innerHTML = `
`
closeBtn.appendChild(closeBtnIcon)
document.body.appendChild(this.ifrmContainer)
ifrm.onload = () => {
this.ifrmContainer.style.display = this.currentState === '0' ? 'none' : 'block'
this.ifrmContainer.appendChild(closeBtn)
this.#setIframeStyle(this.ifrmContainer, ifrm, widget, closeBtn)
document.body.appendChild(this.container)
widget.addEventListener("click", () => this.#toggleVisibility(this.ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget))
closeBtn.addEventListener("click", () => this.#toggleVisibility(this.ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget))
window.addEventListener('resize', () => this.#setIframeStyle(this.ifrmContainer, ifrm, widget, closeBtn))
}
}
#getWidgetPosition() {
if (this.hasWiggle) {
switch (this.position) {
case 'top-right':
return `
top: calc(20px*(var(--scale)*var(--scale)));
right: calc(20px*(var(--scale)*var(--scale)));
`
case 'top-left':
return `
top: calc(20px*(var(--scale)*var(--scale)));
left: calc(20px*(var(--scale)*var(--scale)));
`
case 'bottom-left':
return `
bottom: calc(20px*(var(--scale)*var(--scale)));
left: calc(20px*(var(--scale)*var(--scale)));
`
default:
return `
bottom: calc(20px*(var(--scale)*var(--scale)));
right: calc(20px*(var(--scale)*var(--scale)));
`
}
} else {
switch (this.position) {
case 'top-right':
return `
top: calc(20px*var(--scale));
right: calc(20px*var(--scale));
`
case 'top-left':
return `
top: calc(20px*var(--scale));
left: calc(20px*var(--scale));
`
case 'bottom-left':
return `
bottom: calc(20px*var(--scale));
left: calc(20px*var(--scale));
`
default:
return `
bottom: calc(20px*var(--scale));
right: calc(20px*var(--scale));
`
}
}
}
#setIfrmContainerPosition(ifrmContainer) {
switch (this.position) {
case 'top-right':
ifrmContainer.style.top = 'calc(60px*var(--scale) + 2*20px)'
ifrmContainer.style.right = '20px'
ifrmContainer.style.bottom = ''
ifrmContainer.style.left = ''
break
case 'top-left':
ifrmContainer.style.top = 'calc(60px*var(--scale) + 2*20px)'
ifrmContainer.style.left = '20px'
ifrmContainer.style.bottom = ''
ifrmContainer.style.right = ''
break
case 'bottom-left':
ifrmContainer.style.bottom = 'calc(60px*var(--scale) + 2*20px)'
ifrmContainer.style.left = '20px'
ifrmContainer.style.top = ''
ifrmContainer.style.right = ''
break
default:
ifrmContainer.style.bottom = 'calc(60px*var(--scale) + 2*20px)'
ifrmContainer.style.right = '20px'
ifrmContainer.style.top = ''
ifrmContainer.style.left = ''
break
}
}
#setIframeStyle(ifrmContainer, ifrm, widget, closeBtn) {
closeBtn.style.display = 'flex'
if("matchMedia" in window) {
if(window.matchMedia("(max-width:450px)").matches) {
ifrmContainer.style.bottom = '0'
ifrmContainer.style.right = '0'
ifrmContainer.style.left = '0'
ifrmContainer.style.top = '0'
ifrmContainer.style.height = '100dvh'
ifrmContainer.style.width = '100%'
ifrmContainer.style.minHeight = '100dvh'
ifrmContainer.style.maxHeight = 'none'
ifrmContainer.style.overflow = 'hidden'
ifrmContainer.style.zIndex = '2147483001'
ifrmContainer.style.borderRadius = '0'
ifrm.style.borderRadius = '0'
ifrm.style.height = 'calc(100% - 3rem)'
widget.style.display = this.currentState === '0' ? 'block' : 'none'
} else {
this.#setIfrmContainerPosition(ifrmContainer)
ifrmContainer.style.height = 'calc(100% - (60px*var(--scale)) - 60px)'
ifrmContainer.style.width = '396px'
ifrmContainer.style.minHeight = '250px'
ifrmContainer.style.maxHeight = '704px'
ifrmContainer.style.zIndex = '9999'
ifrmContainer.style.borderRadius = '8px'
ifrm.style.borderRadius = '8px'
ifrm.style.height = '100%'
ifrm.style.marginTop = '0'
widget.style.display = 'block'
}
}
}
#toggleVisibility(ifrmContainer, caretContainer, imgContainer, widgetPingAnimation, widget) {
const fadeInAnimation = 'fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'
const fadeOutAnimation = 'fade-out-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'
if (this.currentState === '0') {
if (this.timeoutId !== null) {
clearTimeout(this.timeoutId)
}
ifrmContainer.style.animation = fadeInAnimation
ifrmContainer.style.opacity = '1'
ifrmContainer.style.display = 'block'
caretContainer.style.opacity = '1'
caretContainer.style.transform = 'rotate(0deg)'
imgContainer.style.opacity = '0'
imgContainer.style.transform = 'rotate(30deg) scale(0)'
widgetPingAnimation.style.animation = 'none'
if(window.matchMedia("(max-width:450px)").matches) {
widget.style.display = 'none'
}
} else {
ifrmContainer.style.animation = fadeOutAnimation
ifrmContainer.style.opacity = '0'
this.timeoutId = setTimeout(() => ifrmContainer.style.display = 'none', 400)
caretContainer.style.opacity = '0'
caretContainer.style.transform = 'rotate(-60deg)'
imgContainer.style.opacity = '1'
imgContainer.style.transform = 'rotate(0deg) scale(1)'
widgetPingAnimation.style.animation = 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite'
widget.style.display = 'block'
}
this.currentState = ifrmContainer.style.opacity
localStorage.setItem('heypongo-widget-display', ifrmContainer.style.opacity)
}
init() {
const messageHandler = (event) => {
if (event.data === '3pc.supported') {
this.#buildWidget();
window.removeEventListener('message', messageHandler);
}
};
window.addEventListener('message', messageHandler);
this.frame = document.createElement('iframe');
this.frame.src = "https://elreco.github.io/3rd-party-cookies-checker/read-localstorage.html";
this.frame.sandbox = "allow-scripts allow-same-origin";
this.frame.style.display = "none";
document.body.appendChild(this.frame);
}
destroy() {
localStorage.setItem('heypongo-widget-display', 0)
document.body.removeChild(this.container);
document.body.removeChild(this.frame);
document.body.removeChild(this.ifrmContainer);
}
}
const pongoLauncher_b3102b6bf7a565d99f2c96a6db6fc216 = new PongoLauncher_b3102b6bf7a565d99f2c96a6db6fc216('bottom-left', '000000', 'https://static.heypongo.com/e11b3121bd285d6ab001a1b00b822907.png', 'https://contest.heypongo.com/cg_10b4cbbee93/eyras_digital_1962_9zaL5lkH3OggTFS?locale=fr', false, false, 1)
document.onload = pongoLauncher_b3102b6bf7a565d99f2c96a6db6fc216.init()