{"version":3,"file":"./modules/HotSpot.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/HotSpot/index.ts","webpack:///./modules/HotSpot/HotSpotWithT.ts","webpack:///./modules/LayerAdvance.ts","webpack:///./modules/HotSpot/HotSpot.ts","webpack:///./modules/LayerCircle.ts"],"sourcesContent":["import HotSpot from './HotSpotWithT';\r\nexport default HotSpot;","/// \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 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 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}","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":["moduleSelector","HotspotWithT","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","super","trackElementClick","eventTitle","window","NiveaX","IsUAEnabled","event","eventCategory","eventAction","eventLabel","Title","eventNonInteraction","spinnerClasses","LayerAdvance","options","this","init","getDefaultOptions","defOptions","layerModifierClasses","layerMainClass","layerCloseBtnModifierClass","layerCloseIconClass","beforeOpen","async","initModules","afterOpen","beforeClose","afterClose","isOpen","body","contains","layer","showSpinner","querySelector","prevent","open","callback","backButton","classList","add","loadShopPrices","close","sessionStorage","removeItem","allow","layersArray","layers","getLayers","getItem","JSON","parse","includes","location","hash","index","findIndex","i","slice","setItem","stringify","length","remove","HotSpot","hotspotArea","image","layerThemingClasses","getHotspotLayerClasses","layerThemingStyles","getHotspotLayerStyles","hotspotData","innerHTML","contentArray","mobileDesktopChangeEventListener","classes","getAttribute","split","push","createHotspots","setImageEventHandler","addEventListener","deviceTypeOnChange","hotspotObject","X","Y","XMobile","YMobile","deviceType","isDesktop","imageWidth","mobileImageWidth","imageHeight","mobileImageHeight","hotSpotNode","responsiveHotspot","CssClasses","CssStyles","HotspotDetail","hotspotDetail","layerContent","getLayerContent","adjustTransformOrigin","insertContent","e","destroyHotSpots","detail","placeHotspot","x_pos","y_pos","cssClasses","cssStyles","hotSpotArea","hotspot","createElement","innerCircle","appendChild","setAttribute","style","left","top","className","xPos","yPos","xPercentage","yPercentage","details","Copy","Link","LinkTitle","Url","LinkUrl","LayerCircle","addFlyoutClick","addExpandBtnClick","adjustLandscapeMode","listenToLandscapeMode","addTheming","layerLandscapeModifierClass","expandBtnClass","expandLayerModifierClass","target","toggle","innerHeight","addToEventStore","wrapper","cssText","adjustOptions","getBoundingClientRect","offsetHeight","offsetWidth","styles"],"sourceRoot":""}