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()