{"version":3,"file":"./modules/HotSpot.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/HotSpot/HotSpot.ts","webpack:///./modules/HotSpot/HotSpotWithT.ts","webpack:///./modules/HotSpot/index.ts","webpack:///./modules/LayerAdvance.ts","webpack:///./modules/LayerCircle.ts"],"sourcesContent":["import LayerCircle from '../LayerCircle';\r\nimport { isImageLoaded, createElementFromString } from '../../helpers/DOMHelpers';\r\nconst moduleSelector = '[data-module=\"HotSpot\"]';\r\n\r\nexport default class HotSpot {\r\n imageWidth: string;\r\n imageHeight: string;\r\n layer: LayerCircle;\r\n hotspotData: any;\r\n image: HTMLImageElement;\r\n hotspotArea: HTMLElement;\r\n contentArray: any[];\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 HotSpot(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(public element: HTMLElement) {\r\n this.hotspotArea = element;\r\n this.image = this.element.querySelector('.nx-u-image img');\r\n if(this.image===null) return;\r\n this.layer = new LayerCircle(document.body, { layerThemingClasses: this.getHotspotLayerClasses(element), layerThemingStyles: this.getHotspotLayerStyles(element) });\r\n\r\n this.hotspotData = this.hotspotArea.querySelector('.nx-content-zone__hotspot-data').innerHTML;\r\n if (this.hotspotData) {\r\n this.contentArray = JSON.parse(this.hotspotData);\r\n }\r\n\r\n this.mobileDesktopChangeEventListener();\r\n this.init();\r\n }\r\n\r\n private getHotspotLayerClasses(element: HTMLElement): string[] {\r\n let classes = element.getAttribute('data-hotspot-layer-css-classes').split(\" \");\r\n classes.push(\"nx-layer__wrapper--hotspot\");\r\n\r\n return classes;\r\n }\r\n\r\n private getHotspotLayerStyles(element: HTMLElement): string {\r\n return element.getAttribute('data-hotspot-layer-css-styles');\r\n }\r\n\r\n protected init(): HotSpot {\r\n isImageLoaded(this.image) ? this.createHotspots() : this.setImageEventHandler();\r\n return this;\r\n }\r\n\r\n private setImageEventHandler(): HotSpot {\r\n this.image.addEventListener('load', () => this.createHotspots());\r\n return this;\r\n }\r\n\r\n private createHotspots(deviceTypeOnChange?: string): HotSpot {\r\n if (this.contentArray) {\r\n this.contentArray.forEach(hotspotObject => {\r\n \r\n\r\n let { X, Y, XMobile, YMobile, ...hotspotData } = hotspotObject;\r\n let deviceTypeisDesktop = !!deviceTypeOnChange ? deviceTypeOnChange === 'isDesktop' : window.NiveaX.deviceType.isDesktop;\r\n if (!deviceTypeisDesktop && !!XMobile && !!YMobile) {\r\n X = XMobile;\r\n Y = YMobile;\r\n this.imageWidth = this.hotspotArea.dataset.mobileImageWidth;\r\n this.imageHeight = this.hotspotArea.dataset.mobileImageHeight;\r\n } else {\r\n this.imageWidth = this.hotspotArea.dataset.imageWidth;\r\n this.imageHeight = this.hotspotArea.dataset.imageHeight;\r\n }\r\n\r\n const hotSpotNode = this.responsiveHotspot(X, Y, this.imageWidth, this.imageHeight, hotspotData.CssClasses, hotspotData.CssStyles);\r\n\r\n hotspotData.HotspotDetail.forEach(hotspotDetail => {\r\n const layerContent = this.getLayerContent(hotspotDetail);\r\n\r\n hotSpotNode.addEventListener('click', () => {\r\n this.trackElementClick(hotspotDetail);\r\n this.layer.adjustTransformOrigin(hotSpotNode)\r\n .insertContent(createElementFromString((layerContent)))\r\n .open(() => {\r\n NiveaX.initModules()\r\n })\r\n });\r\n })\r\n });\r\n }\r\n return this;\r\n }\r\n\r\n protected trackElementClick(hotspotDetail) { } // Do NOT remove it, is overrrided on HotSpotWithT.ts\r\n\r\n private mobileDesktopChangeEventListener(): HotSpot {\r\n document.addEventListener('niveax:breakpointchange', (e) => {\r\n this.destroyHotSpots();\r\n this.createHotspots((e).detail.deviceType);\r\n });\r\n return this;\r\n }\r\n\r\n destroyHotSpots() {\r\n this.element.querySelectorAll('.nx-hotspot').forEach(e => e.remove());\r\n }\r\n\r\n private placeHotspot(x_pos, y_pos, cssClasses: string, cssStyles: string): HTMLElement {\r\n let hotSpotArea = this.hotspotArea.querySelector('.nx-content-zone__hotspot-wrapper');\r\n let hotspot = document.createElement(\"div\");\r\n let innerCircle = document.createElement('span');\r\n\r\n hotspot.appendChild(innerCircle);\r\n\r\n hotspot.setAttribute(\"class\", `nx-hotspot nx-u-wave-animation ${cssClasses}`);\r\n hotspot.setAttribute(\"style\", cssStyles);\r\n hotspot.style.left = x_pos + '%';\r\n hotspot.style.top = y_pos + '%';\r\n\r\n innerCircle.className = 'nx-hotspot-btn nx-u-plus-minus-btn';\r\n\r\n hotSpotArea.appendChild(hotspot);\r\n\r\n return hotspot;\r\n }\r\n\r\n private responsiveHotspot(xPos, yPos, imageWidth, imageHeight, cssClasses, cssStyles): HTMLElement {\r\n let xPercentage = xPos / imageWidth * 100;\r\n let yPercentage = yPos / imageHeight * 100;\r\n\r\n return this.placeHotspot(xPercentage, yPercentage, cssClasses, cssStyles);\r\n }\r\n\r\n private getLayerContent(details): string {\r\n const { Title, Copy, Link: { Title: LinkTitle, Url: LinkUrl } } = details;\r\n const layerContent = `\r\n
\r\n
\r\n
\r\n

${Title}

\r\n
\r\n
${Copy}
\r\n ${LinkTitle}\r\n
\r\n
\r\n \r\n
\r\n
`;\r\n\r\n return layerContent;\r\n }\r\n}","/// \r\nimport HotSpot from './HotSpot';\r\nimport ClassWithTracking from \"../../ClassWithTracking\";\r\nimport { addLayer } from '../../ClassWithTracking/helpers';\r\n// import Tracking from \"../../Tracking\";\r\n\r\nconst moduleSelector = '[data-module=\"HotSpot\"]';\r\n\r\nexport default class HotspotWithT extends ClassWithTracking(HotSpot) {\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 HotspotWithT(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 }\r\n\r\n protected trackElementClick(eventTitle: HotSpotOptions) {\r\n if (window.NiveaX.IsUAEnabled) {\r\n addLayer({\r\n event: 'ga_event',\r\n eventCategory: 'Hotspot Content',\r\n eventAction: 'Mapping Spots',\r\n eventLabel: eventTitle.Title,\r\n eventNonInteraction: false\r\n });\r\n }\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 HotspotWithT.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n HotspotWithT.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 HotspotWithT.setup(moduleSelector);\r\n}","import HotSpot from './HotSpotWithT';\r\nexport default HotSpot;","import LayerBasic, { BasicLayerOptions } from './LayerBasic';\r\nimport { Optional } from '../typings/mapped-types';\r\nimport {\r\n getOptions,\r\n requestAnimationFrameTimer,\r\n requestNextAnimationFrame,\r\n IOSScroll,\r\n} from '../helpers/helperFunctions';\r\nimport {\r\n addClass,\r\n addClasses,\r\n removeClasses,\r\n} from '../helpers/DOMHelpers';\r\n\r\nconst spinnerClasses = ['nx-u-spinner', 'nx-u-spinner--medium'];\r\n\r\nexport interface LayerAdvanceOptions extends BasicLayerOptions {\r\n beforeOpen: AsyncCallback;\r\n afterOpen: AsyncCallback;\r\n beforeClose: AsyncCallback;\r\n afterClose: AsyncCallback;\r\n}\r\n\r\nexport default class LayerAdvance extends LayerBasic {\r\n protected options: LayerAdvanceOptions;\r\n\r\n constructor(element: HTMLElement, options: Optional = {}) {\r\n super(element, options);\r\n\r\n this.options = getOptions(this.element, this.options);\r\n\r\n this.init();\r\n }\r\n\r\n protected getDefaultOptions(): Optional {\r\n const defOptions = super.getDefaultOptions();\r\n\r\n return {\r\n ...defOptions,\r\n layerModifierClasses: `${defOptions.layerMainClass}--page`,\r\n layerCloseBtnModifierClass: `${defOptions.layerMainClass}__close-btn--page`,\r\n layerCloseIconClass: `${defOptions.layerCloseIconClass} nx-close-icon--thin`,\r\n beforeOpen: async () => { await window.NiveaX.initModules(); },\r\n afterOpen: async () => { },\r\n beforeClose: async () => { },\r\n afterClose: async () => { },\r\n };\r\n }\r\n\r\n protected get isOpen(): boolean {\r\n return document.body.contains(this.layer);\r\n }\r\n\r\n showSpinner(): LayerAdvance {\r\n addClasses(this.layer.querySelector('.nx-layer__wrapper'), ...spinnerClasses);\r\n\r\n if (!this.isOpen) IOSScroll.prevent(true);\r\n super.open();\r\n\r\n return this;\r\n }\r\n\r\n\r\n async open(callback: Callback = () => { }): Promise {\r\n const {\r\n layerMainClass,\r\n beforeOpen,\r\n afterOpen,\r\n } = this.options;\r\n\r\n await beforeOpen();\r\n\r\n this.backButton();\r\n\r\n if (!this.isOpen) IOSScroll.prevent(true);\r\n\r\n removeClasses(this.layer.querySelector('.nx-layer__wrapper'), ...spinnerClasses);\r\n\r\n super.open();\r\n\r\n requestNextAnimationFrame(() => this.layer.classList.add(`${layerMainClass}--open`));\r\n\r\n window.NiveaX.loadShopPrices();\r\n\r\n await afterOpen();\r\n\r\n callback();\r\n }\r\n\r\n async close(callback: Callback = () => { }): Promise {\r\n const {\r\n layerMainClass,\r\n beforeClose,\r\n afterClose,\r\n } = this.options;\r\n\r\n await beforeClose();\r\n\r\n sessionStorage.removeItem('layers');\r\n\r\n addClass(this.layer, `${layerMainClass}--closing`);\r\n\r\n requestAnimationFrameTimer(() => {\r\n removeClasses(this.layer, `${layerMainClass}--open`, `${layerMainClass}--closing`);\r\n super.close();\r\n }, 400);\r\n\r\n if (document.body.classList.contains('nx-u-lock-screen') || document.body.classList.contains('nx-u-prevent-scroll'))\r\n IOSScroll.allow();\r\n\r\n await afterClose();\r\n\r\n callback();\r\n }\r\n\r\n backButton(){\r\n let layersArray;\r\n let layers;\r\n let getLayers = sessionStorage.getItem('layers');\r\n\r\n if (getLayers) {\r\n layersArray = JSON.parse(getLayers);\r\n\r\n if (layersArray.includes(location.hash)) {\r\n let index = layersArray.findIndex(i => i == location.hash) + 1;\r\n layersArray = layersArray.slice(0, index);\r\n layers = [...layersArray]\r\n } else {\r\n layers = [...layersArray, location.hash]\r\n }\r\n } else {\r\n layers = [location.hash]\r\n }\r\n\r\n sessionStorage.setItem('layers', `${JSON.stringify(layers)}`);\r\n\r\n if (layers.length > 1) {\r\n this.layer.classList.add('nx-layer--show-back-tbn');\r\n } else {\r\n this.layer.classList.remove('nx-layer--show-back-tbn');\r\n }\r\n }\r\n}\r\n","import LayerAdvance, { LayerAdvanceOptions } from './LayerAdvance';\r\nimport { Optional } from '../typings/mapped-types';\r\nimport { objectToStyleString, hasClass, toggleClass, addClasses } from '../helpers/DOMHelpers';\r\nimport { requestAnimationFrameTimer } from '../helpers/helperFunctions';\r\n\r\nconst moduleSelector = '[data-module=\"LayerCircle\"]';\r\n\r\ninterface LayerCircleOptions extends LayerAdvanceOptions {\r\n expandBtnClass: string;\r\n expandLayerModifierClass: string;\r\n layerLandscapeModifierClass: string;\r\n layerThemingClasses: string[];\r\n layerThemingStyles: string;\r\n}\r\n\r\nexport default class LayerCircle extends LayerAdvance {\r\n protected options: LayerCircleOptions;\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 LayerCircle(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(element: HTMLElement, options: Optional = {}) {\r\n super(element, options);\r\n this.addFlyoutClick()\r\n .addExpandBtnClick()\r\n .adjustLandscapeMode()\r\n .listenToLandscapeMode()\r\n .addTheming();\r\n }\r\n\r\n protected getDefaultOptions(): Optional {\r\n const defOptions = super.getDefaultOptions();\r\n\r\n return {\r\n ...defOptions,\r\n layerModifierClasses: `${defOptions.layerMainClass}--circle`,\r\n layerCloseBtnModifierClass: `${defOptions.layerMainClass}__close-btn--circle`,\r\n layerCloseIconClass: `${defOptions.layerCloseIconClass} nx-close-icon--thin`,\r\n layerLandscapeModifierClass: `${defOptions.layerMainClass}--landscape`,\r\n expandBtnClass: 'nx-expander__button',\r\n expandLayerModifierClass: `${defOptions.layerMainClass}--expand`,\r\n layerThemingClasses: [],\r\n layerThemingStyles: '',\r\n beforeOpen: async () => { await NiveaX.initModules(); },\r\n afterOpen: async () => { },\r\n beforeClose: async () => { },\r\n afterClose: async () => { },\r\n };\r\n }\r\n\r\n protected addFlyoutClick(): LayerCircle {\r\n this.layer.addEventListener('click', ({ target }) => target === this.layer && this.close());\r\n return this;\r\n }\r\n\r\n protected addExpandBtnClick(): LayerCircle {\r\n const { expandBtnClass, expandLayerModifierClass } = this.options;\r\n this.layer.addEventListener('click',\r\n ({ target }: Event) =>\r\n hasClass(target, expandBtnClass) && this.layer.classList.toggle(expandLayerModifierClass));\r\n return this;\r\n }\r\n\r\n protected adjustLandscapeMode(): LayerCircle {\r\n const { layerLandscapeModifierClass } = this.options;\r\n\r\n toggleClass(\r\n this.layer,\r\n layerLandscapeModifierClass,\r\n window.innerHeight < 528);\r\n\r\n return this;\r\n }\r\n\r\n protected listenToLandscapeMode(): LayerCircle {\r\n NiveaX.addToEventStore('resize', () => this.adjustLandscapeMode(), window);\r\n return this;\r\n }\r\n\r\n protected addTheming() {\r\n const { layerThemingClasses, layerThemingStyles } = this.options;\r\n\r\n addClasses(this.wrapper, ...layerThemingClasses);\r\n this.wrapper.style.cssText += layerThemingStyles;\r\n\r\n return this;\r\n }\r\n\r\n adjustOptions(options: Optional = {}): LayerCircle {\r\n this.options = { ...this.options, ...options };\r\n return this;\r\n }\r\n\r\n adjustTransformOrigin(element: HTMLElement): LayerCircle {\r\n const { top, left } = element.getBoundingClientRect();\r\n const { offsetHeight, offsetWidth } = element;\r\n const styles = {\r\n 'transform-origin': `${left + offsetWidth / 2}px ${top + offsetHeight / 2}px`,\r\n };\r\n\r\n this.layer.setAttribute('style', objectToStyleString(styles));\r\n return this;\r\n }\r\n\r\n async close(callback: Callback = () => { }): Promise {\r\n const { expandLayerModifierClass } = this.options;\r\n\r\n await super.close();\r\n\r\n requestAnimationFrameTimer(() => {\r\n this.layer.classList.remove(expandLayerModifierClass);\r\n callback();\r\n }, 400);\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 LayerCircle.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n LayerCircle.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 LayerCircle.setup(moduleSelector);\r\n}"],"names":["HotSpot","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","this","hotspotArea","image","querySelector","layer","body","layerThemingClasses","getHotspotLayerClasses","layerThemingStyles","getHotspotLayerStyles","hotspotData","innerHTML","contentArray","JSON","parse","mobileDesktopChangeEventListener","init","classes","getAttribute","split","push","createHotspots","setImageEventHandler","addEventListener","deviceTypeOnChange","hotspotObject","X","Y","XMobile","YMobile","window","NiveaX","deviceType","isDesktop","imageWidth","mobileImageWidth","imageHeight","mobileImageHeight","hotSpotNode","responsiveHotspot","CssClasses","CssStyles","HotspotDetail","hotspotDetail","layerContent","getLayerContent","trackElementClick","adjustTransformOrigin","insertContent","open","initModules","e","destroyHotSpots","detail","remove","placeHotspot","x_pos","y_pos","cssClasses","cssStyles","hotSpotArea","hotspot","createElement","innerCircle","appendChild","setAttribute","style","left","top","className","xPos","yPos","xPercentage","yPercentage","details","Title","Copy","Link","LinkTitle","Url","LinkUrl","moduleSelector","HotspotWithT","super","eventTitle","IsUAEnabled","event","eventCategory","eventAction","eventLabel","eventNonInteraction","spinnerClasses","LayerAdvance","options","getDefaultOptions","defOptions","layerModifierClasses","layerMainClass","layerCloseBtnModifierClass","layerCloseIconClass","beforeOpen","async","afterOpen","beforeClose","afterClose","isOpen","contains","showSpinner","callback","backButton","classList","add","loadShopPrices","close","sessionStorage","removeItem","layersArray","layers","getLayers","getItem","includes","location","hash","index","findIndex","i","slice","setItem","stringify","length","LayerCircle","addFlyoutClick","addExpandBtnClick","adjustLandscapeMode","listenToLandscapeMode","addTheming","layerLandscapeModifierClass","expandBtnClass","expandLayerModifierClass","target","toggle","innerHeight","addToEventStore","wrapper","cssText","adjustOptions","getBoundingClientRect","offsetHeight","offsetWidth","styles"],"sourceRoot":""}