Sha256: 52518e05da2dcbbd62bdaee26e23cf1a7283e66e1a57bc76bce6d36de34365b6

Contents?: true

Size: 1.96 KB

Versions: 153

Compression:

Stored size: 1.96 KB

Contents

const QUERYSELECTOR_IN_LANDING_PAGES = 'nav.nav-landing'  // <nav> element in landing pages
const FORM_WRAPPER_QUERYSELCTOR = 'div.wFormContainer'  // <div> element from TargetX form in landing pages
const GET_STARTED_BUTTON_QUERYSELECTOR = 'a[href="#page-top"]';  // call-to-action Button at the bottom of landing pages
const FIRST_NAME_INPUT_QUERYSELECTOR = '.inputWrapper input[placeholder="First Name"]';  // First Name <input> element from the TargetX form in landing pages
// Custom JS to scroll the user to the top of the page & focus the first field (First Name input) of the form

function selectInputEl(inputElQuerySelctorString) {
  const inputEl = document.querySelector(inputElQuerySelctorString);

  return inputEl.select();
}

function distanceToTop(el) {
  return Math.floor(el.getBoundingClientRect().top);
}

function clickHandler(e) {
  const targetId = e.target.getAttribute('href').replace(/^#/, '');
  const targetEl = document.getElementById(targetId);
  const originalTop = distanceToTop(targetEl);

  e.preventDefault();
  window.scrollBy({ top: originalTop, left: 0, behavior: 'smooth' });

  const checkIfDone = setInterval(function() {
    const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
    if (distanceToTop(targetEl) === 0 || atBottom) {
      selectInputEl(FIRST_NAME_INPUT_QUERYSELECTOR);
      clearInterval(checkIfDone);
    }
  }, 100);
}

function addClickEventListener(querySelectorString) {
  const el = document.querySelector(querySelectorString);

  el.addEventListener('click', clickHandler)
}

function landingPageInit() {
  const requiredPageElements = document.querySelector(QUERYSELECTOR_IN_LANDING_PAGES) && document.querySelector(FORM_WRAPPER_QUERYSELCTOR) && document.querySelector(GET_STARTED_BUTTON_QUERYSELECTOR) && document.querySelector(FIRST_NAME_INPUT_QUERYSELECTOR);

  if ( ! requiredPageElements )
    return;

  addClickEventListener(GET_STARTED_BUTTON_QUERYSELECTOR);
}

export default landingPageInit;

Version data entries

153 entries across 153 versions & 1 rubygems

Version Path
kcc-gem-theme-2.14.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.14.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.13.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.12.2 assets/js/landing/landingPage.js
kcc-gem-theme-2.12.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.12.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.11.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.11.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.10.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.9.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.9.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.6 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.5 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.4 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.3 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.2 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.8.0 assets/js/landing/landingPage.js
kcc-gem-theme-2.7.1 assets/js/landing/landingPage.js
kcc-gem-theme-2.7.0 assets/js/landing/landingPage.js