{"version":3,"sources":["webpack:///./src/js/modules/long-form-main-content.js"],"names":["longForm","Component","setupDefaults","this","dom","$showMoreButton","el","querySelector","$takeawaysContainer","$takeaways","$sections","querySelectorAll","$subsections","$toc","$tocList","$observables","$select","$description","$footnotesContent","$footnotesBtnContainer","$footnotesBtnShowMore","$footnotesBtnShowLess","$footnotesContentHiddenWrapper","setParentBlockSize","takeawayExpanded","excludedTitles","excludedClasses","document","documentElement","style","setProperty","removeAttribute","classList","add","setObserver","insertSections","insertSubsections","insertSelectOptions","showMoreInitState","addListeners","addEventListener","handleShowHide","e","handleOnChange","forEach","btn","handleFootnotesButtonClick","bind","window","handleScroll","wrapper","Array","from","children","reduce","acc","child","offsetHeight","nextElementSibling","display","target","parentElement","previousElementSibling","toggle","observer","IntersectionObserver","entries","handleOnIntersect","root","treshold","rootMargin","innerHTML","cloneToc","cloneNode","section","index","containsExcludedElements","setAttribute","innerText","parentSection","item","subsectionHeading","id","observe","tagName","toLowerCase","anchor","getAttribute","split","tocLi","$navItems","excludedMatches","filter","element","contains","includes","length","cloneTocSelect","remove","location","href","value","entry","isIntersecting","find","x"],"mappings":"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","file":"30.68c85d51165ce23b933d.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { setParentBlockSize } from '../utils/dom';\n\nclass longForm extends Component {\n setupDefaults() {\n this.dom = {\n $showMoreButton: this.el.querySelector('.long-form__show-more-btn'),\n $takeawaysContainer: this.el.querySelector('.long-form__takeaways-container'),\n $takeaways: this.el.querySelector('.long-form__takeaways'),\n $sections: this.el.querySelectorAll('.long-form__main h2'),\n $subsections: this.el.querySelectorAll('.long-form__main h3'),\n $toc: this.el.querySelector('.long-form__toc'),\n $tocList: this.el.querySelector('.long-form__toc-list'),\n $observables: this.el.querySelectorAll('.long-form__main h2, .long-form__main h3'),\n $select: this.el.querySelector('#long-form__toc-select'),\n $description: this.el.querySelector('.long-form__description'),\n $footnotesContent: this.el.querySelector('.long-form__footnotes-content'), //shoud be removed\n $footnotesBtnContainer: this.el.querySelector('.long-form__footnotes-cta-container'), // should be removed\n $footnotesBtnShowMore: this.el.querySelectorAll('.long-form__footnotes-cta--show-more'),\n $footnotesBtnShowLess: this.el.querySelectorAll('.long-form__footnotes-cta--show-less'),\n $footnotesContentHiddenWrapper: this.el.querySelectorAll('.long-form__footnotes-content--hidden')\n };\n\n setParentBlockSize(this.dom.$takeaways, this.dom.$takeawaysContainer);\n this.takeawayExpanded = false;\n // Excluded items from TOC\n this.excludedTitles = ['general disclaimer', 'endnotes', 'footnotes', 'tags'];\n this.excludedClasses = ['form__tags-label', 'long-form__footnotes-label', 'disclaimer__heading'];\n document.documentElement.style.setProperty('--overflow-x', 'visible');\n\n if (!this.dom.$description) {\n this.dom.$takeawaysContainer.removeAttribute('aria-expanded');\n this.dom.$takeawaysContainer.classList.add('long-form__takeaways-container--no-description');\n }\n\n this.setObserver();\n this.insertSections();\n this.insertSubsections();\n this.insertSelectOptions();\n this.showMoreInitState();\n }\n\n addListeners() {\n if (this.dom.$showMoreButton) {\n this.dom.$showMoreButton.addEventListener('click', () => this.handleShowHide());\n }\n this.dom.$select.addEventListener('change', (e) => this.handleOnChange(e));\n this.dom.$footnotesBtnShowMore.forEach((btn) => {\n btn.addEventListener('click', this.handleFootnotesButtonClick.bind(this));\n });\n this.dom.$footnotesBtnShowLess.forEach((btn) => {\n btn.addEventListener('click', this.handleFootnotesButtonClick.bind(this));\n });\n window.addEventListener('scroll', this.handleScroll.bind(this));\n }\n\n showMoreInitState() {\n const hiddenWrapper = '80px';\n this.dom.$footnotesContentHiddenWrapper.forEach((wrapper) => {\n const height = Array.from(wrapper.children).reduce((acc, child) => acc + child.offsetHeight, 0);\n if (height <= 80) {\n const footnotesBtnContainer = wrapper.nextElementSibling;\n footnotesBtnContainer.style.display = 'none';\n }\n });\n }\n\n handleFootnotesButtonClick(e) {\n // find the previous element siblign of its parent\n const hiddenContentWrapper = e.target.parentElement.previousElementSibling;\n hiddenContentWrapper.classList.toggle('long-form__footnotes-content--hidden');\n // find the parent\n const parent = e.target.parentElement;\n parent.classList.toggle('hidden');\n }\n\n setObserver() {\n const options = {\n root: null,\n treshold: 0,\n rootMargin: '0% 0% -90%'\n };\n this.observer = new IntersectionObserver((entries) => this.handleOnIntersect(entries), options);\n }\n\n insertSections() {\n this.dom.$tocList.innerHTML = '';\n const cloneToc = this.dom.$tocList.cloneNode(true);\n\n this.dom.$sections.forEach((section, index) => {\n if (!this.containsExcludedElements(section)) { // This line checks for TOC exclusions\n section.setAttribute('id', `main-section-${index}`);\n\n cloneToc.innerHTML += `\n ${section.innerText}\n `;\n }\n });\n\n this.dom.$tocList.innerHTML = cloneToc.innerHTML;\n }\n\n insertSubsections() {\n const cloneToc = this.dom.$tocList.cloneNode(true);\n let parentSection;\n\n this.dom.$observables.forEach((item, index) => {\n let subsectionHeading, id;\n\n this.observer.observe(item);\n\n if (item.tagName.toLowerCase() === 'h2') {\n parentSection = item;\n } else if (item.tagName.toLowerCase() === 'h3') {\n subsectionHeading = item;\n if (!this.containsExcludedElements(item)) { // This line checks for TOC exclusions\n id = `main-subsection-${index}`;\n item.setAttribute('id', `${id}`);\n\n const anchor = `#${id}`;\n const section = parentSection.getAttribute('id').split('main-section-')[1];\n const tocLi = cloneToc.querySelector(`.long-form__toc-item-${section}`);\n\n if (!tocLi.querySelector('ol')) tocLi.innerHTML = `${tocLi.innerHTML}
`;\n\n tocLi.querySelector('ol').innerHTML = `\n ${tocLi.querySelector('ol').innerHTML}\n \n ${item.innerText}\n \n `;\n }\n }\n });\n\n this.dom.$tocList.innerHTML = cloneToc.innerHTML;\n this.dom.$navItems = this.el.querySelectorAll('.long-form__toc-item');\n this.dom.$navItems[0].classList.add('long-form__toc-item--selected');\n }\n\n containsExcludedElements(item) {\n const excludedMatches = this.excludedClasses.filter((element) => item.classList.contains(element));\n return this.excludedTitles.includes(item.innerText.toLowerCase()) || excludedMatches.length > 0;\n }\n\n insertSelectOptions() {\n this.dom.$select.innerHTML = '';\n const cloneTocSelect = this.dom.$select.cloneNode(true);\n\n this.dom.$navItems.forEach((item) => {\n cloneTocSelect.innerHTML += ``;\n });\n\n this.dom.$select.innerHTML = cloneTocSelect.innerHTML;\n }\n\n handleShowHide() {\n if (this.takeawayExpanded) {\n this.dom.$takeawaysContainer.classList.remove('long-form__takeaways-container--open');\n } else {\n this.dom.$takeawaysContainer.classList.add('long-form__takeaways-container--open');\n }\n this.takeawayExpanded ? (this.dom.$showMoreButton.innerHTML = 'Show more') : (this.dom.$showMoreButton.innerHTML = 'Show less');\n this.dom.$takeawaysContainer.setAttribute('aria-expanded', !this.takeawayExpanded);\n this.takeawayExpanded = !this.takeawayExpanded;\n }\n\n handleOnChange(e) {\n location.href = e.target.value;\n }\n\n handleOnIntersect(entries) {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n this.dom.$navItems.forEach((item) => item.classList.remove('long-form__toc-item--selected'));\n Array.from(this.dom.$navItems)\n .find((x) => x.getAttribute('href') === `#${entry.target.id}`)\n ?.classList.add('long-form__toc-item--selected');\n }\n });\n }\n\n handleScroll() {\n const header = document.querySelector('.header');\n if (header.classList.contains('header--scroll-down')) {\n this.dom.$toc.classList.add('long-form__toc--scroll-down');\n } else {\n this.dom.$toc.classList.remove('long-form__toc--scroll-down');\n }\n }\n}\n\nexport default longForm;\n"],"sourceRoot":""}