https://survivalinternational.fr/assets/controllers/numiko/youtube_modal_controller-21023c22.js

1import { Controller } from "@hotwired/stimulus"
2import urlify from "utils/urlify"
3
4// Connects to data-controller="numiko--youtube-modal"
5export default class extends Controller {
6  static targets = [
7    'iframe',
8    'ifrmContainer',
9    'modalName',
10    'modalDescription'
11  ]
12
13  connect () {
14    new bootstrap.Modal(this.element, { keyboard: false })
15
16    this.element.addEventListener('show.bs.modal', (event) => {
17      const selectedYoutubeObj = event.relatedTarget;
18      const url = selectedYoutubeObj.parentElement.dataset['numiko-YoutubeCardVideoUrlValue']
19      const name = selectedYoutubeObj.parentElement.dataset['videoTitle'];
20      const description = selectedYoutubeObj.parentElement.dataset['videoDescription'];
21      this.#createYoutubeVideoIframe(url, name, description);
22    })
23
24    this.element.addEventListener('hide.bs.modal', (_event) => { this.iframeTarget.remove() })
25  }
26
27  #createYoutubeVideoIframe (youtubeUrl, name, description) {
28    const ifrm = document.createElement("iframe");
29    ifrm.setAttribute("src", youtubeUrl);
30    ifrm.setAttribute('frameborder', '0');
31    ifrm.setAttribute('webkitallowfullscreen', true);
32    ifrm.setAttribute('mozallowfullscreen', true);
33    ifrm.setAttribute('allowfullscreen', true);
34    ifrm.dataset['numiko-YoutubeModalTarget'] = 'iframe' // Note: how this translates to: data-numiko--youtube-card-target="iframe"
35    ifrm.style.width = "100%";
36    ifrm.style.height = "400px";
37    ifrm.style.top = 0;
38    ifrm.style.left = 0;
39    this.ifrmContainerTarget.appendChild(ifrm)
40    this.modalNameTarget.innerHTML = name;
41    this.modalDescriptionTarget.innerHTML = urlify(description);
42  }
43}