text: import { Controller } from 'stimulus'
  
  export default class extends Controller {
    static targets = ['background', 'container', 'link', 'video', 'content']
  
    connect() {
      this.toggleClass = this.data.get('class') || 'hidden'
    }
  
    open(e) {
      e.preventDefault()
  
      if (this.linkTarget.getAttribute('data-modal-type') == "video") {
        var html = `<iframe src="${this.linkTarget.getAttribute('data-modal-link')}?autoplay=1" data-target="modal.video" width="840" height="472.5" class="mx-auto" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        this.contentTarget.innerHTML = html
        this.contentTarget.classList.remove('p-6')
        this.contentTarget.style.height = "472.5px"
        this.contentTarget.style.width = "840px"
      }
  
      if (this.linkTarget.getAttribute('data-modal-type') == "html") {
        fetch(e.target.getAttribute('data-modal-link'), { mode: 'no-cors' })
        .then(response => response.text())
        .then(html => {
          this.contentTarget.innerHTML = html
        })
      }
  
      // Add right padding to the body so the page doesn't shift
      // when we disable scrolling
      let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
      document.body.style.paddingRight = `${scrollbarWidth}px`
  
      // Set overflow hidden to prevent scrolling of background
      // This must happen after the scrollbar calculation
      document.body.style.overflow = 'hidden'
  
      // Unhide the modal
      this.containerTarget.classList.remove(this.toggleClass)
    }
  
    close(e) {
      e.preventDefault()
  
      // stop video from playing
      if (this.data.get("type") == "video") {
        this.videoTarget.src = ''
      }
  
      // Remove tweaks for scrollbar
      document.body.style.paddingRight = null
      document.body.style.overflow = null
  
      // Hide the modal
      this.containerTarget.classList.add(this.toggleClass)
    }
  
    closeBackground(e) {
      if (e.target === this.backgroundTarget) {
        this.close(e)
      }
    }
  
    closeWithKeyboard(e) {
      if (e.keyCode == 27 && !this.containerTarget.classList.contains(this.toggleClass)) {
        this.close(e)
      }
    }
  }
  