Untitled

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;
}