{"version":3,"file":"./modules/TeaserScrollSlider-TeaserScrollSlider.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/TeaserScrollSlider/TeaserScrollSlider.ts"],"sourcesContent":["// import { getOptions } from '../../helpers/helperFunctions';\r\nimport { Swiper } from 'swiper';\r\nimport { Scrollbar, Mousewheel } from 'swiper/modules';\r\nimport { addClass, createDiv, removeClass, removeClasses } from '../../helpers/DOMHelpers';\r\nimport { SwiperOptions } from 'swiper/types'; \r\n\r\nconst moduleSelector = '[data-module=\"TeaserScrollSlider\"]';\r\n\r\nexport default class TeaserScrollSlider {\r\n    slider: Swiper;\r\n    sliderWrapperHorizontal: HTMLElement;\r\n    sliderWrapperVertical: HTMLElement;\r\n    productItems: HTMLElement[];\r\n\r\n    static setup(selector: string = moduleSelector): void {\r\n        Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n            new TeaserScrollSlider(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n        this.init()\r\n    }\r\n\r\n    init() {\r\n        this.sliderWrapperHorizontal = this.element.querySelector('.nx-product-stage__grid--horizontal');\r\n        this.sliderWrapperVertical = this.element.querySelector('.nx-product-stage__grid--vertical');\r\n        this.productItems = Array.from(this.element.querySelectorAll('.nx-product-stage__grid--item'));\r\n\r\n\r\n        if (this.sliderWrapperVertical) {\r\n            this.initProductStageVertical();\r\n        }\r\n\r\n        if (this.sliderWrapperHorizontal) {\r\n            this.initProductStageHorizontal();\r\n        }\r\n    }\r\n\r\n    private initProductStageVertical(): void {\r\n        const swiper = this.element.querySelector('.swiper') as HTMLElement;\r\n     \r\n        document.addEventListener('niveax:breakpointchange', (e) => {\r\n            const deviceType = (<any>e).detail.deviceType;\r\n            console.log(deviceType);\r\n\r\n            if (deviceType === \"isMobile\" || deviceType === \"isTablet\") {\r\n                this.destroySlider();\r\n                this.slider = new Swiper(swiper, this.getSwiperOptions());\r\n            }\r\n            else {\r\n                this.destroySlider();\r\n            }\r\n        });\r\n\r\n        if (window.NiveaX.deviceType.isDesktop) {\r\n            removeClasses(this.element, ...['nx-u-spinner', 'nx-u-spinner--medium']);\r\n            return;\r\n        }\r\n\r\n        if (!window.NiveaX.deviceType.isDesktop) {\r\n            this.slider = new Swiper(swiper, this.getSwiperOptions())\r\n        }\r\n    }\r\n\r\n    private initProductStageHorizontal() {\r\n        const swiper = this.element.querySelector('.swiper') as HTMLElement;\r\n\r\n        if (window.NiveaX.deviceType.isDesktop) {\r\n            this.sliderWrapperHorizontal.innerHTML = \"\";\r\n            this.sliderWrapperHorizontal.append(...this.getDesktopMarkup());\r\n        }\r\n\r\n        if (window.NiveaX.deviceType.isMobile || window.NiveaX.deviceType.isTablet) {\r\n            this.productItems.forEach(item => addClass(item, 'swiper-slide'))\r\n        }\r\n\r\n        this.slider = new Swiper(swiper, this.getSwiperOptions());\r\n\r\n        document.addEventListener('niveax:breakpointchange', (e) => {\r\n            const deviceType = (<any>e).detail.deviceType;\r\n            console.log(window.NiveaX.deviceType);\r\n\r\n            if (deviceType == \"isMobile\" || deviceType == \"isTablet\") {\r\n                this.destroySlider();\r\n                this.updateMarkup(this.getMobileMarkup());\r\n                this.slider = new Swiper(swiper, this.getSwiperOptions());\r\n            }\r\n            else {\r\n                this.destroySlider();\r\n                this.updateMarkup(this.getDesktopMarkup());\r\n                this.productItems.forEach(item => removeClass(item, 'swiper-slide'));\r\n                this.slider = new Swiper(swiper, this.getSwiperOptions());\r\n            }\r\n        });\r\n    }\r\n\r\n    private getDesktopMarkup(): HTMLElement[] {\r\n        const items = [...this.productItems],\r\n            slidesNeeded = Math.round(this.productItems.length / 2);\r\n\r\n        const slides = Array.from({ length: slidesNeeded }).map((_, i) => {\r\n            const index = i == 0 ? i = 1 : i = 2,\r\n                productItem = items.splice(0, index),\r\n                slide = createDiv('swiper-slide')\r\n            slide.append(...productItem);\r\n\r\n            return slide\r\n        });\r\n\r\n        return slides\r\n    }\r\n\r\n    private getMobileMarkup(): HTMLElement[] {\r\n        const slides = [...this.productItems];\r\n        slides.forEach(item => addClass(item, 'swiper-slide'));\r\n\r\n        return slides\r\n    }\r\n\r\n    private getSwiperOptions(): SwiperOptions {\r\n        return {\r\n            modules: [Scrollbar, Mousewheel],\r\n            slidesPerView: \"auto\",\r\n            lazyPreloadPrevNext: 2,\r\n            spaceBetween: 8,\r\n            direction: 'horizontal',\r\n            on: {\r\n                init: () => {\r\n                    removeClasses(this.element, ...['nx-u-spinner', 'nx-u-spinner--medium'])\r\n                },\r\n            },\r\n            scrollbar: {\r\n                el: '.swiper-scrollbar',\r\n                hide: false,\r\n                draggable: true,\r\n                snapOnRelease: true,\r\n                dragSize: 'auto',\r\n            },\r\n            mousewheel: {\r\n                enabled: true,\r\n                sensitivity: 4,\r\n            },\r\n            breakpoints: {\r\n                320: {\r\n                    autoHeight: true,\r\n                },\r\n                1024: {\r\n                    spaceBetween: 16,\r\n                    autoHeight: false,\r\n                },\r\n            }\r\n        }\r\n    }\r\n\r\n    private updateMarkup(slidesMarkup: HTMLElement[]): void {\r\n        this.sliderWrapperHorizontal.innerHTML = \"\";\r\n        this.sliderWrapperHorizontal.append(...slidesMarkup);\r\n    }\r\n\r\n    private destroySlider() {\r\n        this.slider?.destroy(true, true);\r\n    }\r\n}\r\n\r\n// // Hot Module Replacement\r\n// if (module.hot) {\r\n//     let nodesCache: HMRNodes[] = Array.from(document.querySelectorAll(moduleSelector)).map((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n\r\n//     TeaserScrollSlider.setup(moduleSelector);\r\n\r\n//     module.hot.accept(() => {\r\n//         TeaserScrollSlider.setup(moduleSelector);\r\n//     });\r\n//     module.hot.dispose(() => {\r\n//         nodesCache.forEach(({ nodeToReplace, nodeOrigin }) => { nodeToReplace = nodeToReplace.parentElement.replaceChild(nodeOrigin.cloneNode(true), nodeToReplace) });\r\n//     });\r\n// } else {\r\n//     TeaserScrollSlider.setup(moduleSelector);\r\n// }\r\n"],"names":["TeaserScrollSlider","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","this","init","sliderWrapperHorizontal","querySelector","sliderWrapperVertical","productItems","initProductStageVertical","initProductStageHorizontal","swiper","addEventListener","e","deviceType","detail","console","log","destroySlider","slider","getSwiperOptions","window","NiveaX","isDesktop","innerHTML","append","getDesktopMarkup","isMobile","isTablet","item","updateMarkup","getMobileMarkup","items","slidesNeeded","Math","round","length","map","_","i","index","productItem","splice","slide","slides","modules","slidesPerView","lazyPreloadPrevNext","spaceBetween","direction","on","scrollbar","el","hide","draggable","snapOnRelease","dragSize","mousewheel","enabled","sensitivity","breakpoints","autoHeight","slidesMarkup","destroy"],"sourceRoot":""}