window.addEventListener('load', function () {
var getParams = new URL(window.location.href).searchParams,
triggerClass = "cta-prenota",
widget = document.createElement('iframe'),
closeBtn = document.createElement('button'),
loader = document.createElement('div'),
isMobile = /Android|iPhone/i.test(navigator.userAgent),
bg = document.createElement('div'),
url = 'https://esercenti.avatable.com/aostreetfood/en/widget/noGoogleLogin:1/noFacebookLogin:1/';
widget.id = 'iframe-widget';
widget.style.border = 0;
closeBtn.id = 'close-widget';
closeBtn.type = 'button';
closeBtn.innerHTML = "";
loader.id = 'wrap-loader';
loader.innerHTML = '
';
bg.id = 'bg-widget';
var container = document.createElement('div');
container.id = 'wrap-widget-avatable';
container.appendChild(widget);
var trigger = document.createElement('div');
trigger.innerHTML = '';
trigger.style.border = 0;
trigger.style.position = "fixed";
trigger.style.bottom = "15px";
trigger.style.right = "15px";
trigger.style.zIndex = "500";
trigger.className = "cta-prenota-cont";
document.body.appendChild(trigger);
var listaCta = document.getElementsByClassName(triggerClass);
for (var i = 0; i < listaCta.length; i++) {
listaCta[i].addEventListener('click', clickApriPopup, false);
}
function clickApriPopup(e) {
e.preventDefault();
apriPopup(this);
}
function apriPopup(ele = undefined) {
var frameUrl = url;
if(ele){
var idEvento = ele.dataset.evento;
if(idEvento) {
frameUrl += (frameUrl.indexOf("?")==-1?"?":"&")+"evento_id=" + idEvento;
}
var idServizio = ele.dataset.servizio;
if (idServizio) {
frameUrl += (frameUrl.indexOf("?")==-1?"?":"&")+"servizio_id=" + idServizio;
}
}
if (document.getElementById(container.id)) {
let curUrl = document.getElementById('iframe-widget').src;
if (true || curUrl != frameUrl) {
fadeInEffect(document.getElementById('wrap-loader'));
fadeInEffect(document.getElementById(container.id));
document.getElementById('iframe-widget').onload = function () {
// console.log('fine caricamento');
fadeInEffect(document.getElementById('iframe-widget'));
fadeOutEffect(document.getElementById('bg-widget'));
fadeOutEffect(document.getElementById('wrap-loader'));
}
document.getElementById('iframe-widget').src = frameUrl;
} else {
fadeInEffect(document.getElementById('iframe-widget'));
fadeInEffect(document.getElementById(container.id));
fadeInEffect(document.getElementById('bg-widget'));
}
} else {
document.body.appendChild(container);
document.getElementById(container.id).appendChild(closeBtn);
document.getElementById(container.id).appendChild(widget);
document.getElementById(container.id).appendChild(loader);
fadeOutEffect(document.getElementById('iframe-widget'), 0);
document.getElementById('iframe-widget').onload = function () {
// console.log('fine caricamento 2');
fadeInEffect(document.getElementById('iframe-widget'));
fadeOutEffect(document.getElementById('bg-widget'));
fadeOutEffect(document.getElementById('wrap-loader'));
}
document.getElementById('iframe-widget').src = frameUrl;
}
fadeOutEffect(document.getElementById('iframe-widget'), 0);
fadeInEffect(document.getElementById('bg-widget'));
}
function fadeInEffect(ele, time = 400) {
if (ele) {
ele.style.opacity = 0;
ele.style.display = 'flex';
for (let i = 1; i <= 100; i++) {
setTimeout(function () {
ele.style.opacity = i / 100;
}(time / 100))
}
}
}
function fadeOutEffect(ele, time = 400) {
if (ele) {
ele.style.opacity = 1;
for (let i = 100; i >= 0; i--) {
setTimeout(function () {
ele.style.opacity = i / 100;
}(time / 100))
if (i == 0) {
ele.style.display = 'none';
}
}
}
}
if (getParams.get("prenota")) apriPopup();
bg.onclick = function () {
fadeOutEffect(document.getElementById(container.id));
fadeOutEffect(document.getElementById('bg-widget'));
fadeOutEffect(document.getElementById('iframe-loader'));
}
closeBtn.onclick = function () {
fadeOutEffect(document.getElementById(container.id));
fadeOutEffect(document.getElementById('bg-widget'));
fadeOutEffect(document.getElementById('iframe-loader'));
}
const styleWidget = document.createElement('style');
styleWidget.innerText = `
#` + container.id + ` {
position: fixed;
bottom: ` + (isMobile ? '0' : '10px' ) + `;;
right: ` + (isMobile ? '0' : '10px' ) + `;
width: ` + (isMobile ? '100%' : '360px' ) + `;
box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
height: ` + (isMobile ? '100%' : '600px' ) + `;
z-index: 10000;
border-radius: 0.3rem;
}
#` + container.id + ` iframe {
border: 0px;
height: 100%;
width: 100%;
}
#` + container.id + ` #close-widget {
position: absolute;
top: 10px;
right: 0;
border: none;
background: none;
padding: 10px;
}
#` + container.id + ` #close-widget .btn-ico {
width : 2em;
height : 2em;
aspect-ratio : 1;
}
#` + container.id + ` #wrap-loader {
position: absolute;
top: 0;
left: 0;
background-color: #111111; width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#` + container.id + ` #wrap-loader .lds-ring {
display : inline-block;
position : relative;
width : 5em;
height : 5em;
}
#` + container.id + ` #wrap-loader .lds-ring div {
box-sizing : border-box;
display : block;
position : absolute;
width : 5em;
height : 5em;
margin : 0;
border : 0.4em solid #c5283d; border-radius : 50%;
animation : lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color : #c5283d transparent transparent transparent; }
#` + container.id + ` #wrap-loader .lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
#` + container.id + ` #wrap-loader .lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
#` + container.id + ` #wrap-loader .lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
document.body.appendChild(styleWidget);
});