{"version":3,"file":"mobileNav.f25e076896cdc8cff1de.js","mappings":"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","sources":["webpack://jcb.com/./src/js/components/mobileNav.js","webpack://jcb.com/./src/js/components/useInert.js"],"sourcesContent":["import $ from 'jquery';\r\nimport { addInert, removeInert, mediaQueryDesktop } from './useInert.js';\r\n\r\nexport default class MobileNav {\r\n  constructor(el) {\r\n    this.el = el;\r\n    this.mainNav = document.querySelector('.js-main-nav');\r\n    this.init();\r\n\r\n    if (this.el.getAttribute('data-isfixedonscrollpast')) {\r\n      this.bindListeners();\r\n    }\r\n  }\r\n\r\n  init() {\r\n    this.attachEvents();\r\n    !mediaQueryDesktop().matches && this.mainNav.setAttribute('inert', '');\r\n  }\r\n\r\n  attachEvents() {\r\n    const menuButton = this.el.querySelector('.menu');\r\n    const searchToggle = this.el.querySelector(\"[data-target='#search-overlay']\");\r\n    const searchModal = document.querySelector('.js-search-overlay');\r\n    const dealerModal = document.querySelector('.js-find-dealer');\r\n\r\n    menuButton.addEventListener('click', (e) => this.toggleMainNav(e));\r\n    if (searchToggle != null) {\r\n      searchToggle.addEventListener('click', (event) => {\r\n        event.preventDefault();\r\n        searchModal.removeAttribute('inert');\r\n        this.openTargetOverlay(event.target);\r\n      });\r\n    }\r\n\r\n    mediaQueryDesktop().addEventListener('change', (e) => {\r\n      e.matches ? this.mainNav.removeAttribute('inert') : this.mainNav.setAttribute('inert', '');\r\n      searchModal.removeAttribute('inert');\r\n      dealerModal.removeAttribute('inert');\r\n    });\r\n  }\r\n\r\n  openTargetOverlay(el) {\r\n    const targetId = el.getAttribute('data-target'),\r\n      targetEl = document.querySelector(targetId),\r\n      targetInput = targetEl.querySelector('input');\r\n\r\n    targetEl.classList.add('open');\r\n    if (window.dataLayer) {\r\n      dataLayer.push({\r\n        event: 'open-' + targetId.replace('#', ''),\r\n      });\r\n    }\r\n    if (targetInput !== null) {\r\n      targetInput.focus();\r\n    } else {\r\n      document.documentElement.classList.add('overlay-hidden-html');\r\n    }\r\n  }\r\n\r\n  closeTargetOverlay(el) {\r\n    const targetId = el.getAttribute('data-target'),\r\n      targetEl = document.querySelector(targetId),\r\n      targetInput = targetEl.querySelector('input');\r\n\r\n    targetEl.classList.remove('open');\r\n    if (targetInput !== null) {\r\n      targetInput.blur();\r\n    } else {\r\n      document.documentElement.classList.remove('overlay-hidden-html');\r\n    }\r\n  }\r\n\r\n  toggleMainNav(e) {\r\n    const productsLi = this.mainNav.querySelector('li.products');\r\n    const backButton = this.mainNav.querySelector('.back[data-nav-state]');\r\n\r\n    document.activeElement.blur();\r\n    this.mainNav.classList.toggle('active');\r\n\r\n    if (productsLi) {\r\n      productsLi.click();\r\n      productsLi.focus();\r\n      productsLi.blur();\r\n    }\r\n\r\n    document.body.classList.toggle('nav-open');\r\n\r\n    if (this.mainNav.classList.contains('active')) {\r\n      e.target.classList.add('active');\r\n      backButton.setAttribute('data-nav-state', 'top');\r\n      addInert([document.querySelector('.js-mobile-nav'), this.mainNav]);\r\n      this.mainNav.focus();\r\n    } else {\r\n      e.target.classList.remove('active');\r\n      backButton.setAttribute('data-nav-state', 'idle');\r\n      removeInert(e.target);\r\n      !mediaQueryDesktop().matches && this.mainNav.setAttribute('inert', '');\r\n\r\n      let event = new MouseEvent('menuclosed', {\r\n        bubbles: true,\r\n        cancelable: true,\r\n      });\r\n      document.dispatchEvent(event);\r\n    }\r\n  }\r\n\r\n  // ! this is a quick-n-dirty copy of fixedOnScrollPast, needs to be cleaned to import() that dynamically instead.\r\n  bindListeners() {\r\n    window.addEventListener(\r\n      'scroll',\r\n      () => {\r\n        this.handleScroll();\r\n      },\r\n      true,\r\n    );\r\n\r\n    window.addEventListener(\r\n      'touchmove',\r\n      () => {\r\n        this.handleScroll();\r\n      },\r\n      true,\r\n    );\r\n\r\n    [...this.el.querySelectorAll('.product-sub-nav-link')].forEach((anchor) => {\r\n      anchor.addEventListener('click', (e) => {\r\n        if (!navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {\r\n          e.preventDefault();\r\n\r\n          const targetAnchor = anchor.getAttribute('href').replace('#', '');\r\n          const targetEle = document.getElementById(targetAnchor);\r\n\r\n          this.scrollTo(targetEle);\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  scrollTo(target) {\r\n    const scrollToOffset = $(target).offset().top - this.el.clientHeight;\r\n    $('html, body').animate(\r\n      {\r\n        scrollTop: scrollToOffset,\r\n      },\r\n      500,\r\n    );\r\n  }\r\n\r\n  handleScroll() {\r\n    if (\r\n      this.el.classList.contains('is-fixed') &&\r\n      document.querySelector('.js--cta-bar-palceholder').getBoundingClientRect().top >= 1\r\n    ) {\r\n      this.unfixHeader();\r\n      return;\r\n    }\r\n    if (this.el.getBoundingClientRect().top <= 0) {\r\n      this.fixHeader();\r\n    }\r\n  }\r\n\r\n  fixHeader() {\r\n    if (!this.el.classList.contains('is-fixed')) {\r\n      this.cloneHeader();\r\n      this.el.classList.add('is-fixed');\r\n    }\r\n  }\r\n\r\n  unfixHeader() {\r\n    if (this.el.classList.contains('is-fixed')) {\r\n      document.querySelector('.js--cta-bar-palceholder').remove();\r\n      this.el.classList.remove('is-fixed');\r\n    }\r\n  }\r\n\r\n  cloneHeader() {\r\n    const placeholder = this.el.cloneNode(true);\r\n    placeholder.classList.add('js--cta-bar-palceholder');\r\n    this.el.parentNode.insertBefore(placeholder, this.el);\r\n  }\r\n}\r\n","const mainNav = document.querySelector('.js-main-nav');\r\nconst inertElements = [\r\n  ...document.querySelectorAll(\r\n    '.js-skipnav, .js-mobile-nav, .js-find-dealer, .js-search-overlay, .js-country-selector, .js-main, .js-footer',\r\n  ),\r\n  mainNav,\r\n];\r\n\r\nexport function mediaQueryDesktop() {\r\n  return window.matchMedia('(min-width: 61.25em)');\r\n}\r\n\r\nexport function addInert(elKeepingFocus, hasFocus) {\r\n  inertElements.forEach((el) => el.setAttribute('inert', ''));\r\n  if (elKeepingFocus.length) {\r\n    elKeepingFocus.forEach((el) => el.removeAttribute('inert'));\r\n  } else {\r\n    elKeepingFocus.removeAttribute('inert');\r\n    hasFocus && elKeepingFocus.focus();\r\n  }\r\n}\r\n\r\nexport function removeInert(elToFocusLater) {\r\n  inertElements.forEach((el) => el.removeAttribute('inert'));\r\n\r\n  // mainNav element is present on both mobile and desktop media query, although should be inert on mobile and lose inert when mobile menu opens\r\n  if (!mediaQueryDesktop().matches && !mainNav.classList.contains('active')) {\r\n    mainNav.setAttribute('inert', '');\r\n  }\r\n  elToFocusLater && elToFocusLater.focus();\r\n}\r\n"],"names":["MobileNav","el","this","mainNav","document","querySelector","init","getAttribute","bindListeners","attachEvents","mediaQueryDesktop","matches","setAttribute","menuButton","searchToggle","searchModal","dealerModal","addEventListener","e","toggleMainNav","event","preventDefault","removeAttribute","openTargetOverlay","target","targetId","targetEl","targetInput","classList","add","window","dataLayer","push","replace","focus","documentElement","remove","blur","productsLi","backButton","activeElement","toggle","click","body","contains","addInert","removeInert","MouseEvent","bubbles","cancelable","dispatchEvent","handleScroll","querySelectorAll","forEach","anchor","navigator","userAgent","match","targetAnchor","targetEle","getElementById","scrollTo","scrollToOffset","$","offset","top","clientHeight","animate","scrollTop","getBoundingClientRect","unfixHeader","fixHeader","cloneHeader","placeholder","cloneNode","parentNode","insertBefore","elKeepingFocus","hasFocus","inertElements","length","elToFocusLater","matchMedia"],"sourceRoot":""}