Untitled
unknown
plain_text
a year ago
18 kB
6
Indexable
Never
const domain = 'LB'; //eg LB, CIT, SOV etc
const testId = '1102507'; // ABTasty variant id
const testVar = 'V2'; // Cx for campaign level code , Vx for variation version, Px for patch etc
const testName = 'Sitewide : FAB contact'; // location : test name, eg "Homepage : Modify search"
const inQA = function () {
// test for QA cookie : "testId=test|true|QA"
const re = new RegExp(`${testId}\=(test|true|qa|abt|abttest)`, 'i');
let qaMode = ((re).test(document.cookie) == true) ? true : false;
// test for preview mode.
let previewMode = (window.location.search.includes('ab_project=preview') == true || document.querySelector('#ABTastyPreviewBar') != null) ? true : false;
// test for qa console mode.
let consoleMode = window.location.search.includes('abtasty_qa_assistant=true');
// test for qa console.
let qaConsole = (document.querySelector('#abtasty-qa-assistant-frame') != null);
return (qaMode || previewMode || consoleMode || qaConsole) ? true : false;
}();
document.querySelector('body').classList.add(`${domain}${testId}`);
console.log(`${domain} : ${testId} : ${testVar} : ${testName} : TEST RUNNING : QA=${inQA}`);
// --------------------------
const host = window.location.host;
const language = document.getElementsByTagName("html")[0].getAttribute("lang");
const lookUpKey = host + "_" + language;
function buildFAB() {
let html = [
'<div id="fab">',
'<nav id="ABTmainnav" role="navigation">',
'<ul>',
`<li><span>${getContent(0)}</span><a id="FABcu" href="${getContact()}"><i class="fa fa-envelope"></i></a></li>`,
`<li><span>${getContent(1)}</span><a id="FABraq"><i class="fa fa-file"></i></a></li>`,
`<li><span>${getContent(2)}</span><a id="FABrcb"><i class="fa fa-phone"></i></a></li>`,
`<li><span>${getContent(3)}</span><a id="FABnl" href="${getNewsLetter()}"><i class="fa fa-pencil"></i></a></li>`,
`<li><span>${getContent(4)}</span><a id="FABhtcu"><i class="fa fa-comment"></i></a></li>`,
'</ul>',
'</nav>',
'</div>',
'<div class="modal-cont hidden">',
'<div class="modal-main">',
'<div class="modal-block">',
'<button id="form-modal-close" class="departures__modal-close">X</button>',
'</div>',
'</div>',
'</div>'
].join('');
document.querySelector('#main-wrapper').insertAdjacentHTML('beforeEnd', html);
addFormListeners();
document.querySelectorAll('#ABTmainnav li:not(:last-child)').forEach((el)=>{el.classList.toggle('invisible');});
['click'].forEach( evt => {
document.querySelectorAll('#ABTmainnav i').forEach((el)=>{el.addEventListener(evt, (e)=>{
//e.preventDefault();
document.querySelectorAll('#ABTmainnav li:not(:last-child)').forEach((el)=>{el.classList.toggle('invisible');});
if (document.querySelector('#ABTmainnav li:last-child i').classList.contains('fa-comment') == true) {
document.querySelector('#ABTmainnav li:last-child i').classList.remove('fa-comment');
document.querySelector('#ABTmainnav li:last-child i').classList.add('fa-minus');
} else {
document.querySelector('#ABTmainnav li:last-child i').classList.remove('fa-minus');
document.querySelector('#ABTmainnav li:last-child i').classList.add('fa-comment');
}
}, false);});
});
// add form open/tracking events
document.querySelector('#FABraq').addEventListener('click',()=>{
tracker(event.target, 'FABraq');
buildForm('raq');
if (inQA) console.log('form built');
checkIframeLoaded();
});
document.querySelector('#FABrcb').addEventListener('click',()=>{
tracker(event.target, 'FABrcb');
buildForm('rcb');
if (inQA) console.log('form built');
checkIframeLoaded();
});
document.querySelector(`#FABcu`).addEventListener('click', function(){tracker(event.target, 'FABcu');});
document.querySelector(`#FABhtcu`).addEventListener('click', function(){
tracker(event.target, 'FABhtcu');
dropScript();
});
document.querySelector(`#FABnl`).addEventListener('click', function(){tracker(event.target, 'FABnl');});
}
function tracker(elm, evtName) {
elm.classList.add(`${domain}${testId}`);
ABTastyClickTracking(`${evtName}`, null, testId);
if (inQA) console.log(`${evtName} clicked`);
}
function getFormId(formType) {
const formLookUp = {
'raq' : {
'www.emeraldstar.ie_en-ie' : 'aee2ec48-fa72-4836-91a8-668be00d95fc',
'www.leboat.at_de-at' : 'dd1722ce-8870-46d5-adbf-4b77eff616d0',
'www.leboat.be_fr-be' : '3d99de0e-4534-4e51-8b94-9a6821521c81',
'www.leboat.be_nl-be' : '74a00c22-d55e-4af9-98c0-fe0d84835877',
'www.leboat.ca_en-ca' : '095a3718-a7d7-4678-82e2-6b5b9fdf591e',
'www.leboat.ca_fr-ca' : '977e3122-a73a-419f-b43c-55e3eef26238',
'www.leboat.ch_de-ch' : 'd2270d2a-3235-42aa-8147-7db4a59e090e',
'www.leboat.ch_fr-ch' : '54ad3cdc-f6ec-4968-b398-951970434284',
'www.leboat.co.uk_en-gb' : '3b0969ed-ffc0-4f57-bf6d-249b11750e0d',
'www.leboat.co.za_en-za' : '04b012f0-ad09-42e5-bbe0-bc11000c2b32',
'www.leboat.com_en' : '4dcc17bb-4e69-439d-bbc5-5861df3f35de',
'www.leboat.com.au_en-au' : '211ab78a-9c3c-46c6-8d90-e72a4831a45a',
'www.leboat.de_de' : '645964fa-b90d-439f-9a5f-7b02979acbeb',
'www.leboat.es_es' : '0cbedba8-54c2-40e9-88eb-9e5f2a688177',
'www.leboat.fr_fr' : '60b4490f-d14e-44b3-84aa-009dadd44d3c',
'www.leboat.it_it' : 'e97174c7-776c-4764-bf0e-b4f69950be52',
'www.leboat.nl_nl' : 'ebec885e-f4e3-4b1f-8c19-c79997c46d7b'
},
'rcb' : {
'www.emeraldstar.ie_en-ie' : '8928ff1a-d0ef-4e3b-a137-0f0a3ce35e7d',
'www.leboat.at_de-at' : 'faf9a338-a8e1-4d6c-82dd-86af1d3d424d',
'www.leboat.be_fr-be' : '23e3c1b9-1209-4a07-909b-ae66701a98dd',
'www.leboat.be_nl-be' : '794c0e02-f506-40ec-81aa-e7775b83618f',
'www.leboat.ca_en-ca' : 'c48a817b-8b29-41f0-aa45-767448ab8413',
'www.leboat.ca_fr-ca' : 'c22a3177-542e-435b-a42a-5d342ee6a919',
'www.leboat.ch_de-ch' : '79d6fa56-3da5-4060-b144-863656a1285e',
'www.leboat.ch_fr-ch' : 'ab279dce-0d02-48a9-8e70-ac135363c46e',
'www.leboat.co.uk_en-gb' : '897bdae2-b4ed-415e-b5aa-3276cb9063fd',
'www.leboat.co.za_en-za' : '76e7aaff-49f8-410d-82e0-16a15f0d818b',
'www.leboat.com_en' : '9ed99c7f-f328-4b22-b874-a62ff00ba35e',
'www.leboat.com.au_en-au' : '0521151e-69e9-4662-8839-b7d00d414bae',
'www.leboat.de_de' : 'f092a391-2a34-4399-8567-a17b604442a5',
'www.leboat.es_es' : 'f44e4283-dddc-4f72-b32a-47d2c013526c',
'www.leboat.fr_fr' : 'b688e9a0-6eb9-4f9b-88b0-8a53f94fbecb',
'www.leboat.it_it' : '2529366c-6ff8-4774-b0b1-f2409ed2403d',
'www.leboat.nl_nl' : 'dbe345fa-ce3f-494d-a360-f7006987aca6'
}
};
let theFormId = formLookUp[formType][lookUpKey] || null;
return theFormId;
}
function getContact() {
const contactLookUp = {
'www.emeraldstar.ie_en-ie' : '/contact-us',
'www.leboat.at_de-at' : '/kontakt',
'www.leboat.be_fr-be' : '/fr/contactez-nous',
'www.leboat.be_nl-be' : '/nl/contact',
'www.leboat.ca_en-ca' : '/en/contact-us',
'www.leboat.ca_fr-ca' : '/fr/contactez-nous',
'www.leboat.ch_de-ch' : '/de/kontakt',
'www.leboat.ch_fr-ch' : '/fr/contactez-nous',
'www.leboat.co.uk_en-gb' : '/contact-us',
'www.leboat.co.za_en-za' : '/contact-us',
'www.leboat.com_en' : '/contact-us',
'www.leboat.com.au_en-au' : '/contact-us',
'www.leboat.de_de' : '/kontakt',
'www.leboat.es_es' : '/contacto',
'www.leboat.fr_fr' : '/contactez-nous',
'www.leboat.it_it' : '/contattaci',
'www.leboat.nl_nl' : '/contact'
};
let contactUs = contactLookUp[lookUpKey] || null;
return contactUs;
}
function getNewsLetter() {
const newsLookUp = {
'www.emeraldstar.ie_en-ie' : '/newsletter',
'www.leboat.at_de-at' : '/newsletter',
'www.leboat.be_fr-be' : '/fr/newsletter',
'www.leboat.be_nl-be' : '/nl/nieuwsbrief',
'www.leboat.ca_en-ca' : 'en/newsletter',
'www.leboat.ca_fr-ca' : '/fr/newsletter',
'www.leboat.ch_de-ch' : '/de/newsletter',
'www.leboat.ch_fr-ch' : '/fr/newsletter',
'www.leboat.co.uk_en-gb' : '/newsletter',
'www.leboat.co.za_en-za' : '/newsletter',
'www.leboat.com_en' : '/newsletter-sign-up',
'www.leboat.com.au_en-au' : '/newsletter',
'www.leboat.de_de' : '/newsletter',
'www.leboat.es_es' : '/newsletter',
'www.leboat.fr_fr' : '/newsletter',
'www.leboat.it_it' : '/newsletter-iscrizione',
'www.leboat.nl_nl' : '/nieuwsbrief'
};
let news = newsLookUp[lookUpKey] || null;
return news;
}
function getContent(idx) {
const contentlookUp = {
en : [`Contact us`, `Request a quote`, `Book a call back`, `Newsletter sign-up`, `How to contact us`],
fr : [`Nous écrire`, `Demander un devis`, `Être rappelé`, `S'inscrire à la newsletter`, `Comment nous contacter`],
de : [`Kontaktieren Sie uns`, `Angebot anfordern`, `Rückruf vereinbaren`, `Zum Newsletter anmelden`, `Wie Sie uns erreichen`],
es : [`Escríbenos`, `Pide un presupuesto`, `Solicita una llamada`, `Suscríbete a la newsletter`, `Cómo contactarnos`],
it : [`Scrivici`, `Chiedi un preventivo`, `Fatti richiamare`, `Iscriviti alla newsletter`, `Come contattarci`],
nl : [`Contacteer ons`, `Een offerte aanvragen`, `Teruggebeld worden`, `Nieuwsbrief ontvangen`, `Hoe contact met ons opnemen?`]
};
let lang = language.split('-')[0];
let content = contentlookUp[lang][idx] || "";
return content;
}
function buildForm(formType) {
let theFormId = getFormId(formType);
if (inQA) console.log(">> ", theFormId, hbspt);
if (theFormId) {
hbspt.forms.create({
region: "na1",
portalId: "2217882",
formId: theFormId //"4dcc17bb-4e69-439d-bbc5-5861df3f35de"
});
document.querySelector('.modal-block').insertAdjacentElement('afterbegin',document.querySelector('.hbspt-form'));
document.querySelector('.modal-cont').classList.remove('hidden');
}
}
function addFormListeners(){
document.querySelector('#form-modal-close').addEventListener('click',()=>{
document.querySelector('.modal-cont').classList.add('hidden');
document.querySelector('.modal-cont').innerHTML='';
let dom = `<div class="modal-main"><div class="modal-block"><button id="form-modal-close" class="departures__modal-close">X</button></div></div>`;
document.querySelector('.modal-cont').insertAdjacentHTML('afterbegin',dom);
});
document.querySelector('.modal-cont').addEventListener('click',()=>{
document.querySelector('.modal-cont').classList.add('hidden');
document.querySelector('.modal-cont').innerHTML='';
let dom = `<div class="modal-main"><div class="modal-block"><button id="form-modal-close" class="departures__modal-close">X</button></div></div>`;
document.querySelector('.modal-cont').insertAdjacentHTML('afterbegin',dom);
});
}
function checkIframeLoaded() {
waitFor(()=>{
return document.querySelector(`.modal-block .hbspt-form iframe`);
},()=>{
// Get a handle to the iframe element
var iframe = document.querySelector(`.modal-block .hbspt-form iframe`);
if (inQA) console.log(iframe);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (inQA) console.log(iframeDoc);
// Check if loading is complete
if (iframeDoc.readyState == 'complete') {
//iframe.contentWindow.alert("Hello");
iframe.contentWindow.onload = function(){
if (inQA) console.log("form loaded");
};
// The loading is complete, call the function we want executed once the iframe is loaded
afterLoading(iframeDoc);
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);
})();
}
function afterLoading(iframeDoc){
if (inQA) console.log("form updatable");
waitFor(()=>{
return iframeDoc.querySelector('.hs-main-font-element p');
},()=>{
if (inQA) console.log(iframeDoc.querySelector('.hs-main-font-element p'));
const d = new Date();
let day = d.getDay();
if (day == 0 || day == 6) {
iframeDoc.querySelector('.hs-main-font-element p').innerText = iframeDoc.querySelector('.hs-main-font-element p').innerText.replace("24","48");
}
})();
}
function dropScript () {
if (!document.querySelector('#hs_drop_script')) {
var scriptElm = document.createElement('script');
scriptElm.setAttribute('id', 'hs_drop_script');
scriptElm.setAttribute('type', 'text/javascript');
scriptElm.setAttribute('charset', 'utf-8');
scriptElm.setAttribute('src', '//js.hsforms.net/forms/embed/v2.js');
document.body.appendChild(scriptElm);
}
}
function waitFor(condition, callback, timeout, fallback) {
var stopTime = typeof timeout === 'number' ? timeout : 7000;
var stop = false;
window.setTimeout(function () {
stop = true;
}, stopTime);
return function _innerWaitFor() {
var value = condition();
if (stop) {
fallback && fallback();
return null;
}
if (value) return callback(value);
return window.setTimeout(_innerWaitFor, 250);
};
}
// --------------------------
if (!document.querySelector('#fab')) {
//dropScript();
buildFAB();
}
#fab {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
#ABTmainnav {
text-align: right;
}
#ABTmainnav ul {
padding-left: 1em;
font-weight: 400;
z-index: 100;
max-width: 20em;
}
#ABTmainnav li {
list-style: none;
margin: 0.5em 0 0;
font-size: 1.75em;
}
#ABTmainnav li a {
cursor: pointer;
}
#ABTmainnav li:hover span {
opacity: 1;
transition: 0.35s;
}
#ABTmainnav li.invisible {
opacity: 0;
/*visibility: hidden;*/
transition: all 0.35s;
display: none;
}
#ABTmainnav li.animate {
opacity: 0;
animation-duration: 0.35s;
animation-name: easeOutBounce;
animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
#ABTmainnav li span{
opacity: 1;
visibility: visible;
}
#ABTmainnav li:last-child span{
opacity: 0 !important;
/*visibility: hidden !important;*/
display: none;
}
}
#ABTmainnav a {
text-decoration: none;
color: #ffffff;
}
#ABTmainnav i {
color: #fff;
border: 2px solid #6847bd;
background: #6847bd;
padding: 0.5em;
border-radius: 50%;
width: 2.15em;
text-align: center;
}
#ABTmainnav span {
color: #fff;
padding: 0.3em 0.6em 0.4em 0.6em;
margin-left: 0.5em;
border-radius: 1em;
font-size: 0.75em;
transition: 0.5s;
background: #6847bd;
opacity: 1;
position: relative;
margin-right: 10px;
}
@media only screen and (min-width: 768px) {
#ABTmainnav li:last-child span{
opacity: 0 !important;
/*visibility: hidden !important;*/
display: none;
}
#ABTmainnav li:last-child:hover span{
opacity: 1 !important;
/*visibility: visible !important;*/
display: inline-block;
}
}
/* Imitates jQuery UI's ease-out-bounce animation effect */
@keyframes easeOutBounce {
0% {
font-size: 0;
}
37% {
font-size: 1.75em;
}
55% {
font-size: 1.3125em;
}
73% {
font-size: 1.75em;
}
82% {
font-size: 1.6275em;
}
91% {
font-size: 1.75em;
}
96% {
font-size: 1.715em;
}
100% {
font-size: 1.75em;
opacity: 1;
}
}
/* modal css ... */
#ABTastyPreviewBar{
display: none;
}
.icon-cont{
position: fixed;
right: 30px;
bottom: 50px;
background: #004587;
padding: 13px;
border-radius: 31px;
height: 50px;
cursor: pointer;
transition:all 0.4s ease 0s;
z-index: 100;
}
@media screen and (min-width: 481px) {
.icon-cont:hover .raq_text {
display: inline;
/* opacity: 1; */
/* transition: all 0.5s linear; */
}
}
.raq_text{
display: none;
font-family: 'Effra';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 13px;
text-align: center;
letter-spacing: 0.2px;
color: #ffffff;
vertical-align: super;
margin-left: 11px;
}
.modal-cont{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background-color: rgba(0,0,0,.5);
}
.hidden{
display: none;
}
.modal-main {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
/*background-color: #ffff;*/
max-width: 800px;
margin: 0 auto;
padding: 20px;
height: 84%;
width: 90%;
/*overflow: auto;*/
}
.modal-block{
background-color: #fff;
padding: 20px;
max-height: 100%;
overflow-y: scroll;
min-height: 100px;
border-radius: 4px;
}
#form-modal-close{
position: absolute;
top: 20px;
right: -8px;
cursor: pointer;
background-color: rgba(0,0,0,.5);
border: none;
outline: none;
color: #fff;
border: 1px solid #a89e9e;
border-radius: 3px;
}