{"version":3,"sources":["webpack:///./src/client/default/js/components/zoomComponent.js","webpack:///./src/client/default/js/base/baseComponent.js"],"names":["ZoomComponent","element","bindHover","bindClick","this","CUSTOM_MESSAGES","THUMBNAIL_EVENTS","click","updateMainImage","zoomImageContainer","zoomContainer","$el","addEventListener","e","target","classList","contains","querySelector","img","document","EMIT","ZOOM_EVENTS","$on","handleFocusZoom","bind","handleBlurZoom","clearTimeout","deleteTimeout","SELECTORS","add","container","createElement","zoomUrl","encodeURI","decodeURI","$options","src","CLASSES","style","backgroundImage","appendChild","setTimeout","showZoom","moveZoom","$off","remove","cursor","dimentions","getBoundingClientRect","x","offsetX","y","offsetY","xpercent","Math","round","width","ypercent","height","backgroundPosition","url","setAttribute","image","srcset","dataset","index","leaveTimeout","enterTimeout","createContainer","destroyContainer","hideZoom","BaseComponent","_componentElement","_checkMessages","compOptions","options","Object","keys","filter","entry","includes","forEach","optionValue","cleanEntry","cleanOptionKey","JSON","parse","replace","convertType","deepFreeze","getAttribute","events","cb","elements","Bean","on","stopPropagation","one","off","fire","message","_loading","LOADER_EVENTS","show","body","error","icon","hide","option","optionReturn","key","str","charAt","toLocaleLowerCase","slice","BaseGiaComponent"],"mappings":"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","file":"js/component-zoomComponent-js.chunks.js","sourcesContent":["import BaseComponent from '../base/baseComponent';\n\nexport default class ZoomComponent extends BaseComponent {\n  get Messages() {\n    return {\n      [this.CUSTOM_MESSAGES.THUMBNAIL_EVENTS.click]: this.updateMainImage\n    };\n  }\n\n  get SELECTORS() {\n    return {\n      zoomImageContainer: '.js-zoom'\n    };\n  }\n\n  get CLASSES() {\n    return {\n      zoomContainer: 'js-zoom'\n    };\n  }\n\n  constructor(element) {\n    super(element);\n    this.bindHover();\n    this.bindClick();\n  }\n\n  bindClick() {\n    this.$el.addEventListener('click', (e) => {\n      if (e.target.classList.contains('js-zoom') || e.target.querySelector('.js-zoom')) {\n        const img = document.querySelector('.img-fluid');\n        this.EMIT(this.CUSTOM_MESSAGES.ZOOM_EVENTS.click, {\n          img: img\n        });\n      }\n    });\n\n    // this.$el.addEventListener('keydown', (e) => {\n    //   if (e.key === 'Enter' || (e.ctrlKey && e.altKey && e.code === 'Space')) {\n    //     e.preventDefault();\n    //     let jsZoom = this.$el.querySelector('.js-zoom');\n    //     if (jsZoom) {\n    //       jsZoom.focus();\n    //       jsZoom.click();\n    //     }\n    //   }\n    // });\n  }\n\n  bindHover() {\n    this.$on('mouseenter.zoom', this.handleFocusZoom.bind(this), this.$el);\n\n    this.$on('mouseleave.zoom', this.handleBlurZoom.bind(this), this.$el);\n\n    this.$on('focus.zoom', this.handleFocusZoom.bind(this), this.$el);\n\n    this.$on('blur.zoom', this.handleBlurZoom.bind(this), this.$el);\n  }\n\n  createContainer() {\n    clearTimeout(this.deleteTimeout);\n    const zoomContainer = this.$el.querySelector(this.SELECTORS.zoomImageContainer);\n    if (!zoomContainer) {\n      const container = document.createElement('div');\n      const zoomUrl = encodeURI(decodeURI(this.$options.src));\n      container.classList.add(this.CLASSES.zoomContainer);\n      container.style.backgroundImage = 'url(' + zoomUrl + ')';\n      this.$el.appendChild(container);\n      setTimeout(() => {\n        container.classList.add('visible');\n      }, 100);\n    } else {\n      zoomContainer.classList.add('visible');\n    }\n    setTimeout(() => {\n      this.$el.classList.add('zoom-visible');\n    }, 100);\n\n    this.showZoom();\n  }\n\n  showZoom() {\n    this.moveZoom();\n  }\n\n  hideZoom() {\n    this.$off('mousemove.zoom');\n  }\n\n  destroyContainer() {\n    const zoomContainer = this.$el.querySelector(this.SELECTORS.zoomImageContainer);\n    if (zoomContainer) {\n      zoomContainer.classList.remove('visible');\n      this.deleteTimeout = setTimeout(() => {\n        zoomContainer.remove();\n      }, 300);\n    }\n  }\n\n  moveZoom() {\n    this.$on(\n      'mousemove.zoom',\n      (e) => {\n        const cursor = /** @type {MouseEvent} */ (e);\n        const zoomContainer = /** @type {HTMLElement} */ (this.$el.querySelector(this.SELECTORS.zoomImageContainer));\n        var dimentions = zoomContainer.getBoundingClientRect();\n        // Calculate the position of the cursor inside the element (in pixels).>\n        var x = cursor.offsetX;\n        var y = cursor.offsetY;\n        // Calculate the position of the cursor as a percentage of the total width/height of the element.\n        var xpercent = Math.round(100 / (dimentions.width / x));\n        var ypercent = Math.round(100 / (dimentions.height / y));\n        // Update the background position of the image.\n        zoomContainer.style.backgroundPosition = xpercent + '% ' + ypercent + '%';\n      },\n      this.$el\n    );\n  }\n\n  updateMainImage(url) {\n    this.$el.setAttribute('data-option-src', url.url);\n    const image = /** @type {HTMLImageElement} */ (this.$el.querySelector('img'));\n    image.src = url.url;\n    image.srcset = url.srcset;\n    image.dataset.index = url.index;\n  }\n\n  handleFocusZoom(e) {\n    clearTimeout(this.leaveTimeout);\n    this.enterTimeout = setTimeout(() => {\n      this.createContainer();\n    }, 200);\n  }\n\n  handleBlurZoom(e) {\n    clearTimeout(this.enterTimeout);\n    this.leaveTimeout = setTimeout(() => {\n      this.$el.classList.remove('zoom-visible');\n      this.destroyContainer();\n      this.hideZoom();\n    }, 200);\n  }\n}\n","/* eslint-disable new-cap */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable no-underscore-dangle */\n\nimport Bean from 'bean';\nimport deepFreeze from '../utilities/freeze';\nimport BaseGiaComponent from './baseGiaComponent';\n\nexport default class BaseComponent extends BaseGiaComponent {\n  /**\n   * @returns {HTMLElement}\n   */\n  get $el() {\n    return /** @type {HTMLElement} */ (this._componentElement);\n  }\n\n  get $options() {\n    const compOptions = {};\n    const options = { ...this.$el.dataset };\n    const optionsEntires = Object.keys(options).filter((entry) => entry.includes('option'));\n    optionsEntires.forEach((entry) => {\n      const cleanEntry = BaseComponent.cleanOptionKey(entry);\n      let optionValue;\n      if (options[entry].includes('{') && options[entry].includes('}')) {\n        optionValue = JSON.parse(options[entry].replace(/'/g, '\"'));\n      } else {\n        optionValue = BaseComponent.convertType(options[entry]);\n      }\n      compOptions[cleanEntry] = optionValue;\n    });\n    return deepFreeze(compOptions);\n  }\n\n  get COMPONENT_NAME() {\n    return this.$el.getAttribute('data-component');\n  }\n\n  /**\n   *\n   * constructor\n   *\n   * @param {Element} element\n   */\n  constructor(element) {\n    super(element);\n    this._componentElement = element;\n    this._componentElement.setAttribute('data-component-init', 'true');\n    this._checkMessages();\n  }\n\n  static convertType(option) {\n    let optionReturn;\n    switch (option) {\n      case 'false':\n        optionReturn = false;\n        break;\n      case 'true':\n        optionReturn = true;\n        break;\n      case 'null':\n        optionReturn = null;\n        break;\n      default:\n        optionReturn = option;\n        break;\n    }\n\n    return optionReturn;\n  }\n\n  static cleanOptionKey(key) {\n    const str = key.replace('option', '');\n    return `${str.charAt(0).toLocaleLowerCase()}${str.slice(1)}`;\n  }\n\n  /**\n   *\n   * $on\n   *\n   * @param {String} events\n   * @param {Function} cb\n   * @param {Element} [element = this.$el]\n   * @param {Array|String|Element} [elements = null]\n   */\n  $on(events, cb, element = this.$el, elements = null) {\n    if (!element || !events || !cb) return;\n    if (!elements) {\n      Bean.on(element, events, (e) => {\n        if (e) e.stopPropagation();\n        cb(e);\n      });\n    } else {\n      Bean.on(element, events, elements, (e) => {\n        if (e) e.stopPropagation();\n        cb(e);\n      });\n    }\n  }\n\n  /**\n   *\n   * $one\n   *\n   * @param {String} events\n   * @param {Function} cb\n   * @param {Element} [element = this.$el]\n   */\n  $one(events, cb, element = this.$el) {\n    Bean.one(element, events, cb);\n  }\n\n  /**\n   *\n   * $off\n   *\n   * @param {String} events\n   * @param {Element} [element = this.$el]\n   */\n  $off(events, element = this.$el) {\n    Bean.off(element, events);\n  }\n\n  /**\n   *\n   * $fire\n   *\n   * @param {String} events\n   * @param {Element} [element = this.$el]\n   */\n  $fire(events, element = this.$el) {\n    Bean.fire(element, events);\n  }\n\n  /**\n   *\n   * Activate loader\n   *\n   * @param {HTMLElement} [container]\n   * @param {String} [message]\n   */\n  loading(container, message) {\n    this._loading = true;\n    this.EMIT(this.CUSTOM_MESSAGES.LOADER_EVENTS.show, {\n      container: container || document.body,\n      message: message ?? null\n    });\n  }\n\n  /**\n   *\n   * Deactivate loader\n   *\n   * @param {HTMLElement} [container]\n   * @param {String} [message]\n   * @param {Boolean} [error=false]\n   * @param {String} [icon]\n   */\n  endLoading(container, message, error = false, icon) {\n    this._loading = false;\n    setTimeout(() => {\n      if (!this._loading) {\n        this.EMIT(this.CUSTOM_MESSAGES.LOADER_EVENTS.hide, {\n          container: container || document.body,\n          message,\n          error,\n          icon\n        });\n      }\n    }, 400);\n  }\n}\n"],"sourceRoot":""}