Untitled

avatar
unknown
plain_text
2 years ago
9.5 kB
12
Indexable
// --------------------------
// Simple ABTasty js wrapper
// --------------------------

const domain = "LB.COM"; //eg LB, CIT, SOV etc
const testId = "1083486"; // ABTasty variant id
const testVar = "V2"; // Cx for campaign level code , Vx for variation version
const testName = "Navigation : Phone CTA within Mobile menu"; // location : test name, eg

const inQA = (function () {
  // test for QA cookie : "testId=test|true|QA"
  const re = new RegExp(`${testId}\=(test|true|qa|abt)`, "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;
  //console.log("> ", qaMode, previewMode, consoleMode, qaConsole);
  return qaMode || previewMode || consoleMode || qaConsole ? true : false;
})();

document.querySelector("body").classList.add(`${domain}${testId}`);
console.log(
  `${domain} : ${testId} : ${testVar} : ${testName} : TEST RUNNING : QA=${inQA}`
);

// --------------------------

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

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 init() {
  const menuLinks = document.querySelectorAll(
    ".primary-menu>.menu-link-destinations-, .primary-menu>.menu-link-boats-, .primary-menu>.menu-link-more-"
  );
  menuLinks.forEach((menuLink) => {
    const dropdownContainer = menuLink.querySelector(".dropdown .container");
    if (dropdownContainer) {
      dropdownContainer.insertAdjacentHTML(
        "beforeend",
        [
        '<div class="sticky-button-container">',
          '<div id="contactButton"class="contact-outer">',
            '<a href="/contact-us" class="sticky-contact-button">Contact Us</a>',
          '</div>',
          '<div class="request-outer">',
            '<div class="icon-cont">',
              '<span class="raq_text">Request a quote</span>',
            '</div>',
          '</div>',
        '</div>'
        ].join('')
      );

      const iconCont = dropdownContainer.querySelector(".icon-cont");
      if (iconCont) {
        iconCont.addEventListener("click", () => {
          dropScript();

          waitFor(
            () => {
              return window._hspb_loaded;
            },
            () => {
              buildForm();
              if (inQA) console.log("form built");
              checkIframeLoaded();
            }
          )();
        });
      }
    }
  });
  document
    .querySelector("body")
    .insertAdjacentHTML(
      "beforeend",
      `<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>`
    );
  addListeners();
}

function buildForm() {
  hbspt.forms.create({
    region: "na1",
    portalId: "2217882",
    formId: "4dcc17bb-4e69-439d-bbc5-5861df3f35de",
  });
  document
    .querySelector(".modal-block")
    .insertAdjacentElement(
      "afterbegin",
      document.querySelector(".hbspt-form")
    );
  document.querySelector(".modal-cont").classList.remove("hidden");
}

function addListeners() {
  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);
      addListeners();
    });
  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);
    }
  );
}

if (window.matchMedia("(max-width: 772px)").matches) {
  
  checkIframeLoaded();

  waitFor(
    () => {
      return true;
    },
    () => {
      //dropScript();
      init();
    }
  )();
}

//# sourceURL=c--site-script.js


.sticky-button-container {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	width: 100%;

}

.contact-outer {
	padding: 10px 20px;
	color: #ff7d20;
	text-decoration: none;
	border-radius: 0;
	font-weight: bold;
	transition: background-color 0.3s ease;
	width: 50%;
	text-align: center;
	border-top: 1px solid #D3E8EA;
}

.request-outer {
	width: 50%;
}

.sticky-req-button {
	padding: 10px 20px;
	color: #ff7d20;
	text-decoration: none;
	border-radius: 0;
	background: #fff;
	font-weight: bold;
	transition: background-color 0.3s ease;
	width: 100%;
	border-top: 1px solid #D3E8EA;
	border-bottom: none !important;
	border-right: none !important;
	border-left: 1px solid #D3E8EA;
}

.main-nav .dropdown>.container {
	padding: 32px 0;
}

.main-nav .single-row-wrapper {
	padding: 0 32px;
}

.main-nav .dropdown>.container>.dropdown-menu {
	padding: 0 32px;
}

.icon-cont {
	padding: 10px 20px;
	color: #ff7d20;
	text-decoration: none;
	border-radius: 0;
	text-align: center;
	margin: 0 auto;
	background: #fff;
	font-weight: bold;
	transition: background-color 0.3s ease;
	width: 100%;
	border-top: 1px solid #D3E8EA;
	border-bottom: none !important;
	border-right: none !important;
	border-left: 1px solid #D3E8EA;
}


.icon-cont:hover .raq_text {
	display: inline;
}


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

.main-nav .primary-menu .container {
  -webkit-box-shadow: 0 3px 5px 0 rgba(222,219,222,1);
  -moz-box-shadow: 0 3px 5px 0 rgba(222,219,222,1);
  box-shadow: 0 3px 5px 0 rgba(222,219,222,1);
}
Editor is loading...