{"version":3,"sources":["webpack:///./modules/ThumbnailScrollBar.ts"],"names":["__webpack_require__","r","__webpack_exports__","_js_libs_tiny_slider_js__WEBPACK_IMPORTED_MODULE_0__","_TrackingGA4__WEBPACK_IMPORTED_MODULE_1__","ThumbnailScrollBar","element","_this","this","thumbnailElement","document","querySelector","thumbnailSliderWrapper","closest","stageItems","querySelectorAll","length","ShowMoreButton","StageWrapper","TheStage","thumbnailImageHeight","isSingleItemStage","addEventListener","showItems","onResizeHandler","Eucerin","isMobile","InitSlider","scrollTop","arrowTop","classList","add","thumbnailListCalc","arrowBottom","remove","setHeightToStage","initLoadMoveStageImages","sliderModule","desktopToggleAnimation","setup","selector","Array","from","filter","node","dataset","moduleInitialized","forEach","prototype","isDesktop","window","innerWidth","hideShowMoreButton","isTablet","removeAttribute","setTimeout","hasAttribute","destroySlider","thumbnailSlider","Object","container","items","mouseDrag","slideBy","swipeAngle","speed","navContainer","navAsThumbnails","events","on","destroy","stageItemsHeight","offsetHeight","style","maxHeight","stageHeight","pdpIntroHeight","stageElement","minHeight","parameter","display"],"mappings":"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","file":"./modules/ThumbnailScrollBar.e9a8b884.js","sourcesContent":["/// <reference path=\"../typings/facelift.d.ts\" />\r\n/// <reference path=\"../typings/tiny-slider.d.ts\" />\r\n//import { createElementFromString } from '../helpers/domhelpers';\r\nconst moduleSelector = '[data-module=\"ThumbnailScrollBar\"]';\r\nimport { tns } from '../../js/libs/tiny-slider.js'\r\nimport {productImageGA4} from '../TrackingGA4'\r\n\r\n\r\nexport default class ThumbnailScrollBar {\r\n    stageItems;\r\n    thumbnailElement: HTMLElement;\r\n    thumbnailSliderWrapper;\r\n    arrowTop: HTMLElement;\r\n    arrowBottom: HTMLElement;\r\n    ShowMoreButton: HTMLElement;\r\n    StageWrapper: HTMLElement;\r\n    TheStage: HTMLElement;\r\n    thumbnailImageHeight;\r\n    thumbnailListCalc: number;\r\n    scrollElements: number;\r\n    isSafari;\r\n    isIE;\r\n    init;\r\n    isSingleItemStage: boolean;\r\n    thumbnailSlider;\r\n\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 ThumbnailScrollBar(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(public element: HTMLElement) {\r\n\r\n        const thumbnailElement: HTMLElement = document.querySelector(\".uk-thumbnav\");\r\n        this.thumbnailElement = thumbnailElement;\r\n        this.thumbnailSliderWrapper = this.element.closest(\".thumbnail-slider\");\r\n        this.stageItems = document.querySelectorAll(\".thumbnail-slider .stage-wrapper > ul > li\").length;\r\n        this.ShowMoreButton = document.querySelector('.btn.show-more-btn');\r\n        this.StageWrapper = document.querySelector('.stage-wrapper');\r\n        this.TheStage = document.querySelector('.eucerin-cp.cp-product-stage');\r\n        this.thumbnailImageHeight = 97;\r\n        this.isSingleItemStage = this.stageItems > 1 ? false : true;\r\n        if (this.isSingleItemStage) {\r\n            //this.TheStage.classList.add(\"single-item-stage\");\r\n        }\r\n        this.ShowMoreButton ? this.ShowMoreButton.addEventListener('click', () => this.showItems()) : \"\";\r\n        this.onResizeHandler();\r\n\r\n        if (Eucerin.isMobile && !this.isSingleItemStage) {\r\n            this.InitSlider();\r\n\r\n            this.thumbnailElement.addEventListener(\"scroll\", () => {\r\n\r\n                if (this.thumbnailElement.scrollTop === 0) {\r\n                    this.arrowTop.classList.add(\"hidden-top\");\r\n                } else if (this.thumbnailElement.scrollTop >= this.thumbnailListCalc) {\r\n                    this.arrowBottom.classList.add(\"hidden-bottom\");\r\n                } else {\r\n                    this.arrowTop.classList.remove(\"hidden-top\");\r\n                    this.arrowBottom.classList.remove(\"hidden-bottom\");\r\n                }\r\n            });\r\n        } else if (!Eucerin.isMobile) {\r\n            this.setHeightToStage();\r\n        }\r\n\r\n        this.initLoadMoveStageImages();\r\n\r\n        document.addEventListener('Eucerin:deviceChanged', () => this.sliderModule())\r\n        document.addEventListener('Eucerin:resizeEnd', () => {\r\n            this.desktopToggleAnimation();\r\n            this.initLoadMoveStageImages();\r\n            this.onResizeHandler();\r\n        });\r\n\r\n    }\r\n\r\n    private initLoadMoveStageImages() {\r\n\r\n        if (Eucerin.isDesktop && window.innerWidth < 1250) {\r\n            this.ShowMoreButton ? this.hideShowMoreButton(6) : \"\";\r\n\r\n        } else if (Eucerin.isDesktop && window.innerWidth >= 1250) {\r\n            this.ShowMoreButton ? this.hideShowMoreButton(4) : \"\";\r\n        }\r\n\r\n        if (Eucerin.isTablet) {\r\n            this.ShowMoreButton ? this.hideShowMoreButton(2) : \"\";\r\n        }\r\n    }\r\n\r\n    private onResizeHandler() {\r\n        var stageItems = <HTMLElement>document.querySelector('.uk-slideshow-items');\r\n\r\n        if (!Eucerin.isMobile) {\r\n            stageItems.removeAttribute('style');\r\n\r\n            setTimeout(() => {\r\n                this.setHeightToStage();\r\n            }, 250);\r\n        }\r\n    }\r\n\r\n    private sliderModule() {\r\n        if (!Eucerin.isMobile && this.TheStage.hasAttribute('uk-slideshow')) {\r\n            this.destroySlider();\r\n        }\r\n\r\n        if (Eucerin.isMobile && !this.isSingleItemStage && (!this.TheStage.hasAttribute('uk-slideshow'))) {\r\n            this.InitSlider();\r\n        }\r\n    }\r\n\r\n    private InitSlider() {\r\n        this.thumbnailSlider = tns({\r\n            container: this.thumbnailSliderWrapper.querySelector('.uk-slideshow-items'),\r\n            items: 1,\r\n            \"mouseDrag\": true,\r\n            \"slideBy\": \"page\",\r\n            \"swipeAngle\": false,\r\n            \"speed\": 400,\r\n            \"navContainer\": \".uk-thumbnav-vertical\",\r\n            \"navAsThumbnails\": true,\r\n        });\r\n\r\n        this.thumbnailSlider.events.on('touchMove', () => {\r\n            this.element.querySelector(\".tns-nav-active\") && this.element.querySelector(\".tns-nav-active\").classList.remove(\".tns-nav-active\");\r\n        });\r\n\r\n        Eucerin.isMobile ? productImageGA4() : \"\";\r\n    }\r\n\r\n    private destroySlider() {\r\n        this.thumbnailSlider.destroy();\r\n    }\r\n\r\n    private showItems() {\r\n        this.StageWrapper.classList.add(\"opened\");\r\n        var stageElement = <HTMLElement>document.querySelector('.cp-product-stage');\r\n        stageElement.removeAttribute('style');\r\n    }\r\n\r\n    private desktopToggleAnimation() {\r\n        var stageItems = <HTMLElement>document.querySelector('.uk-slideshow-items');\r\n        var stageItemsHeight = stageItems.offsetHeight;\r\n        stageItems.style.maxHeight = `${stageItemsHeight}px`;\r\n    }\r\n\r\n    private setHeightToStage() {\r\n        var pdpIntroElement = <HTMLElement>document.querySelector('.cp-product-intro');\r\n        var pdpIntroHeight = pdpIntroElement.offsetHeight;\r\n        var stageElement = <HTMLElement>document.querySelector('.cp-product-stage');\r\n        var stageHeight;\r\n        stageElement.removeAttribute('style');\r\n        if (stageElement.offsetHeight < pdpIntroHeight) {\r\n            stageHeight = pdpIntroHeight;\r\n            stageElement.style.minHeight = `${stageHeight}px`;\r\n        } else if (stageElement.offsetHeight > pdpIntroHeight && stageElement.hasAttribute('style')) {\r\n            stageElement.removeAttribute('style');\r\n        }\r\n    }\r\n\r\n    private hideShowMoreButton(parameter) {\r\n        if (this.stageItems <= parameter) {\r\n            this.ShowMoreButton.style.display = \"none\";\r\n        } else {\r\n            this.ShowMoreButton.style.display = \"block\";\r\n        }\r\n    }\r\n}\r\n\r\nnew ThumbnailScrollBar.setup();"],"sourceRoot":""}