{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/PdpGalleryComponent.js"],"names":["PdpGalleryComponent","compEl","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","thumbs","$component","querySelectorAll","SELECTORS","images","slider","querySelector","currentSlide","slideVisible","gallery","closeBtn","galleryCloseBtn","galleryZoomImg","galleryThumbsBtn","slickMobileContainer","slickInstance","Component","galleryShow","activeThumb","loadingClass","isMobile","window","matchMedia","matches","_this2","_loop","thumb","addEventListener","targetId","dataset","targetImgId","classList","remove","CLASSNAMES","document","getElementById","add","_iteratorNormalCompletion","_didIteratorError","_iteratorError","undefined","_step","_iterator","Symbol","iterator","next","done","value","err","return","id","targetImg","scrollIntoView","scrollY","body","style","position","width","el","ctx","contains","galleryZoomThumb","setTimeout","activeImg","imgBox","createElement","setAttribute","myImg","galleryZoom","galleryImgAlt","append","btn","_this3","length","forEach","image","imgId","openMobileGallery","updateDesktopGallery","scrollTo","updateActiveThumbs","_this4","Promise","resolve","reject","moduleLoader","loadCarouselAndExecute","module","error","_this5","arguments","unslick","importSlick","then","instanceMobileSlick","catch","console","log","$","slick","dots","arrows","autoplay","centerMode","slidesToScroll","slidesToShow","infinite","variableWidth","responsive","thumbsHandler","galleryHandler","toggleSlickMobile"],"mappings":"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","file":"component-PdpGalleryComponent.chunks.js","sourcesContent":["import Component from '../abstracts/Component';\n\nexport default class PdpGalleryComponent extends Component {\n  get SELECTORS() {\n    return {\n      thumbs: '[data-gallery-thumb]',\n      slideVisible: '[data-gallery-main-img].on-view',\n      slider: '[data-gallery-slider]',\n      images: '[data-gallery-main-img]',\n      slickMobileContainer: '[data-slick-mobile]',\n      gallery: '[data-gallery]',\n      galleryCloseBtn: '[data-gallery-close]',\n      galleryThumbsBtn: '[data-gallery-zoom-thumb]',\n      galleryZoomImg: '[data-gallery-zoom-img]',\n    };\n  }\n\n  get CLASSNAMES() {\n    return {\n      slideVisible: 'on-view',\n      galleryShow: 'show',\n      activeThumb: 'active',\n      loadingClass: 'loading',\n    };\n  }\n\n  constructor(compEl) {\n    super(compEl);\n    this.thumbs = this.$component.querySelectorAll(this.SELECTORS.thumbs);\n    this.images = this.$component.querySelectorAll(this.SELECTORS.images);\n    this.slider = this.$component.querySelector(this.SELECTORS.slider);\n    this.currentSlide = this.$component.querySelector(\n      this.SELECTORS.slideVisible\n    );\n    this.gallery = this.$component.querySelector(this.SELECTORS.gallery);\n    this.closeBtn = this.$component.querySelector(\n      this.SELECTORS.galleryCloseBtn\n    );\n    this.galleryZoomImg = this.$component.querySelector(\n      this.SELECTORS.galleryZoomImg\n    );\n    this.galleryThumbsBtn = this.$component.querySelectorAll(\n      this.SELECTORS.galleryThumbsBtn\n    );\n    this.slickMobileContainer = this.$component.querySelector(\n      this.SELECTORS.slickMobileContainer\n    );\n    this.slickInstance = null;\n  }\n\n  isMobile() {\n    let mq = window.matchMedia('(max-width:767px)');\n    let isMobile = mq.matches;\n    return isMobile;\n  }\n\n  thumbsHandler() {\n    // loop\n    for (let thumb of this.thumbs) {\n      thumb.addEventListener('click', () => {\n        let targetId = thumb.dataset.targetImgId;\n        // remove visible class\n        this.currentSlide.classList.remove(this.CLASSNAMES.slideVisible);\n        // switch current slide\n        this.currentSlide = document.getElementById(targetId);\n        // add class to slide\n        this.currentSlide.classList.add(this.CLASSNAMES.slideVisible);\n        // remove thumb active class\n        document\n          .querySelector(\n            this.SELECTORS.thumbs + '.' + this.CLASSNAMES.activeThumb\n          )\n          .classList.remove(this.CLASSNAMES.activeThumb);\n        // add thumb active class\n        thumb.classList.add(this.CLASSNAMES.activeThumb);\n      });\n    }\n  }\n\n  openMobileGallery(id) {\n    // get target img\n    let targetImg = this.$component.querySelector(`[data-gallery-img=\"${id}\"]`);\n    // show gallery\n    this.gallery.classList.add(this.CLASSNAMES.galleryShow);\n    // scroll until the image for the mobile\n    targetImg.scrollIntoView();\n    scrollY = window.scrollY;\n    document.body.style.position = 'fixed';\n    document.body.style.width = '100%';\n  }\n\n  updateDesktopGallery(el) {\n    // global\n    let ctx = this;\n    // show desktop gallery\n    if (!this.gallery.classList.contains(this.CLASSNAMES.galleryShow))\n      this.gallery.classList.add(this.CLASSNAMES.galleryShow);\n    // set the id\n    let id = 'gallery_zoom_' + el.dataset.galleryZoomThumb;\n    // i want the fade effect\n    this.galleryZoomImg.classList.add(this.CLASSNAMES.loadingClass);\n    // let's wait the css transition\n    setTimeout(function() {\n      // remove the active if present\n      let activeImg = ctx.galleryZoomImg.querySelector('.active');\n      if (activeImg != null) activeImg.classList.remove('active');\n      // check if there is the div\n      if (ctx.galleryZoomImg.querySelector('#' + id) != null) {\n        // add selected active class\n        ctx.galleryZoomImg.querySelector('#' + id).classList.add('active');\n      } else {\n        // create box image\n        let imgBox = document.createElement('div');\n        imgBox.classList.add('single-image');\n        imgBox.classList.add('active');\n        imgBox.setAttribute('id', id);\n        // new image\n        let myImg = document.createElement('img');\n        myImg.setAttribute('src', el.dataset.galleryZoom);\n        myImg.setAttribute('alt', el.dataset.galleryImgAlt);\n        // append to box\n        imgBox.append(myImg);\n        // appending to div\n        ctx.galleryZoomImg.append(imgBox);\n      }\n    }, 500);\n    // show the active image\n    setTimeout(function() {\n      ctx.galleryZoomImg.classList.remove(ctx.CLASSNAMES.loadingClass);\n    }, 1000);\n  }\n\n  updateActiveThumbs(btn) {\n    // remove thumb active class\n    document\n      .querySelector(\n        this.SELECTORS.galleryThumbsBtn + '.' + this.CLASSNAMES.activeThumb\n      )\n      .classList.remove(this.CLASSNAMES.activeThumb);\n    // add thumb active class\n    btn.classList.add(this.CLASSNAMES.activeThumb);\n  }\n\n  galleryHandler() {\n    let scrollY;\n    if (this.images.length) {\n      this.images.forEach(image => {\n        image.addEventListener('click', () => {\n          // different behaviours\n          if (this.isMobile()) {\n            // mobile\n            let imgId = image.id;\n            this.openMobileGallery(imgId);\n          } else {\n            // open the gallery\n            this.updateDesktopGallery(image);\n          }\n        });\n      });\n    }\n    this.closeBtn.addEventListener('click', () => {\n      this.gallery.classList.remove(this.CLASSNAMES.galleryShow);\n      document.body.style.position = '';\n      window.scrollTo(0, scrollY);\n    });\n    // gallery zoom thumb actions\n    if (this.galleryThumbsBtn != null) {\n      this.galleryThumbsBtn.forEach(btn => {\n        btn.addEventListener('click', () => {\n          // open the gallery\n          this.updateDesktopGallery(btn);\n          // update the thumbs\n          this.updateActiveThumbs(btn);\n        });\n      });\n    }\n  }\n\n  importSlick() {\n    return new Promise((resolve, reject) => {\n      this.moduleLoader.loadCarouselAndExecute(\n        module => {\n          resolve(module);\n        },\n        error => {\n          reject(error);\n        }\n      );\n    });\n  }\n\n  toggleSlickMobile(bool = true) {\n    if (!bool) {\n      if (this.slickInstance !== null){\n        this.slickInstance.unslick();\n        this.slickInstance = null;\n      }\n      return;\n    }\n    this.importSlick()\n      .then(() => {\n        this.instanceMobileSlick();\n      })\n      .catch(err => {\n        console.log(err);\n      });\n  }\n\n  instanceMobileSlick() {\n    if (!this.slickMobileContainer) return;\n    this.log('PDP Gallery Mobile slick ON');\n    const opts = {\n      dots: true,\n      arrows: false,\n      autoplay: false,\n      centerMode: false,\n      slidesToScroll: 1,\n      slidesToShow: 1,\n      infinite: true,\n      variableWidth: false,\n      responsive: [],\n    };\n    this.slickInstance = $(this.slickMobileContainer).slick(opts);\n  }\n\n  render() {\n    this.log('Rendering...');\n    this.thumbsHandler();\n    this.galleryHandler();\n    this.toggleSlickMobile(this.isMobile());\n  }\n}\n"],"sourceRoot":""}