{"version":3,"file":"./modules/TeaserScrollSlider.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/TeaserScrollSlider/TeaserScrollSliderWithT.ts","webpack:///./modules/TeaserScrollSlider/index.ts","webpack:///./modules/TeaserScrollSlider/TeaserScrollSlider.ts"],"sourcesContent":["// import { getOptions } from '../../helpers/helperFunctions';\r\nimport { Swiper } from 'swiper';\r\nimport ClassWithTracking from '../../ClassWithTracking';\r\nimport TeaserScrollSlider from './TeaserScrollSlider';\r\nimport { addLayer } from '../../ClassWithTracking/helpers';\r\nimport { parseJSONSafe } from '../../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"TeaserScrollSlider\"]';\r\n\r\nexport default class TeaserScrollSliderWithT extends ClassWithTracking(TeaserScrollSlider) {\r\n slider: Swiper;\r\n trackingData: TrackingData[];\r\n eventParams: { photo_size?: string; navigation?: string; };\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 TeaserScrollSliderWithT(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(public element: HTMLElement) {\r\n super(element); \r\n this.eventParams = {\r\n photo_size: '[[GalleryAndSliderIneraction|{{media_size}}]]',\r\n\t\t\tnavigation: '[[GalleryAndSliderIneraction|{{event_type}}]]',\r\n }\r\n\r\n this.initTracking();\r\n \r\n document.addEventListener('niveax:breakpointchange', () => {\r\n this.initTracking();\r\n })\r\n }\r\n\r\n private initTracking(): void {\r\n this.trackingData = parseJSONSafe(this.element.dataset.tdata);\r\n\r\n if (!this.trackingData || !this.trackingData.length) {\r\n return;\r\n }\r\n\r\n if (this.slider && window.NiveaX.IsGA4Enabled) {\r\n this.slider.on('slideChange', () => this.onScrollBarMove());\r\n }\r\n }\r\n\r\n private onScrollBarMove(): void {\r\n const { activeIndex, previousIndex } = this.slider;\r\n let eventType = window.NiveaX.deviceType.isDesktop ? \"scroll\" : \"swipe\";\r\n \r\n if (activeIndex > previousIndex) {\r\n this.pushTrackingData(eventType, 'Next')\r\n }\r\n else {\r\n this.pushTrackingData(eventType, 'Prev')\r\n }\r\n }\r\n\r\n private pushTrackingData(eventType: string, direction: string): void { \r\n const trackingData = this.trackingData?.filter(item => item.Rule.includes(direction)).shift(),\r\n eventParams = trackingData?.Tevent.parameters;\r\n \r\n if(Object.keys(eventParams)) {\r\n if(eventParams?.navigation == this.eventParams.navigation) {\r\n eventParams.navigation = eventType\r\n }\r\n\r\n if(eventParams?.photo_size == this.eventParams.photo_size) {\r\n eventParams.photo_size = 'standart'\r\n }\r\n }\r\n \r\n trackingData && addLayer(trackingData.Tevent);\r\n }\r\n}\r\n\r\n// Hot Module Replacement\r\nif (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 TeaserScrollSliderWithT.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n TeaserScrollSliderWithT.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 TeaserScrollSliderWithT.setup(moduleSelector);\r\n}\r\n","import TeaserScrollSliderWithT from './TeaserScrollSliderWithT';\r\n\r\nexport default TeaserScrollSliderWithT;","// 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 = (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 = (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":["moduleSelector","TeaserScrollSliderWithT","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","super","this","eventParams","photo_size","navigation","initTracking","addEventListener","trackingData","tdata","length","slider","window","NiveaX","IsGA4Enabled","on","onScrollBarMove","activeIndex","previousIndex","eventType","deviceType","isDesktop","pushTrackingData","direction","item","Rule","includes","shift","Tevent","parameters","Object","keys","TeaserScrollSlider","init","sliderWrapperHorizontal","querySelector","sliderWrapperVertical","productItems","initProductStageVertical","initProductStageHorizontal","swiper","e","detail","console","log","destroySlider","getSwiperOptions","innerHTML","append","getDesktopMarkup","isMobile","isTablet","updateMarkup","getMobileMarkup","items","slidesNeeded","Math","round","map","_","i","index","productItem","splice","slide","slides","modules","slidesPerView","lazyPreloadPrevNext","spaceBetween","scrollbar","el","hide","draggable","snapOnRelease","dragSize","mousewheel","enabled","sensitivity","breakpoints","autoHeight","slidesMarkup","destroy"],"sourceRoot":""}