{"version":3,"file":"TEKSlider.js","names":["define","gsap","ScrollTrigger","ScrollTo","args","isExperienceEditor","slides","Array","from","scope","querySelectorAll","controlsContainer","querySelector","imagesContainer","classList","add","activeSlide","setBgColor","el","dataset","bgColor","style","backgroundColor","removeProperty","remove","forEach","slide","i","panelId","setAttribute","createControl","listItem","document","createElement","button","label","toLocaleString","minimumIntegerDigits","useGrouping","innerHTML","addEventListener","slideTo","e","key","appendChild","length","append","img","cloneNode","imgContainer","setNav","underline","controls","activeItem","activePanel","removeAttribute","x","offsetLeft","color","navColor","left","setImg","nextImage","gap","offsetHeight","transform","offsetTop","scroll","st","getById","navHeight","increment","end","start","to","window","scrollTo","currentImage","slideClasses","nextPanel","currentPanel","isInViewport","focus","initAnimation","registerPlugin","ScrollToPlugin","create","id","trigger","pin","anticipatePin","scrub","onUpdate","self","progress","toFixed","totalSlides","ResizeObserver","refresh","observe","body","mql","matchMedia","matches","initialActiveSlide","activePanelID","parseInt","event","setTimeout","disable","set","clearProps","initTekSlider"],"sources":["site/Components/TEKSlider/TEKSlider.js"],"mappings":"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","sourcesContent":["define([\"gsap\",\"gsapScrollTrigger\", \"gsapScrollTo\"], function ({ gsap }, { ScrollTrigger }, { ScrollTo }) {\r\n    function initTekSlider(args) {\r\n        // ===== INIT ===== //\r\n        const slides = Array.from(args.scope.querySelectorAll('.tek-slider__panel'));        \r\n        const controlsContainer = args.scope.querySelector('.tek-slider__controls');\r\n        const imagesContainer = args.scope.querySelector('.tek-slider__images-content');\r\n        // exit if any missing elements\r\n        if (!slides || !controlsContainer || !imagesContainer) {\r\n            return;\r\n        }\r\n        slides[0].classList.add('tek-slider__panel--active');\r\n        let activeSlide = 1;\r\n\r\n        // to set panel bg colors\r\n        const setBgColor = (el) => {\r\n            if (el.dataset.bgColor !== '') {\r\n                args.scope.style.backgroundColor = el.dataset.bgColor;\r\n            } else {\r\n                //no background color\r\n                //unset bg color and set nav colors\r\n                args.scope.style.removeProperty('background-color');\r\n                args.scope.classList.add(`tek-slider__light`);\r\n                args.scope.classList.remove(`tek-slider__dark`);\r\n            }\r\n        }\r\n        // set panel ids & inert\r\n        slides.forEach((slide, i) => {\r\n            slide.dataset.panelId = i + 1;\r\n            slide.setAttribute('tabindex', -1);\r\n            if (i !== 0) {\r\n                slide.setAttribute('inert', \"\");\r\n            }\r\n        });\r\n\r\n        // ===== CREATE NAVIGATION ===== //\r\n        const createControl = (i) => {\r\n            let listItem = document.createElement(\"li\");\r\n            let button = document.createElement(\"button\");  \r\n            let label = (i).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})\r\n            button.innerHTML = label;\r\n            if (i == 1) {\r\n                listItem.classList.add('tek-slider__controls--active');\r\n            }\r\n            listItem.dataset.panelId = i;\r\n            listItem.addEventListener('click', () => {\r\n                slideTo(i, true);\r\n            });\r\n            listItem.addEventListener('keypress', (e) => {\r\n                if (e.key == 'Enter') {\r\n                    slideTo(i, true);\r\n                }\r\n            });\r\n            listItem.appendChild(button);\r\n            return listItem;\r\n        }\r\n\r\n        for (let i = 0; i < slides.length; i++ ) {\r\n            controlsContainer.append(createControl(i + 1));\r\n        }\r\n\r\n        // ===== CREATE IMAGE CAROUSEL ===== //\r\n        slides.forEach((slide, i) => {\r\n            const img = slide.querySelector('.tek-slider__panel-image') ? slide.querySelector('.tek-slider__panel-image').cloneNode() : null;\r\n            let imgContainer = document.createElement('div');\r\n            imgContainer.classList.add('tek-slider__image-container');\r\n            if (i == 0) {\r\n                imgContainer.classList.add('tek-slider__image-container--active');\r\n                imgContainer.setAttribute('aria-hidden', false);\r\n            } else {\r\n                imgContainer.setAttribute('aria-hidden', true);\r\n            }\r\n            imgContainer.dataset.panelId = i + 1;\r\n            img && imgContainer.append(img);\r\n            imagesContainer.append(imgContainer);\r\n        });\r\n\r\n        // ===== SET ACTIVE NAVIGATION ===== //\r\n        const setNav = (i) => {\r\n            const underline = args.scope.querySelector('.tek-slider__controls-underline');\r\n            const controls = args.scope.querySelector('.tek-slider__controls');\r\n            const activeItem = controls.querySelector('li[data-panel-id=\"' + i + '\"]');\r\n            const activePanel = args.scope.querySelector('.tek-slider__panel[data-panel-id=\"' + i + '\"]');\r\n            controls.querySelector('.tek-slider__controls--active').classList.remove('tek-slider__controls--active');\r\n            controls.querySelector('[inert]')?.removeAttribute('inert');\r\n            activeItem.classList.add('tek-slider__controls--active');\r\n            activeItem.setAttribute('inert', \"\");\r\n            const x = activeItem?.offsetLeft;\r\n            controls.style.color = activePanel?.dataset.navColor;\r\n            \r\n            if (i == 1) {\r\n                underline.style.left = '0px';\r\n            } else {\r\n                underline.style.left = x + 'px';\r\n            }\r\n        }\r\n\r\n        // ===== SCROLL TO ACTIVE IMAGE ===== //\r\n        const setImg = (i) => {\r\n            const nextImage = args.scope.querySelector('.tek-slider__image-container[data-panel-id=\"' + i + '\"]');\r\n            const imgContainer = args.scope.querySelector('.tek-slider__images-content');\r\n            const imgsWrapper = args.scope.querySelector('.tek-slider__images');\r\n            let gap = (imgsWrapper.offsetHeight - nextImage.offsetHeight) / 2;\r\n\r\n            if (i == 1) {\r\n                //first slide\r\n                imgContainer.style.transform = \"translateY(0px)\";\r\n            } else {\r\n                imgContainer.style.transform = `translateY(-${nextImage.offsetTop - gap}px)`;\r\n            }\r\n        }\r\n\r\n        // ===== SET ACTIVE SLIDE ===== //\r\n        // i: int, slide number (1 index)\r\n        // scroll: bool, scrolls window to slide\r\n        const slideTo = (i, scroll = false) => {\r\n            // exit if invalid next slide num\r\n            // exit if active slide and next slide are the same\r\n            if (activeSlide == i || i > slides.length || i < 0) {\r\n                return; \r\n            }\r\n\r\n            if (scroll) {\r\n                const st = ScrollTrigger.getById('tekSlider');\r\n                const navHeight = 122;\r\n                let increment = (st.end - st.start) / slides.length;\r\n\r\n                gsap.to(window, {\r\n                    scrollTo: () => {\r\n                        return ((st.start + (increment * i) - navHeight));          \r\n                    }\r\n                });\r\n            }\r\n        \r\n            setNav(i); //set active nav\r\n            setImg(i); //set active image\r\n            // handle image transition\r\n            const nextImage = args.scope.querySelector('.tek-slider__image-container[data-panel-id=\"' + i + '\"]');\r\n            const currentImage = args.scope.querySelector('.tek-slider__image-container--active');\r\n\r\n            // modifier classes for slide transition animations\r\n            const slideClasses = {\r\n                imgActive: 'tek-slider__image-container--active',\r\n                panelActive: 'tek-slider__panel--active'\r\n            }\r\n            \r\n            // add/remove image active classes \r\n            currentImage.classList.remove(slideClasses.imgActive);\r\n            currentImage.setAttribute('aria-hidden', true);\r\n            nextImage.classList.add(slideClasses.imgActive);\r\n            nextImage.setAttribute('aria-hidden', false);\r\n\r\n            // handle panel transition\r\n            const nextPanel = args.scope.querySelector('.tek-slider__panel[data-panel-id=\"' + i + '\"]');\r\n            const currentPanel = args.scope.querySelector(`.${slideClasses.panelActive}`)\r\n            currentPanel.classList.remove(slideClasses.panelActive);\r\n            nextPanel.classList.add(slideClasses.panelActive);\r\n            setBgColor(nextPanel);\r\n            currentPanel.setAttribute('aria-hidden', true);\r\n            nextPanel.setAttribute('aria-hidden', false);\r\n\r\n            // handle inert\r\n            nextPanel.removeAttribute('inert');\r\n            // only focus if slider is in the viewport\r\n            if (ScrollTrigger.isInViewport(args.scope)) {\r\n                nextPanel.focus();\r\n            }\r\n            currentPanel.setAttribute('inert', \"\");\r\n\r\n            activeSlide = i;\r\n        }\r\n\r\n        // ===== SLIDE ON SCROLL ===== //\r\n        const initAnimation = () => {\r\n            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);  \r\n            const navHeight = '122px';\r\n\r\n            const end = slides.length * (400 / 3); //set end relative to slide length\r\n\r\n            ScrollTrigger.create({\r\n                id: 'tekSlider',\r\n                trigger: args.scope,\r\n                pin: true,\r\n                anticipatePin: true,\r\n                start: `top top+=${navHeight}`,\r\n                end: `+=${end}%`,\r\n                scrub: 4,\r\n                onUpdate: (self) => {\r\n                    let progress = self.progress.toFixed(2);\r\n                    let totalSlides = slides.length;\r\n                    let increment = (1 / totalSlides).toFixed(2);\r\n                    if (progress <= 0) {\r\n                        slideTo(1);\r\n                    } else if (progress >= 1) {\r\n                        slideTo(totalSlides);\r\n                    } else if (progress >= (increment * activeSlide)) {\r\n                        slideTo(activeSlide + 1);\r\n                    } else if (progress < (increment * (activeSlide - 1))) {\r\n                        slideTo(activeSlide - 1);\r\n                    }\r\n                }\r\n            });\r\n\r\n            // refresh scrolltrigger when the page content height changes\r\n            new ResizeObserver(() => {\r\n                ScrollTrigger.getById('tekSlider')?.refresh(); //disable scrolltrigger\r\n                }).observe(document.body);\r\n        }\r\n\r\n        let tablet_plus = '(min-width: 992px)';\r\n        let verticalBp = '(min-height: 700px)';\r\n        let mql = window.matchMedia(`${tablet_plus} and ${verticalBp}`);\r\n\r\n        if (mql.matches) {\r\n            initAnimation();\r\n            // check for initial active slide on load\r\n            const initialActiveSlide = args.scope.querySelector('.tek-slider__panel--active');\r\n            const activePanelID = parseInt(initialActiveSlide?.dataset.panelId);\r\n\r\n            if (initialActiveSlide && activePanelID !== 1 ) {\r\n                slideTo(activePanelID);\r\n                // wait for slide to init\r\n                initialActiveSlide.addEventListener('panelInit', () => {\r\n                    setBgColor(initialActiveSlide);\r\n                    setNav(activePanelID);\r\n                });\r\n            } else {\r\n                slides[0].addEventListener('panelInit', () => {\r\n                    // init first panel bgcolor\r\n                    setBgColor(slides[0]);\r\n                    // init first nav\r\n                    setNav(1);\r\n                });\r\n            }\r\n\r\n        } \r\n\r\n        mql.addEventListener(\"change\", (event) => {\r\n            if (event.matches && !args.isExperienceEditor) {\r\n                setTimeout(() => {\r\n                    initAnimation();\r\n                     // init first panel bgcolor\r\n                     setBgColor(slides[0]);\r\n                }, 200)\r\n                } else {\r\n                    ScrollTrigger.getById('tekSlider').disable(); //disable scrolltrigger\r\n                    gsap.set(args.scope, { clearProps: true }); //remove inline styles and reset css \r\n                    setNav(1); //reset active nav to slide 1\r\n                    setImg(1); //reset active image to slide 1\r\n            }\r\n        });\r\n\r\n        }\r\n\r\n    return function init(args) {\r\n        if (!args.isExperienceEditor) {\r\n            initTekSlider(args);\r\n        }\r\n    };\r\n    } \r\n);"]}