{"version":3,"file":"media-gallery.js","sources":["../../FrontEnd/PDP-FE/src/scripts/modules/media-gallery.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper from 'swiper';\nimport { Navigation, Keyboard, Pagination, Controller } from 'swiper/modules';\nimport 'swiper/css/bundle';\n\nclass MediaGallery extends Component {\n public mediaGallerySwiper: {\n slideToLoop?: (index: number) => void | undefined;\n };\n\n constructor(el: HTMLElement) {\n super(el);\n this.mediaGallerySwiper = {};\n this.initSwiper();\n }\n\n setupDefaults() {\n this.dom = {\n el: this.el,\n swiperContainer: this.el.querySelector<HTMLElement>('.swiper'),\n swiperWrapper: this.el.querySelector<HTMLElement>('.swiper-wrapper'),\n swiperItems: this.el.querySelectorAll<HTMLElement>('.swiper-slide'),\n nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev'),\n pagination: this.el.querySelector<HTMLElement>('.swiper-pagination'),\n paginatioLightbox: document.querySelector<HTMLElement>('.lightbox .swiper-pagination'),\n lightbox: document.querySelector<HTMLElement>('.lightbox'),\n galleryImages: this.el.querySelectorAll<HTMLElement>('.media-gallery__img'),\n videoBtn: this.el.querySelector<HTMLElement>('.media-video'),\n tourBtn: this.el.querySelector<HTMLElement>('.media-tour'),\n videoContainer: document.querySelector<HTMLElement>('.modal-content.video'),\n imagesContainer: document.querySelector<HTMLElement>('.modal-content.images'),\n tourContainer: document.querySelector<HTMLElement>('.modal-content.tour')\n };\n\n this.initSwiper();\n this.checkUrlHash();\n }\n\n addListeners() {\n window.matchMedia('(max-width: 768px)').addEventListener('change', e => {\n if (e.matches) {\n (this.dom.galleryImages as NodeList).forEach(image => {\n image.addEventListener('click', this.handleImageClick.bind(this));\n });\n }\n });\n\n if (window.innerWidth < 768) {\n (this.dom.galleryImages as NodeList).forEach(image => {\n image.addEventListener('click', this.handleImageClick.bind(this));\n });\n }\n\n if (this.dom.videoBtn) {\n (this.dom.videoBtn as HTMLElement).addEventListener(\n 'click',\n this.handleVideoClick.bind(this)\n );\n }\n if (this.dom.tourBtn) {\n (this.dom.tourBtn as HTMLElement).addEventListener('click', this.handleTourClick.bind(this));\n }\n window.addEventListener('lightboxSlideChange', e =>\n this.handleLigthboxSlideChange(e as CustomEvent)\n );\n }\n\n checkUrlHash() {\n const hash = window.location.hash.substring(1);\n const [mediaType] = hash.split(',');\n\n if (mediaType === 'video' && this.dom.videoBtn) {\n this.handleVideoClick();\n }\n if (mediaType === 'tour' && this.dom.tourBtn) {\n this.handleTourClick();\n }\n if (mediaType && mediaType.includes('image')) {\n if (window.innerWidth < 768) {\n this.handleImageClick();\n }\n }\n }\n\n handleImageClick() {\n (this.dom.lightbox as HTMLElement)?.classList.add('show');\n (this.dom.paginatioLightbox as HTMLElement)?.classList.remove('hide');\n (this.dom.videoContainer as HTMLElement)?.classList.add('hide');\n (this.dom.imagesContainer as HTMLElement)?.classList.remove('hide');\n (this.dom.tourContainer as HTMLElement)?.classList.add('hide');\n }\n\n handleVideoClick() {\n (this.dom.lightbox as HTMLElement)?.classList.add('show');\n (this.dom.paginatioLightbox as HTMLElement)?.classList.add('hide');\n (this.dom.videoContainer as HTMLElement)?.classList.remove('hide');\n (this.dom.imagesContainer as HTMLElement)?.classList.add('hide');\n (this.dom.tourContainer as HTMLElement)?.classList.add('hide');\n }\n\n handleTourClick() {\n (this.dom.lightbox as HTMLElement)?.classList.add('show');\n (this.dom.paginatioLightbox as HTMLElement)?.classList.add('hide');\n (this.dom.videoContainer as HTMLElement)?.classList.add('hide');\n (this.dom.imagesContainer as HTMLElement)?.classList.add('hide');\n (this.dom.tourContainer as HTMLElement)?.classList.remove('hide');\n }\n\n initSwiper() {\n Swiper.use([Navigation, Keyboard, Pagination, Controller]);\n const hash = window.location.hash.substring(1);\n const [mediaType, slideIndex] = hash.split(',');\n const initialSlide = mediaType?.includes('image') && slideIndex ? parseInt(slideIndex) - 1 : 0;\n\n this.mediaGallerySwiper = new Swiper(this.dom.swiperContainer as HTMLElement, {\n pagination: {\n el: this.dom.pagination as HTMLElement,\n type: 'fraction'\n },\n initialSlide,\n navigation: {\n nextEl: this.dom.nextArrow as HTMLElement,\n prevEl: this.dom.prevArrow as HTMLElement\n },\n loop: true,\n on: {\n realIndexChange: swiper => {\n if (!(this.dom.lightbox as HTMLElement)?.classList.contains('show')) {\n window.dispatchEvent(\n new CustomEvent('mediaGallerySlideChange', { detail: swiper.realIndex })\n );\n }\n }\n }\n });\n }\n\n handleLigthboxSlideChange(e: CustomEvent) {\n if (this.mediaGallerySwiper?.slideToLoop) this.mediaGallerySwiper?.slideToLoop(e.detail);\n }\n}\n\nexport default MediaGallery;"],"names":["MediaGallery","Component","el","__publicField","e","image","hash","mediaType","_a","_b","_c","_d","_e","Swiper","Navigation","Keyboard","Pagination","Controller","slideIndex","initialSlide","swiper"],"mappings":"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"}