{"version":3,"file":"./modules/HotSpot-HotSpot.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/LayerAdvance.ts","webpack:///./modules/HotSpot/HotSpot.ts","webpack:///./modules/LayerCircle.ts"],"sourcesContent":["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":["spinnerClasses","LayerAdvance","constructor","element","options","super","this","init","getDefaultOptions","defOptions","layerModifierClasses","layerMainClass","layerCloseBtnModifierClass","layerCloseIconClass","beforeOpen","async","window","NiveaX","initModules","afterOpen","beforeClose","afterClose","isOpen","document","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","setup","selector","Array","from","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","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","trackElementClick","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","Title","Copy","Link","LinkTitle","Url","LinkUrl","moduleSelector","LayerCircle","addFlyoutClick","addExpandBtnClick","adjustLandscapeMode","listenToLandscapeMode","addTheming","layerLandscapeModifierClass","expandBtnClass","expandLayerModifierClass","target","toggle","innerHeight","addToEventStore","wrapper","cssText","adjustOptions","getBoundingClientRect","offsetHeight","offsetWidth","styles"],"sourceRoot":""}