var SERVpopupFn = {
aid: 'SERV-popupeStore',
options: {
popupid: 'myBannerId',
template: 'modal',
dismiss: ['timeout', 1],
targetId: 'mytarget',
css: {
size: ['810px', '360px'],
background: '#ffffff',
closeBtColor: '#000000'
},
html: 'You’re seeing this experience because you told us that you’re on prepaid. Return to the home page. Return to the home page'
},
init: function () {
if (SERVpopupFn.options.dismiss[0] === 'session' && sessionStorage.getItem(SERVpopupFn.options.popupid + 'currentTabOnly')) {
//do nothing
} else {
if (document.cookie.split(';').filter(function (item) {
return item.indexOf('SERV_popupDismissTimeSpan=') >= 0
}).length) {
//do nothing
} else {
var popupHolder = SERVpopupFn.createContainer();
SERVpopupFn.position(SERVpopupFn.options, popupHolder);
SERVpopupFn.applyTemplateCssOptions(SERVpopupFn.options, popupHolder);
var elModal = document.querySelector('.popup-content');
if (elModal) {
window.onclick = function (event) { if (event.target == elModal) { SERVpopupFn.closePopup(SERVpopupFn.options.popupid) } }
}
}
}
},
createContainer: function () {
var popupDiv = document.getElementById(SERVpopupFn.options.popupid);
if (!popupDiv) {
var popupDiv = document.createElement('div');
popupDiv.className = 'SERVpopupeStoreHolder';
popupDiv.id = SERVpopupFn.options.popupid;
popupDiv.innerHTML = SERVpopupFn.temlates(SERVpopupFn.options);
}
return popupDiv;
},
position: function (options, popupHolder) {
switch (options.template) {
case 'modal':
document.body.appendChild(popupHolder);
break;
case 'bannerTop':
var element = document.getElementById('spl-nav-wrapper');
var node = document.getElementsByClassName('spl-topnav-container')[0];
element.insertBefore(popupHolder, node);
break;
case 'bannerFloat':
var node = document.getElementById('spl-topnav-new');
node.appendChild(popupHolder);
break;
case 'bannerTarget':
var target = document.getElementById(options.targetId);
var parentTarget = target.parentNode;
parentTarget.insertBefore(popupHolder, target);
break;
}
},
temlates: function (options) {
var markup = '';
switch (options.template) {
case 'modal':
markup = '<div class="<%this.popupid%> popup-content"><div class="modal"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 20px;width: 20px;"><svg style="overflow: visible;" viewBox="0 40 140 140" width="20" height="20"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div></div>';
break;
case 'bannerTop':
markup = '<div class="<%this.popupid%> bannerTop"><div class="container"><%this.html%></div><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 20px;width: 20px;"><svg style="overflow: visible;" viewBox="0 40 140 140" width="20" height="20"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span></div>';
break;
case 'bannerFloat':
markup = '<div class="<%this.popupid%> bannerFloat"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 10px;width:10px;"><svg style="overflow: visible;" viewBox="60 80 140 140" width="10" height="10"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div>';
break;
case 'bannerTarget':
markup = '<div class="<%this.popupid%> bannerTarget"><span class="SERV-popupeStore-close cursor" onclick="SERVpopupFn.closePopup(\'<%this.popupid%>\')"><div style="height: 10px;width:10px;"><svg style="overflow: visible;" viewBox="60 80 140 140" width="10" height="10"><path fill="<%this.css.closeBtColor%>" d="M101.66,96l45.17-45.17c1.56-1.56,1.56-4.09,0-5.66c-1.56-1.56-4.1-1.56-5.66,0L96,90.34L50.83,45.17 c-1.56-1.56-4.09-1.56-5.66,0c-1.56,1.56-1.56,4.09,0,5.66L90.34,96l-45.17,45.17c-1.56,1.56-1.56,4.09,0,5.66 c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17L96,101.66l45.17,45.17c0.78,0.78,1.8,1.17,2.83,1.17s2.05-0.39,2.83-1.17 c1.56-1.56,1.56-4.09,0-5.66L101.66,96z"/></svg></div></span><%this.html%></div>';
break;
}
var finalTemplate = SERVpopupFn.templateEngine(markup, options);
return finalTemplate;
},
templateEngine: function (html, options) {
var re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
code = 'var r=[];\n',
cursor = 0,
match;
var add = function (line, js) {
js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
}
while (match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
},
openPopup: function () {
SERVpopupFn.init();
},
closePopup: function (id) {
var bannerTop = document.querySelector('#' + id + ' .bannerTop');
var bannerFloat = document.querySelector('#' + id + ' .bannerFloat');
if (typeof croWD != 'undefined') {
croWD.utils.sendTracking(id, id + '_popup_close', '');
}
if (bannerTop) {
bannerTop.classList.remove('open');
setTimeout(function () {
bannerTop.remove();
}, 3000);
} else if (bannerFloat) {
bannerFloat.classList.remove('open');
setTimeout(function () {
bannerFloat.remove();
}, 3000);
} else {
document.querySelector('#' + id).remove();
}
SERVpopupFn.dismissTimeSpan(SERVpopupFn.options);
},
closeOnOff: function () {
var closeBt = document.getElementsByClassName('SERV-popupeStore-close')[0];
closeBt.classList.add('off');
},
dismissTimeSpan: function (options) {
var timeout = parseInt(options.dismiss[1]);
switch (options.dismiss[0]) {
case 'session':
sessionStorage.setItem(options.popupid + 'currentTabOnly', true);
break;
case 'timeout':
var now = new Date();
var expireTime = now.setSeconds(now.getSeconds() + timeout);
now.setTime(expireTime);
document.cookie = 'SERV_popupDismissTimeSpan=1;expires=' + now.toUTCString() + ';path=/';
break;
}
},
applyTemplateCssOptions: function (options, popupHolder) {
popupHolder.innerHTML = SERVpopupFn.temlates(SERVpopupFn.options);
var el = document.querySelector('#' + options.popupid + ' .' + options.template);
switch (options.template) {
case 'modal':
el.style.backgroundColor = options.css.background;
el.style.width = options.css.size[0];
el.style.height = options.css.size[1];
break;
case 'bannerTop':
setTimeout(function () {
el.classList.add('open');
}, 500);
break;
case 'bannerFloat':
setTimeout(function () {
el.classList.add('open');
}, 500);
break;
case 'bannerTarget':
el.style.backgroundColor = options.css.background;
break;
}
if (options.dismiss[0] === 'off') {
var closeBt = document.querySelector('.' + options.popupid + ' .SERV-popupeStore-close');
closeBt.classList.add('off');
}
}
}