{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/bicentennial/SectionNavigation.js"],"names":[],"mappings":"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","file":"scripts/9718.ffdfde6e0eeb4067d98f.js","sourcesContent":["import { Component } from '@verndale/core';\n\nclass BicentennialSectionNavigation extends Component {\n  setupDefaults() {\n    this.dom = {\n      el: this.el.querySelectorAll('[id]:not(h2):not(h3):not(.swiper-wrapper)'),\n      sectionWithBackground: this.el.querySelectorAll('section[data-background]'),\n      sectionElements: this.el.querySelectorAll('.bicentennial-section-navigation__copy'),\n      dropdownWrapper: this.el.querySelector('.bicentennial-section-navigation__dropdown-wrapper'),\n      selectElement: this.el.querySelector('.bicentennial-section-navigation__select'),\n      selectOption: this.el.querySelectorAll('.bicentennial-section-navigation__select-option')\n    };\n\n    this.isJumping = false;\n    this.jumpingId = '';\n    this.thresholdVisible = 1;\n    this.thresholdOverflow = 0.4;\n    this.thresholdNotVisible = 0.25;\n    this.lastScroll = 0;\n    this.scrollDirection = 'down';\n\n    this.observerOptions = {\n      threshold: [this.thresholdVisible, this.thresholdOverflow, this.thresholdNotVisible]\n    };\n\n    this.initObserver();\n    this.addSectionBorderToSections();\n  }\n\n  addListeners() {\n    window.addEventListener('scroll', this.handleScroll.bind(this))\n    this.dom.dropdownWrapper?.addEventListener('click', this.handleDropdown.bind(this))\n    this.dom.selectOption?.forEach(el => {\n      el.addEventListener('click', this.handleDropdownSelected.bind(this))\n    });\n    this.dom.sectionElements.forEach(el => el.addEventListener('click', this.handleJumpToSection.bind(this)));\n  }\n\n  observerCallback(entries) {\n    entries.forEach((entry) => {\n      if (entry.intersectionRatio >= this.thresholdVisible && !this.isJumping) {\n        this.handleActive(entry);\n        return;\n      }\n\n      if (entry.intersectionRatio >= this.thresholdOverflow && !this.isJumping && this.isBiggerElement(entry.target) && this.scrollDirection === 'down' && !this.isElementOverflowingTop(entry.target)) {\n        this.handleActive(entry);\n        return;\n      }\n\n      if (entry.intersectionRatio < this.thresholdNotVisible && !this.isJumping && this.scrollDirection === 'up') {\n        this.handleInactive(entry);\n        return;\n      }\n\n      if (this.isJumping && entry.target.id === this.jumpingId) {\n        setTimeout(() => { this.isJumping = false }, 500);\n      }\n    });\n  }\n\n  initObserver() {\n    this.observer = new IntersectionObserver(this.observerCallback.bind(this), this.observerOptions);\n    this.dom.el.forEach(el => this.observer.observe(el))\n  }\n\n  isElementOverflowingTop(el) {\n    const elementTop = el.getBoundingClientRect().top;\n    return elementTop < 150;\n  }\n\n\n  isBiggerElement(el) {\n    const elementHeight = el.getBoundingClientRect().height;\n    const viewportHeight = window.innerHeight;\n\n    return elementHeight > viewportHeight - 250;\n  }\n\n  getScrollingDirection() {\n    const currentScroll = window.pageYOffset;\n    const direction = currentScroll > this.lastScroll ? 'down' : 'up';\n    this.lastScroll = currentScroll;\n    return direction;\n  }\n\n  handleJumpToSection(e) {\n    this.isJumping = true;\n    this.dom.sectionElements.forEach(el => el.classList.remove('bicentennial-section-navigation__copy--active'));\n    e.currentTarget.classList.add('bicentennial-section-navigation__copy--active');\n    this.jumpingId = e.currentTarget.dataset.sectionId;\n  }\n\n  handleDropdown() {\n    this.dom.selectElement.classList.toggle('open');\n  }\n\n  handleDropdownSelected(e) {\n    const element = e.target\n    const selectedClass = 'bicentennial-section-navigation__option-selected';\n\n    if (!element.classList.contains(selectedClass)) {\n      element.parentNode.querySelector(`.bicentennial-section-navigation__select-option.${selectedClass}`)\n        .classList.remove(selectedClass);\n\n      element.classList.add(selectedClass);\n      this.el.querySelector('.bicentennial-section-navigation__info-selected').textContent = element.textContent;\n      const currentSection = element.dataset.sectionId\n\n      document.getElementById(currentSection).scrollIntoView({\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  handleScroll() {\n    this.scrollDirection = this.getScrollingDirection();\n    this.sectionNavigationOverlap();\n  }\n\n  sectionNavigationOverlap() {\n    this.dom.sectionElements.forEach(sectionLink => {\n      let isActive = false;\n      const linkCopyEl = sectionLink.getBoundingClientRect();\n\n      this.dom.sectionWithBackground.forEach(section => {\n        const sectionEl = section.getBoundingClientRect();\n        const isOverlap = !(\n          linkCopyEl.top > sectionEl.bottom ||\n          linkCopyEl.bottom < sectionEl.top\n        )\n\n        if (isOverlap || isActive) {\n          sectionLink.style.color = '#fff'\n          isActive = true\n        } else {\n          sectionLink.style.color = 'inherit'\n        }\n      })\n    })\n  }\n\n  handleActive(entry) {\n    let updated = false;\n    let activeElement = null;\n\n    this.dom.sectionElements.forEach(el => {\n      const currentLink = el.dataset.sectionId\n      const currentSection = entry.target.id\n\n      if (el.classList.contains('bicentennial-section-navigation__copy--active')) {\n        activeElement = el;\n      }\n\n      if (currentSection === currentLink) {\n        el.classList.add('bicentennial-section-navigation__copy--active');\n        updated = true;\n      } else {\n        el.classList.remove('bicentennial-section-navigation__copy--active');\n      }\n    });\n\n    if (!updated) {\n      activeElement?.classList.add('bicentennial-section-navigation__copy--active');\n    }\n  }\n\n  handleInactive(entry) {\n    let previousItem = null;\n\n    this.dom.sectionElements.forEach(el => {\n      const currentLink = el.dataset.sectionId\n      const currentSection = entry.target.id\n\n      if (currentSection === currentLink && el.classList.contains('bicentennial-section-navigation__copy--active')) {\n        if (previousItem) {\n          el.classList.remove('bicentennial-section-navigation__copy--active');\n          previousItem.classList.add('bicentennial-section-navigation__copy--active');\n        }\n      }\n\n      previousItem = el;\n    });\n  }\n\n  addSectionBorderToSections() {\n    this.dom.sectionWithBackground.forEach(el => {\n      if (!el.classList.contains('bicentennial-full-width-stat')) {\n        el.classList.add('bicentennial-section-navigation__section--border')\n      }\n    });\n  }\n}\n\nexport default BicentennialSectionNavigation;\n"],"sourceRoot":""}