{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/subMenu.ts"],"names":["SubMenu","Component","el","__publicField","menuItem","anchor","event","id","cards","maxHeight","card","index","image","i","container","menuItems","portions","progressBar","containerHeight","progress","item","portion","color"],"mappings":"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","file":"scripts/1296.9b34b1c1c711828a3801.js","sourcesContent":["import { Component } from '@verndale/core';\n\nclass SubMenu extends Component {\n breakpoint = window.matchMedia('(min-width: 1280px)');\n isMobile = false;\n offsetTop = 0;\n\n constructor(el: HTMLElement) {\n super(el);\n\n this.handleBreakpoint();\n this.checkViewportWidth();\n this.setCommonCardHeight();\n this.addEventListeners();\n }\n\n setupDefaults() {\n this.dom = {\n menuItems: this.el.querySelectorAll('.sub-menu__item'),\n cards: this.el.querySelectorAll('.sub-menu__card'),\n content: this.el.querySelector('.sub-menu__content'),\n asideContainer: this.el.querySelector('aside'),\n asideImages: this.el.querySelectorAll('.sub-menu__image'),\n progressBar: this.el.getElementsByClassName(\n 'sub-menu__progress'\n )[0] as HTMLElement\n };\n if (\n this.dom.menuItems instanceof NodeList &&\n this.dom.menuItems.length > 0\n ) {\n this.dom.menuItems[0].classList.add('sub-menu__item--active');\n }\n if (\n this.dom.asideImages instanceof NodeList &&\n this.dom.asideImages.length > 0\n ) {\n this.dom.asideImages[0].classList.remove('hidden');\n }\n }\n\n addEventListeners() {\n this.breakpoint.addEventListener(\n 'change',\n this.handleBreakpoint.bind(this)\n );\n document.addEventListener('scroll', this.updateProgressBar.bind(this));\n (this.dom.menuItems as NodeListOf).forEach(menuItem => {\n menuItem.addEventListener('click', this.handleMenuItemClick.bind(this));\n });\n\n // create an Observer instance\n const resizeObserver = new ResizeObserver(() => this.getAnchor());\n\n // start observing a DOM node\n resizeObserver.observe(document.body);\n }\n\n getAnchor() {\n const anchor =\n document.URL.split('#').length > 1 ? document.URL.split('#')[1] : null;\n\n if (anchor) {\n const el = document.getElementById(anchor);\n if (el) {\n window.scrollTo({\n top: el.offsetTop - 180,\n behavior: 'smooth'\n });\n }\n }\n }\n\n checkViewportWidth() {\n this.isMobile =\n !window.matchMedia(`(min-width: ${768}px)`).matches &&\n !window.matchMedia(`(min-width: ${1440}px)`).matches;\n }\n\n handleBreakpoint() {\n this.offsetTop = this.breakpoint.matches ? 160 : 0;\n }\n\n handleMenuItemClick(event: MouseEvent) {\n event.preventDefault();\n const target = event.target as HTMLAnchorElement;\n const id = target.dataset.scrollTo;\n\n if (id) {\n const el = document.getElementById(id.replace('#', ''));\n if (el) {\n window.scrollTo({\n top: el.offsetTop - 170,\n behavior: 'smooth'\n });\n }\n }\n }\n\n setCommonCardHeight() {\n if (!this.isMobile) {\n const cards = this.dom.cards as NodeListOf;\n let maxHeight = 0;\n\n (cards || []).forEach(card => {\n card.style.height = 'auto';\n if (card.offsetHeight > maxHeight) {\n maxHeight = card.offsetHeight;\n }\n });\n\n (cards || []).forEach(card => {\n card.style.height = `${maxHeight}px`;\n });\n\n if (this.dom.asideContainer instanceof HTMLElement) {\n this.dom.asideContainer.style.height = `${maxHeight}px`;\n }\n }\n }\n\n updatePicture(index: number) {\n const asideImages = this.dom.asideImages as NodeListOf;\n (asideImages || []).forEach((image, i) => {\n image.classList.add('hidden');\n if (i === index) {\n image.classList.remove('hidden');\n }\n });\n }\n\n updateProgressBar() {\n const container = this.dom.content as HTMLElement;\n const menuItems = this.dom.menuItems as NodeListOf;\n const portions: { color: string; percent: number }[] = [];\n const progressBar = this.dom.progressBar as HTMLElement;\n\n const containerHeight = container.getBoundingClientRect().height;\n const topPosition = -(\n container.getBoundingClientRect().top - this.offsetTop\n );\n\n let progress = (100 * topPosition) / containerHeight;\n\n if (progress < 0) {\n progress = 0;\n } else if (progress > 100) {\n progress = 100;\n }\n\n (menuItems || []).forEach((item: HTMLElement, index: number) => {\n portions.push({\n color: item.dataset.color || 'transparent',\n percent: (100 / (menuItems.length || 1)) * (index + 1)\n });\n item.classList.remove('sub-menu__item--active');\n });\n\n portions.some((portion, index) => {\n if (progress <= portion.percent) {\n if (progressBar) {\n [\n 'red',\n 'purple',\n 'dark-blue',\n 'orange',\n 'yellow',\n 'light-blue',\n 'green'\n ].forEach(color => {\n progressBar.classList.remove(`sub-menu__progress--${color}`);\n });\n progressBar.classList.add(`sub-menu__progress--${portion.color}`);\n progressBar.style.width = progress + '%';\n\n if (menuItems && menuItems[index]) {\n this.updatePicture(index);\n menuItems[index].classList.add('sub-menu__item--active');\n }\n return true;\n }\n }\n return false;\n });\n }\n}\n\nexport default SubMenu;\n"],"sourceRoot":""}