{"version":3,"sources":["webpack:///./cartridges/app_designholding/cartridge/client/default/js/components/image-zoom/image-zoom.js","webpack:///./cartridges/app_designholding/cartridge/client/default/js/components/image-zoom/index.js"],"names":["CLICK_AREA_HOOK","IMAGE_WRAPPER_HOOK","IMAGE_HOOK","HIGHRES_IMAGE_HOOK","FULLSCREEN_BUTTON_HOOK","CLOSE_BUTTON_HOOK","PREV_BUTTON_HOOK","NEXT_BUTTON_HOOK","IS_TOUCH_CLASS","ZOOMED_CLASS","FULLSCREEN_CLASS","FULLSCREEN_BODY_CLASS","LOADER_CLASS","IS_IMAGE_FULL_SCREEN","NOSCROLL_CLASS","ImageZoom","constructor","element","clickArea","querySelector","imgWrapper","lowresImage","highresImg","fullscreenButton","closeButton","prevButton","nextButton","highresImgSrc","dataset","src","zoom","fullscreenZoom","isZoomedIn","isFullscreen","bindEvents","html","classList","contains","addEventListener","e","clickHandler","updateImagePosition","resetZoom","toggleFullScreen","Events","$trigger","id","$on","toggleHighResImage","removeAttribute","zoomFactor","elRect","getBoundingClientRect","elWidth","offsetWidth","elHeight","offsetHeight","mouseX","clientX","mouseY","clientY","posXpercentage","left","posYpercentage","top","factorX","factorY","maxMoveX","maxMoveY","transX","transY","style","transform","resetImagePosition","show","body","innerHTML","forceFullScreen","document"],"mappings":"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","file":"js/ImageZoom.js","sourcesContent":["import { html, body } from '@utilities/dom-elements';\nimport Events from '@utilities/events';\n\nconst CLICK_AREA_HOOK = '[js-hook-image-zoom-click-area]';\nconst IMAGE_WRAPPER_HOOK = '[js-hook-image-zoom-image-wrapper]';\nconst IMAGE_HOOK = '[js-hook-image]';\nconst HIGHRES_IMAGE_HOOK = '[js-hook-image-zoom-highres-image]';\nconst FULLSCREEN_BUTTON_HOOK = '[js-hook-image-zoom-full-screen-button]';\nconst CLOSE_BUTTON_HOOK = '[js-hook-image-zoom-close-button]';\nconst PREV_BUTTON_HOOK = '[js-hook-image-zoom-prev-button]';\nconst NEXT_BUTTON_HOOK = '[js-hook-image-zoom-next-button]';\n\nconst IS_TOUCH_CLASS = 'is-touch';\nconst ZOOMED_CLASS = 'image-zoom--zoomed';\nconst FULLSCREEN_CLASS = 'image-zoom--fullscreen';\nconst FULLSCREEN_BODY_CLASS = 'fl-zoom-open';\nconst LOADER_CLASS = 'has--loader';\nconst IS_IMAGE_FULL_SCREEN = 'is--image-full-screen';\nconst NOSCROLL_CLASS = 'no--scroll';\n\nclass ImageZoom {\n  constructor(element) {\n    this.element = element;\n    this.clickArea = this.element.querySelector(CLICK_AREA_HOOK);\n    this.imgWrapper = this.element.querySelector(IMAGE_WRAPPER_HOOK);\n    this.lowresImage = this.element.querySelector(IMAGE_HOOK);\n    this.highresImg = this.element.querySelector(HIGHRES_IMAGE_HOOK);\n    this.fullscreenButton = this.element.querySelector(FULLSCREEN_BUTTON_HOOK);\n    this.closeButton = this.element.querySelector(CLOSE_BUTTON_HOOK);\n    this.prevButton = this.element.querySelector(PREV_BUTTON_HOOK);\n    this.nextButton = this.element.querySelector(NEXT_BUTTON_HOOK);\n    this.highresImgSrc = this.highresImg.dataset.src;\n    this.zoom = this.element.dataset.zoom;\n    this.fullscreenZoom = this.element.dataset.fullscreenZoom;\n\n    this.isZoomedIn = false;\n    this.isFullscreen = false;\n\n    this.bindEvents();\n  }\n\n  bindEvents() {\n    if (!html.classList.contains(IS_TOUCH_CLASS)) {\n      this.clickArea.addEventListener('click', (e) => this.clickHandler(e));\n      this.clickArea.addEventListener('mousemove', (e) => this.updateImagePosition(e));\n      this.clickArea.addEventListener('mouseleave', (e) => this.resetZoom(e));\n    }\n\n    this.fullscreenButton.addEventListener('click', (e) => this.toggleFullScreen(e, true));\n    this.closeButton.addEventListener('click', (e) => this.toggleFullScreen(e));\n\n    if (this.prevButton) {\n      this.prevButton.addEventListener('click', () => {\n        Events.$trigger('high-res-image-gallery::prev', this.element.id);\n      });\n    }\n\n    if (this.nextButton) {\n      this.nextButton.addEventListener('click', () => {\n        Events.$trigger('high-res-image-gallery::next', this.element.id);\n      });\n    }\n\n    Events.$on(`zoom-image::show-highres-image-${this.element.id}`, () => this.toggleHighResImage(true, true));\n    Events.$on(`zoom-image::hide-highres-image-${this.element.id}`, () => this.toggleHighResImage());\n  }\n\n  updateImagePosition(e) {\n    if (!this.isZoomedIn) {\n      this.imgWrapper.removeAttribute('style');\n    } else {\n      const zoomFactor = this.element.classList.contains(FULLSCREEN_CLASS) ? this.fullscreenZoom : this.zoom;\n\n      const elRect = this.element.getBoundingClientRect();\n      const elWidth = this.element.offsetWidth;\n      const elHeight = this.element.offsetHeight;\n\n      const mouseX = e.clientX;\n      const mouseY = e.clientY;\n\n      const posXpercentage = (mouseX - elRect.left) / elWidth * 100;\n      const posYpercentage = (mouseY - elRect.top) / elHeight * 100;\n\n      const factorX = -((posXpercentage - 50) * 0.02);\n      const factorY = -((posYpercentage - 50) * 0.02);\n\n      const maxMoveX = ((elWidth * zoomFactor) - elWidth) / 2;\n      const maxMoveY = ((elHeight * zoomFactor) - elHeight) / 2;\n\n      const transX = `${maxMoveX * factorX}px`;\n      const transY = `${maxMoveY * factorY}px`;\n\n      this.imgWrapper.style.transform = `translate3d(${transX}, ${transY}, 0px) scale(${zoomFactor})`;\n    }\n  }\n\n  resetImagePosition() {\n    this.isZoomedIn = false;\n    this.imgWrapper.removeAttribute('style');\n  }\n\n  clickHandler(e) {\n    if (!this.element.classList.contains(FULLSCREEN_CLASS)) {\n      this.toggleHighResImage(!this.isZoomedIn);\n    }\n\n    this.element.classList[this.isZoomedIn ? 'remove' : 'add'](ZOOMED_CLASS);\n\n    this.isZoomedIn = !this.isZoomedIn;\n\n    this.updateImagePosition(e);\n  }\n\n  toggleHighResImage(show, isFullscreen) {\n    if (isFullscreen) {\n      this.isFullscreen = true;\n    }\n\n    this.element.classList[show && this.isFullscreen ? 'add' : 'remove'](LOADER_CLASS);\n    body.classList[show && this.isFullscreen ? 'add' : 'remove'](IS_IMAGE_FULL_SCREEN);\n\n    if (show) {\n      this.highresImg.innerHTML = `<img alt=\"\" src=\"${this.highresImgSrc}\" js-hook-objectfit-img>`;\n    }\n    // specifically check for false, undefined should not remove image\n    else if (show === false) {\n      this.highresImg.innerHTML = '';\n    }\n  }\n\n  resetZoom(e) {\n    if (this.isZoomedIn) {\n      this.clickHandler(e);\n    }\n  }\n\n  toggleFullScreen(e, forceFullScreen) {\n    this.resetImagePosition();\n\n    if (!html.classList.contains(IS_TOUCH_CLASS)) {\n      this.resetZoom(e);\n    }\n\n    this.isFullscreen = forceFullScreen ? true : !this.isFullscreen;\n\n    this.element.classList[this.isFullscreen ? 'add' : 'remove'](FULLSCREEN_CLASS);\n    html.classList[this.isFullscreen ? 'add' : 'remove'](NOSCROLL_CLASS);\n    document.querySelector('body').classList[this.isFullscreen ? 'add' : 'remove'](FULLSCREEN_BODY_CLASS);\n\n    if (this.isFullscreen) {\n      this.lowresImage.querySelector('img').removeAttribute('sizes');\n    }\n\n    this.toggleHighResImage(this.isFullscreen);\n  }\n}\n\nexport default ImageZoom;\n","import ImageZoom from './image-zoom';\n\nexport default ImageZoom;\n"],"sourceRoot":""}