{"version":3,"file":"productGallery-e5fb2a7c.js","sources":["../../../../../../src/scripts/modules/productGallery.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper from 'swiper';\nimport 'swiper/swiper-bundle.css';\nimport { Navigation } from 'swiper/modules';\n\n\nSwiper.use([Navigation]);\n\nclass ProductGallery extends Component {\n imagesCount: number;\n swiper: Swiper;\n\n constructor(el: HTMLElement) {\n super(el);\n this.imagesCount = 0;\n\n this.init();\n this.buildGalleryLightBox();\n }\n\n\n setupDefaults() {\n this.dom = {\n inner: this.el.querySelector('.product-detail__gallery-inner')\n };\n }\n\n init() {\n this.imagesCount = (this.dom.inner as HTMLElement).querySelectorAll('img').length;\n\n (this.dom.inner as HTMLElement).querySelectorAll('img').forEach((image, index) => {\n const button = document.createElement('button');\n button.classList.add('product-detail__gallery-item');\n button.dataset.index = index.toString();\n button.appendChild(image);\n (this.dom.inner as HTMLElement).appendChild(button);\n });\n\n this.dom.galleryItems = (this.dom.inner as HTMLElement).querySelectorAll(\n '.product-detail__gallery-item'\n );\n\n if (this.imagesCount > 6) {\n const overlay = document.createElement('div');\n overlay.classList.add('product-detail__gallery-item-overlay');\n const totalCount = this.imagesCount - 6;\n const label = (this.el.dataset.viewMoreLabel as string).replace('[count]', totalCount.toString());\n\n overlay.innerHTML = `${label}`;\n const lastImage = this.dom.galleryItems[5];\n lastImage.appendChild(overlay);\n (this.dom.inner as HTMLElement).dataset.imagesCount = '6';\n } else {\n (this.dom.inner as HTMLElement).dataset.imagesCount = this.imagesCount.toString();\n }\n\n (this.dom.inner as HTMLElement).dataset.initialized = 'initialized';\n }\n\n buildGalleryLightBox() {\n this.dom.lightbox = document.createElement('dialog');\n this.dom.lightbox.classList.add('product-detail__gallery-lightbox');\n this.dom.lightbox.innerHTML = `\n
\n \n
\n ${\n this.imagesCount > 0\n ? `
\n \n \n \n
`\n : ''\n }\n
\n
\n
\n ${\n this.imagesCount > 0\n ? `
\n \n \n \n
`\n : ''\n }\n ${\n this.imagesCount > 0\n ? '
'\n : ''\n }\n
\n
\n `;\n\n document.body.appendChild(this.dom.lightbox);\n const sliderContainer = this.dom.lightbox.querySelector(\n '.product-detail__gallery-lightbox-content .swiper-container'\n );\n const swiperWrapper = this.dom.lightbox.querySelector(\n '.product-detail__gallery-lightbox-content .swiper-wrapper'\n );\n\n this.dom.lightboxClose = this.dom.lightbox.querySelector(\n '.product-detail__gallery-lightbox-close'\n );\n this.dom.lightboxInner = this.dom.lightbox.querySelector(\n '.product-detail__gallery-lightbox-inner'\n );\n this.dom.lightboxPagination = this.dom.lightbox.querySelector(\n '.product-detail__gallery-lightbox-pagination'\n );\n\n (this.dom.inner as HTMLElement).querySelectorAll('img').forEach((image) => {\n const swiperSlide = document.createElement('div');\n swiperSlide.classList.add('swiper-slide');\n swiperSlide.appendChild(image.cloneNode(true));\n (swiperWrapper as HTMLElement).appendChild(swiperSlide);\n });\n\n this.swiper = new Swiper(sliderContainer, {\n slidesPerView: 1,\n spaceBetween: 10,\n navigation: {\n nextEl: (this.dom.lightboxInner as HTMLElement).querySelector(\n '.product-detail__gallery-lightbox-next'\n ),\n prevEl: (this.dom.lightboxInner as HTMLElement).querySelector(\n '.product-detail__gallery-lightbox-prev'\n )\n },\n on: {\n update: (swiper: Swiper) => {\n (this.dom.lightboxPagination as HTMLElement).innerHTML = `${swiper.activeIndex + 1}/${\n swiper.slides.length\n }`;\n },\n slideChange: (swiper: Swiper) => {\n (this.dom.lightboxPagination as HTMLElement).innerHTML = `${swiper.activeIndex + 1}/${\n swiper.slides.length\n }`;\n }\n }\n });\n\n (this.dom.lightboxClose as HTMLElement).addEventListener(\n 'click',\n this.closeGalleryLightBox.bind(this)\n );\n this.dom.lightbox.addEventListener(\n 'click',\n this.handleClickOutside.bind(this)\n );\n (this.dom.galleryItems as NodeList).forEach((item) => {\n item.addEventListener('click', this.displayGalleryLightBox.bind(this));\n });\n }\n\n displayGalleryLightBox(event: Event) {\n const target = event.currentTarget as HTMLElement;\n const index = target.dataset.index;\n\n this.swiper.slideTo(index);\n (this.dom.lightbox as HTMLDialogElement).show();\n this.swiper.update();\n }\n\n closeGalleryLightBox() {\n (this.dom.lightbox as HTMLDialogElement).close();\n }\n\n handleClickOutside(event: Event) {\n const target = event.currentTarget as HTMLElement;\n if (\n event.target === this.dom.lightbox &&\n !(this.dom.lightboxInner as HTMLElement).contains(target)\n ) {\n this.closeGalleryLightBox();\n }\n }\n}\n\nexport default ProductGallery;\n"],"names":["Swiper","Navigation","ProductGallery","Component","el","__publicField","image","index","button","overlay","totalCount","label","sliderContainer","swiperWrapper","swiperSlide","swiper","item","event","target"],"mappings":"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"}