{"version":3,"file":"StickyNav-CmQ0HPOh.js","sources":["../../ClientApp/src/js/components/StickyNav.ts"],"sourcesContent":["import gsap from 'gsap';\r\nimport ScrollTrigger from 'gsap/ScrollTrigger';\r\nimport { ScrollToPlugin } from 'gsap/ScrollToPlugin';\r\ngsap.registerPlugin(ScrollToPlugin, ScrollTrigger);\r\nconst StickyNav = (): {\r\n  init: () => void;\r\n  refresh: () => void;\r\n  setActiveBtn: (sectionId: string) => void;\r\n} => {\r\n  const nav: HTMLElement | null = document.querySelector(\r\n    '.js-sticky-nav-container',\r\n  );\r\n  let sections: NodeListOf<HTMLElement> = document.querySelectorAll(\r\n    '.js-content-section',\r\n  );\r\n  let navLinks: NodeListOf<HTMLAnchorElement> = nav\r\n    ? nav.querySelectorAll('a')\r\n    : (document.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>);\r\n\r\n  const mobileDropdown: HTMLSelectElement | null = document.querySelector(\r\n    '#js-sticky-nav-select',\r\n  );\r\n\r\n  const setActiveBtn = (sectionId: string): void => {\r\n    navLinks.forEach(link => {\r\n      link.classList.toggle(\r\n        'active',\r\n        link.getAttribute('href') === `#${sectionId}`,\r\n      );\r\n    });\r\n\r\n    // Update the mobile dropdown to match the current section\r\n    if (mobileDropdown) {\r\n      const matchingOption = Array.from(mobileDropdown.options).find(\r\n        option => option.value === `#${sectionId}`,\r\n      );\r\n      if (matchingOption) {\r\n        mobileDropdown.value = `#${sectionId}`; // Update the value without triggering 'change' event\r\n      }\r\n    }\r\n  };\r\n\r\n  const initScrollTrigger = (): void => {\r\n    sections.forEach((section: HTMLElement) => {\r\n      ScrollTrigger.create({\r\n        trigger: section,\r\n        start: 'top center',\r\n        end: 'bottom center',\r\n        onEnter: () => setActiveBtn(section.id),\r\n        onEnterBack: () => setActiveBtn(section.id),\r\n      });\r\n    });\r\n  };\r\n\r\n  const scrollToSection = (sectionId: string): void => {\r\n    const targetSection: HTMLElement | null =\r\n      document.getElementById(sectionId);\r\n\r\n    if (targetSection) {\r\n      gsap.to(window, {\r\n        scrollTo: { y: targetSection, offsetY: 182 },\r\n        duration: 1,\r\n        ease: 'power2.out',\r\n        onComplete: () => setActiveBtn(sectionId), // Ensure button highlighting after scroll\r\n      });\r\n    }\r\n  };\r\n\r\n  const handleQueryParamScroll = (): void => {\r\n    const params = new URLSearchParams(window.location.search);\r\n    const sectionId = params.get('st');\r\n\r\n    if (sectionId) {\r\n      scrollToSection(sectionId);\r\n    }\r\n  };\r\n\r\n  const addClickListeners = (): void => {\r\n    navLinks.forEach(link => {\r\n      link.addEventListener('click', (e: MouseEvent) => {\r\n        e.preventDefault();\r\n        const targetId = link.getAttribute('href')?.replace('#', '') || '';\r\n        if (targetId) {\r\n          scrollToSection(targetId);\r\n        }\r\n      });\r\n    });\r\n  };\r\n\r\n  const addDropdownListener = (): void => {\r\n    if (mobileDropdown) {\r\n      mobileDropdown.addEventListener('change', (e: Event) => {\r\n        const selectedValue = (e.target as HTMLSelectElement).value.replace(\r\n          '#',\r\n          '',\r\n        );\r\n        scrollToSection(selectedValue);\r\n      });\r\n    }\r\n  };\r\n\r\n  const refresh = (): void => {\r\n    sections = document.querySelectorAll('.js-content-section');\r\n    navLinks = nav\r\n      ? nav.querySelectorAll('a')\r\n      : (document.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>);\r\n\r\n    ScrollTrigger.getAll().forEach(trigger => trigger.kill());\r\n    initScrollTrigger();\r\n    ScrollTrigger.refresh();\r\n  };\r\n\r\n  const init = (): void => {\r\n    if (!nav || sections.length === 0) return;\r\n    initScrollTrigger();\r\n    addClickListeners();\r\n    addDropdownListener();\r\n    handleQueryParamScroll(); // Scroll based on query parameter\r\n  };\r\n\r\n  return { init, refresh, setActiveBtn };\r\n};\r\n\r\nexport default StickyNav;\r\n"],"names":["gsap","ScrollToPlugin","ScrollTrigger","StickyNav","nav","sections","navLinks","mobileDropdown","setActiveBtn","sectionId","link","option","initScrollTrigger","section","scrollToSection","targetSection","handleQueryParamScroll","addClickListeners","e","targetId","_a","addDropdownListener","selectedValue","trigger"],"mappings":"2FAGAA,EAAK,eAAeC,EAAgBC,CAAa,EACjD,MAAMC,EAAY,IAIb,CACH,MAAMC,EAA0B,SAAS,cACvC,0BAAA,EAEF,IAAIC,EAAoC,SAAS,iBAC/C,qBAAA,EAEEC,EAA0CF,EAC1CA,EAAI,iBAAiB,GAAG,EACvB,SAAS,iBAAiB,GAAG,EAElC,MAAMG,EAA2C,SAAS,cACxD,uBAAA,EAGIC,EAAgBC,GAA4B,CAChDH,EAAS,QAAgBI,GAAA,CACvBA,EAAK,UAAU,OACb,SACAA,EAAK,aAAa,MAAM,IAAM,IAAID,CAAS,EAAA,CAC7C,CACD,EAGGF,GACqB,MAAM,KAAKA,EAAe,OAAO,EAAE,KAC9CI,GAAAA,EAAO,QAAU,IAAIF,CAAS,EAAA,IAGzBF,EAAA,MAAQ,IAAIE,CAAS,GAExC,EAGIG,EAAoB,IAAY,CAC3BP,EAAA,QAASQ,GAAyB,CACzCX,EAAc,OAAO,CACnB,QAASW,EACT,MAAO,aACP,IAAK,gBACL,QAAS,IAAML,EAAaK,EAAQ,EAAE,EACtC,YAAa,IAAML,EAAaK,EAAQ,EAAE,CAAA,CAC3C,CAAA,CACF,CAAA,EAGGC,EAAmBL,GAA4B,CAC7C,MAAAM,EACJ,SAAS,eAAeN,CAAS,EAE/BM,GACFf,EAAK,GAAG,OAAQ,CACd,SAAU,CAAE,EAAGe,EAAe,QAAS,GAAI,EAC3C,SAAU,EACV,KAAM,aACN,WAAY,IAAMP,EAAaC,CAAS,CAAA,CACzC,CACH,EAGIO,EAAyB,IAAY,CAEnC,MAAAP,EADS,IAAI,gBAAgB,OAAO,SAAS,MAAM,EAChC,IAAI,IAAI,EAE7BA,GACFK,EAAgBL,CAAS,CAC3B,EAGIQ,EAAoB,IAAY,CACpCX,EAAS,QAAgBI,GAAA,CAClBA,EAAA,iBAAiB,QAAUQ,GAAkB,OAChDA,EAAE,eAAe,EACX,MAAAC,IAAWC,EAAAV,EAAK,aAAa,MAAM,IAAxB,YAAAU,EAA2B,QAAQ,IAAK,MAAO,GAC5DD,GACFL,EAAgBK,CAAQ,CAC1B,CACD,CAAA,CACF,CAAA,EAGGE,EAAsB,IAAY,CAClCd,GACaA,EAAA,iBAAiB,SAAW,GAAa,CAChD,MAAAe,EAAiB,EAAE,OAA6B,MAAM,QAC1D,IACA,EAAA,EAEFR,EAAgBQ,CAAa,CAAA,CAC9B,CACH,EAsBK,MAAA,CAAE,KARI,IAAY,CACnB,CAAClB,GAAOC,EAAS,SAAW,IACdO,IACAK,IACEI,IACGL,IAAA,EAGV,QAnBC,IAAY,CACfX,EAAA,SAAS,iBAAiB,qBAAqB,EAC1DC,EAAWF,EACPA,EAAI,iBAAiB,GAAG,EACvB,SAAS,iBAAiB,GAAG,EAElCF,EAAc,SAAS,QAAmBqB,GAAAA,EAAQ,MAAM,EACtCX,IAClBV,EAAc,QAAQ,CAAA,EAWA,aAAAM,EAC1B"}