{"version":3,"file":"resources-block.js","sources":["../../FrontEnd/PDP-FE/src/scripts/modules/resources-block.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/_resources-block.scss';\n\ntype YoutubePlayer = {\n  playVideo: () => void;\n  pauseVideo: () => void;\n};\n\nclass ResourcesBlock extends Component {\n  private videoId: string;\n  private player: YoutubePlayer | null = null;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.videoId = this.el.dataset.videoId || '';\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      videoSlides: this.el.querySelectorAll<HTMLElement>('.swiper-slide.video-slide'),\n      videoLinks: this.el.querySelectorAll<HTMLElement>(\n        '.swiper-slide.video-slide .resources-block__slide-link'\n      ),\n      videoButton: this.el.querySelectorAll<HTMLElement>('.resources-block__video-icon'),\n      videoContainer: this.el.querySelector<HTMLElement>(\n        '.resources-block__video-modal .video-container'\n      ),\n      videoModal: this.el.querySelector<HTMLElement>('.resources-block__video-modal'),\n      closeModalBtn: this.el.querySelector<HTMLElement>('.close'),\n      modalTitle: this.el.querySelector<HTMLElement>('.resources-block__modal-title')\n    };\n\n    this.initSwiper();\n  }\n\n  addListeners() {\n    (this.dom.videoLinks as NodeList).forEach(slide => {\n      slide.addEventListener('click', this.handleVideoSlideClick.bind(this));\n    });\n    (this.dom.videoButton as NodeList).forEach(slide => {\n      slide.addEventListener('click', this.handleVideoBtnClick.bind(this));\n    });\n    (this.dom.closeModalBtn as HTMLElement).addEventListener('click', () => {\n      if (this.player) {\n        this.player.pauseVideo();\n        (this.dom.videoModal as HTMLDialogElement).close();\n        document.body.style.overflow = 'auto';\n      }\n    });\n    (this.dom.videoModal as HTMLDialogElement).addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  initSwiper() {\n    Swiper.use([Navigation, Keyboard, Pagination, Controller]);\n\n    new Swiper(this.dom.swiperContainer as HTMLElement, {\n      navigation: {\n        nextEl: this.dom.nextArrow as HTMLElement,\n        prevEl: this.dom.prevArrow as HTMLElement\n      },\n      slidesPerView: 1.1,\n      spaceBetween: 24,\n      loop: true,\n      breakpoints: {\n        768: {\n          slidesPerView: 3.2,\n          spaceBetween: 16\n        }\n      }\n    });\n  }\n\n  handleClickOutside(e: Event) {\n    if (e.target === e.currentTarget) {\n      e.stopPropagation();\n      if (this.player) {\n        this.player.pauseVideo();\n      }\n      (e.target as HTMLDialogElement).close();\n      document.body.style.overflow = 'auto';\n    }\n  }\n\n  handleVideoSlideClick(e: Event) {\n    e.preventDefault();\n    const target = e.currentTarget as HTMLElement;\n    const videoContainer = this.el.querySelector(\n      '.resources-block__video-modal .resources-block__modal-content .video-container'\n    );\n    this.videoId = target.parentElement?.dataset.videoId || '';\n    const cardTitle = target.parentElement?.querySelector(\n      '.resources-block__slide-title'\n    )?.textContent;\n    (this.dom.modalTitle as HTMLElement).textContent = cardTitle || '';\n\n    if (videoContainer?.tagName === 'DIV') {\n      YouTubeIframeLoader.load(YT => {\n        this.player = new YT.Player(\n          this.el.querySelector('.resources-block__video-modal .video-container'),\n          {\n            width: '100%',\n            height: '100%',\n            videoId: this.videoId\n          }\n        );\n      });\n    } else {\n      if (videoContainer?.tagName === 'IFRAME' && videoContainer.parentElement) {\n        videoContainer.parentElement.innerHTML = `<div class=\"video-container\"></div>`;\n        YouTubeIframeLoader.load(YT => {\n          this.player = new YT.Player(\n            this.el.querySelector('.resources-block__video-modal .video-container'),\n            {\n              width: '100%',\n              height: '100%',\n              videoId: this.videoId\n            }\n          );\n        });\n      }\n    }\n\n    (this.dom.videoModal as HTMLDialogElement).showModal();\n    document.body.style.overflow = 'hidden';\n  }\n\n  handleVideoBtnClick(e: Event) {\n    const target = e.currentTarget as HTMLElement;\n    const videoContainer = this.el.querySelector(\n      '.resources-block__video-modal .resources-block__modal-content .video-container'\n    );\n    this.videoId = target.parentElement?.parentElement?.dataset.videoId || '';\n    const cardTitle = target.parentElement?.parentElement?.querySelector(\n      '.resources-block__slide-title'\n    )?.textContent;\n    (this.dom.modalTitle as HTMLElement).textContent = cardTitle || '';\n\n    if (videoContainer?.tagName === 'DIV') {\n      YouTubeIframeLoader.load(YT => {\n        this.player = new YT.Player(\n          this.el.querySelector('.resources-block__video-modal .video-container'),\n          {\n            width: '100%',\n            height: '100%',\n            videoId: this.videoId\n          }\n        );\n      });\n    } else {\n      if (videoContainer?.tagName === 'IFRAME' && videoContainer.parentElement) {\n        videoContainer.parentElement.innerHTML = `<div class=\"video-container\"></div>`;\n        YouTubeIframeLoader.load(YT => {\n          this.player = new YT.Player(\n            this.el.querySelector('.resources-block__video-modal .video-container'),\n            {\n              width: '100%',\n              height: '100%',\n              videoId: this.videoId\n            }\n          );\n        });\n      }\n    }\n\n    (this.dom.videoModal as HTMLDialogElement).showModal();\n    document.body.style.overflow = 'hidden';\n  }\n}\n\nexport default ResourcesBlock;\n"],"names":["ResourcesBlock","Component","el","__publicField","slide","Swiper","Navigation","Keyboard","Pagination","Controller","target","videoContainer","_a","cardTitle","_c","_b","YouTubeIframeLoader","YT","_e","_d"],"mappings":"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"}