{"version":3,"file":"lightbox.js","sources":["../../FrontEnd/PDP-FE/src/scripts/modules/lightbox.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper from 'swiper';\nimport { Navigation, Keyboard, Pagination, Controller } from 'swiper/modules';\nimport 'swiper/css/bundle';\nimport YouTubeIframeLoader from 'youtube-iframe';\nimport '../../scss/modules/_lightbox.scss';\n\ntype YoutubePlayer = {\n  playVideo: () => void;\n  pauseVideo: () => void;\n};\n\nclass Lightbox extends Component {\n  private videoId: string;\n  private player: YoutubePlayer | null = null;\n  public lightBoxSwiper: { slideToLoop?: (index: number) => void | undefined, activeIndex?: number };\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.videoId = this.el.dataset.videoId || '';\n    this.lightBoxSwiper = {};\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      pagination: this.el.querySelector<HTMLElement>('.swiper-pagination'),\n      closeBtn: this.el.querySelector<HTMLElement>('.close'),\n      videoContainer: this.el.querySelector<HTMLElement>('.video-container'),\n      shareBtn: this.el.querySelector<HTMLElement>('.lightbox__share-btn'),\n      toastElement: document.querySelector<HTMLElement>('#toast'),\n      boatHeaderTitle: document.querySelector<HTMLElement>('.boat-header__title')\n    };\n\n    this.initYoutubePlayer();\n  }\n\n  addListeners() {\n    (this.dom.closeBtn as HTMLElement).addEventListener('click', () => {\n      (this.dom.el as HTMLElement).classList.remove('show');\n      this.player?.pauseVideo();\n    });\n    window.addEventListener('mediaGallerySlideChange', e =>\n      this.handleGallerySlideChange(e as CustomEvent)\n    );\n    (this.dom.shareBtn as HTMLElement).addEventListener('click', this.handleShareClick.bind(this));\n  }\n\n  handleShareClick() {\n    if (navigator.share) {\n      navigator\n        .share({\n          title: document.title,\n          text: (this.dom.boatHeaderTitle as HTMLElement).textContent || '',\n          url: window.location.href\n        })\n        .then(() => console.log('Successful share'))\n        .catch(error => console.log('Error sharing', error));\n    } else {\n      navigator.clipboard.writeText(window.location.href);\n      (this.dom.toastElement as HTMLElement)?.classList.add('show');\n      setTimeout(() => {\n        (this.dom.toastElement as HTMLElement)?.classList.remove('show');\n      }, 3000);\n    }\n  }\n\n  initYoutubePlayer() {\n    YouTubeIframeLoader.load(YT => {\n      this.player = new YT.Player(this.dom.videoContainer, {\n        width: '100%',\n        height: '100%',\n        videoId: this.videoId\n      });\n    });\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.lightBoxSwiper = new Swiper(this.dom.swiperContainer as HTMLElement, {\n      pagination: {\n        el: this.dom.pagination as HTMLElement,\n        type: 'fraction'\n      },\n      initialSlide,\n      slidesPerView: 'auto',\n      centeredSlides: true,\n      loop: true,\n      spaceBetween: 16,\n      on: {\n        realIndexChange: swiper => {\n          if (this.el.classList.contains('show')) {\n            window.dispatchEvent(\n              new CustomEvent('lightboxSlideChange', { detail: swiper.realIndex })\n            );\n          }\n        }\n      }\n    });\n  }\n\n  handleGallerySlideChange(e: CustomEvent) {\n    if (this.lightBoxSwiper?.slideToLoop) {\n      this.lightBoxSwiper.slideToLoop(e.detail);\n    }\n  }\n}\n\nexport default Lightbox;"],"names":["Lightbox","Component","el","__publicField","_a","error","YouTubeIframeLoader","YT","Swiper","Navigation","Keyboard","Pagination","Controller","hash","mediaType","slideIndex","initialSlide","swiper"],"mappings":"0SAYA,MAAMA,UAAiBC,CAAU,CAK/B,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EALFC,EAAA,gBACAA,EAAA,cAA+B,MAChCA,EAAA,uBAIL,KAAK,QAAU,KAAK,GAAG,QAAQ,SAAW,GAC1C,KAAK,eAAiB,GACtB,KAAK,WAAW,CAClB,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,GAAI,KAAK,GACT,gBAAiB,KAAK,GAAG,cAA2B,SAAS,EAC7D,cAAe,KAAK,GAAG,cAA2B,iBAAiB,EACnE,YAAa,KAAK,GAAG,iBAA8B,eAAe,EAClE,WAAY,KAAK,GAAG,cAA2B,oBAAoB,EACnE,SAAU,KAAK,GAAG,cAA2B,QAAQ,EACrD,eAAgB,KAAK,GAAG,cAA2B,kBAAkB,EACrE,SAAU,KAAK,GAAG,cAA2B,sBAAsB,EACnE,aAAc,SAAS,cAA2B,QAAQ,EAC1D,gBAAiB,SAAS,cAA2B,qBAAqB,CAAA,EAG5E,KAAK,kBAAkB,CACzB,CAEA,cAAe,CACZ,KAAK,IAAI,SAAyB,iBAAiB,QAAS,IAAM,OAChE,KAAK,IAAI,GAAmB,UAAU,OAAO,MAAM,GACpDC,EAAA,KAAK,SAAL,MAAAA,EAAa,YAAW,CACzB,EACM,OAAA,iBAAiB,0BAA2B,GACjD,KAAK,yBAAyB,CAAgB,CAAA,EAE/C,KAAK,IAAI,SAAyB,iBAAiB,QAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC,CAC/F,CAEA,kBAAmB,OACb,UAAU,MACZ,UACG,MAAM,CACL,MAAO,SAAS,MAChB,KAAO,KAAK,IAAI,gBAAgC,aAAe,GAC/D,IAAK,OAAO,SAAS,IACtB,CAAA,EACA,KAAK,IAAM,QAAQ,IAAI,kBAAkB,CAAC,EAC1C,MAAeC,GAAA,QAAQ,IAAI,gBAAiBA,CAAK,CAAC,GAErD,UAAU,UAAU,UAAU,OAAO,SAAS,IAAI,GACjDD,EAAA,KAAK,IAAI,eAAT,MAAAA,EAAuC,UAAU,IAAI,QACtD,WAAW,IAAM,QACdA,EAAA,KAAK,IAAI,eAAT,MAAAA,EAAuC,UAAU,OAAO,SACxD,GAAI,EAEX,CAEA,mBAAoB,CAClBE,EAAoB,KAAWC,GAAA,CAC7B,KAAK,OAAS,IAAIA,EAAG,OAAO,KAAK,IAAI,eAAgB,CACnD,MAAO,OACP,OAAQ,OACR,QAAS,KAAK,OAAA,CACf,CAAA,CACF,CACH,CAEA,YAAa,CACXC,EAAO,IAAI,CAACC,EAAYC,EAAUC,EAAYC,CAAU,CAAC,EACzD,MAAMC,EAAO,OAAO,SAAS,KAAK,UAAU,CAAC,EACvC,CAACC,EAAWC,CAAU,EAAIF,EAAK,MAAM,GAAG,EACxCG,EAAeF,GAAA,MAAAA,EAAW,SAAS,UAAYC,EAAa,SAASA,CAAU,EAAI,EAAI,EAE7F,KAAK,eAAiB,IAAIP,EAAO,KAAK,IAAI,gBAAgC,CACxE,WAAY,CACV,GAAI,KAAK,IAAI,WACb,KAAM,UACR,EACA,aAAAQ,EACA,cAAe,OACf,eAAgB,GAChB,KAAM,GACN,aAAc,GACd,GAAI,CACF,gBAA2BC,GAAA,CACrB,KAAK,GAAG,UAAU,SAAS,MAAM,GAC5B,OAAA,cACL,IAAI,YAAY,sBAAuB,CAAE,OAAQA,EAAO,UAAW,CAAA,CAGzE,CACF,CAAA,CACD,CACH,CAEA,yBAAyB,EAAgB,QACnCb,EAAA,KAAK,iBAAL,MAAAA,EAAqB,aAClB,KAAA,eAAe,YAAY,EAAE,MAAM,CAE5C,CACF"}