{"version":3,"sources":["webpack:///./src/js/modules/applications-listing.js"],"names":["ApplicationListing","Component","setupDefaults","this","dom","$jumpLinks","el","querySelector","$navWrapper","$searchInput","$clearButton","$alphabet","dataset","alphabet","setObserver","createSections","createJumpLinks","handleObserveSections","document","querySelectorAll","forEach","section","observer","observe","container","cardsTitle","firtsLetters","Array","from","map","title","charAt","jumplinksHeight","offsetHeight","cleanRepeated","filter","c","index","indexOf","sort","sectionTag","createElement","setAttribute","classList","add","appendChild","parentNode","style","paddingBottom","IntersectionObserver","entries","handleOnIntersect","root","treshold","rootMargin","innerHTML","cloneJumpLinks","cloneNode","alphabetArray","JSON","parse","disabled","find","x","alphabetElements","navJumpLink","addListeners","addEventListener","e","handleClick","handleTextChange","bind","handleClear","handleKeyDown","window","cleanActiveState","item","remove","entry","isIntersecting","id","target","getAttribute","preventDefault","link","contains","alphabetSections","substring","offset","offsetTop","scroll","top","behavior","value","toLowerCase","options","length","display","element","option","innerText","includes","alphabetIndex","toUpperCase","showList","keyCode","KEYCODE","ESCAPE"],"mappings":"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","file":"87.bundle.js","sourcesContent":["import { Component } from '@verndale/core'\nimport { KEYCODE, classNames } from '../utils'\n\nclass ApplicationListing extends Component {\n  setupDefaults() {\n    this.dom = {\n      $jumpLinks: this.el.querySelector('.applications-listing__list'),\n      $navWrapper: this.el.querySelector('.applications-listing__wrapper'),\n      $searchInput: this.el.querySelector('.search-form__input'),\n      $clearButton: this.el.querySelector('.search-form__clear'),\n      $alphabet: this.el.dataset.alphabet\n    }\n\n    this.setObserver()\n    this.createSections()\n    this.createJumpLinks()\n    this.handleObserveSections()\n  }\n\n  handleObserveSections() {\n    const observedSections = document.querySelectorAll('.applications-listing__sections')\n    observedSections.forEach((section) => {\n      this.observer.observe(section)\n    })\n  }\n\n  createSections() {\n    const container = document.querySelector('.applications-listing__sections-container')\n    const cardsTitle = document.querySelectorAll('.applications-listing__link')\n    const firtsLetters = Array.from(cardsTitle).map((title) => title.title.charAt(0))\n    const jumplinksHeight = this.el.querySelector('.applications-listing__container').offsetHeight\n    this.cleanRepeated = firtsLetters.filter((c, index) => firtsLetters.indexOf(c) === index).sort()\n    this.cleanRepeated.map((section) => {\n      const sectionTag = document.createElement('section')\n      sectionTag.setAttribute('id', `jump-link-section-${section}`)\n      sectionTag.setAttribute('role', 'list')\n      sectionTag.classList.add('applications-listing__sections')\n      this.observer.observe(sectionTag)\n      Array.from(cardsTitle).map((title) =>\n        title.title.charAt(0) === section ? sectionTag.appendChild(title.parentNode) : null\n      )\n      container.appendChild(sectionTag)\n    })\n    container.style.paddingBottom = `calc(88vh - ${jumplinksHeight}px)`\n    container.classList.add('applications-listing__sections-container--show')\n  }\n\n  setObserver() {\n    const options = {\n      root: null,\n      treshold: 0,\n      rootMargin: '-17% 0% -82%'\n    }\n    this.observer = new IntersectionObserver((entries) => this.handleOnIntersect(entries), options)\n  }\n\n  createJumpLinks() {\n    this.dom.$jumpLinks.innerHTML = ''\n    this.cloneJumpLinks = this.dom.$jumpLinks.cloneNode(true)\n    if (this.dom.$alphabet) {\n      this.alphabetArray = JSON.parse(this.dom.$alphabet).sort()\n      this.alphabetArray.forEach((section) => {\n        const disabled = this.cleanRepeated.find((x) => x === section)\n        this.cloneJumpLinks.innerHTML += `<a class='applications-listing__item ${\n          disabled ? '' : 'applications-listing__item--disable'\n        } ' href=\"#jump-link-section-${section}\">${section}</a>`\n      })\n    }\n    this.dom.$jumpLinks.innerHTML = this.cloneJumpLinks.innerHTML\n\n    this.alphabetElements = this.dom.$jumpLinks.querySelectorAll('a')\n    this.navJumpLink = document.querySelectorAll('.applications-listing__item')\n  }\n\n  addListeners() {\n    this.dom.$jumpLinks.addEventListener('click', (e) => this.handleClick(e))\n    this.dom.$searchInput.addEventListener('input', this.handleTextChange.bind(this))\n    this.dom.$clearButton.addEventListener('click', this.handleClear.bind(this))\n    this.dom.$searchInput.addEventListener('keydown', this.handleKeyDown.bind(this))\n    window.addEventListener('resize', this.setObserver.bind(this))\n  }\n\n  cleanActiveState() {\n    this.navJumpLink.forEach((item) =>\n      item.classList.remove('applications-listing__item--scroll-active')\n    )\n  }\n\n  handleOnIntersect(entries) {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        this.cleanActiveState()\n        const id = `#${entry.target.id}`\n        Array.from(this.navJumpLink)\n          .find((x) => x.getAttribute('href') === id)\n          ?.classList.add('applications-listing__item--scroll-active')\n      }\n    })\n  }\n\n  handleClick(e) {\n    e.preventDefault()\n    const jumpLinks = this.el.querySelectorAll('.applications-listing__item')\n\n    jumpLinks.forEach((link) => {\n      if (link.classList.contains('applications-listing__item--active')) {\n        link.classList.remove('applications-listing__item--active')\n      }\n    })\n\n    e.target.classList.add('applications-listing__item--active')\n\n    const alphabetSections = document.querySelectorAll('.applications-listing__sections')\n    const id = e.target.getAttribute('href').substring(1)\n    const offset = this.el.querySelector('.applications-listing__container').offsetHeight\n    const target =\n      Array.from(alphabetSections).find((x) => x.getAttribute('id') === id)?.offsetTop - offset\n    window.scroll({\n      top: target,\n      behavior: 'smooth'\n    })\n  }\n\n  handleTextChange(e) {\n    e.preventDefault()\n    const value = e.target.value.toLowerCase()\n    const options = this.el.querySelectorAll('.applications-listing__link')\n    if (value.length > 2) {\n      this.dom.$clearButton.style.display = 'block'\n      this.alphabetElements.forEach((element) =>\n        element.classList.add('applications-listing__item--disable')\n      )\n      Array.from(options).map((option) => {\n        if (!option.innerText.toLowerCase().includes(value)) {\n          option.classList.add('applications-listing__link--hide')\n        } else {\n          option.classList.remove('applications-listing__link--hide')\n          const alphabetIndex = this.alphabetArray.indexOf(option.innerText[0].toUpperCase())\n          this.alphabetElements[alphabetIndex].classList.remove(\n            'applications-listing__item--disable'\n          )\n        }\n      })\n    } else {\n      this.showList()\n    }\n    if (!value.length) this.dom.$clearButton.style.display = 'none'\n  }\n\n  showList() {\n    const options = this.el.querySelectorAll('.applications-listing__link')\n    Array.from(options).map((option) => {\n      option.classList.remove('applications-listing__link--hide')\n      const alphabetIndex = this.alphabetArray.indexOf(option.innerText[0].toUpperCase())\n      this.alphabetElements[alphabetIndex].classList.remove('applications-listing__item--disable')\n    })\n  }\n\n  handleKeyDown(e) {\n    const key = e.keyCode\n    switch (key) {\n      case KEYCODE.ESCAPE:\n        this.handleClear()\n        this.showList()\n        break\n      case 13:\n        e.preventDefault()\n        break\n    }\n  }\n\n  handleClear() {\n    this.dom.$searchInput.value = ''\n    this.dom.$clearButton.style.display = 'none'\n    this.showList()\n  }\n}\n\nexport default ApplicationListing\n"],"sourceRoot":""}