server/static/assets/js/organization.js

/**
 * Schedule collapsable section animation
 */
document.querySelectorAll('.schedule-category').forEach(node => {
  let opened = false
  let icon = node.querySelector('.schedule-category-collapse-icon')
  let content = node.querySelector('.schedule-category-table')
  let header = node.querySelector('.schedule-category-header')
  header.onclick = () => {
    if (!opened) {
      // open the table
      icon.style.transform = "rotate(180deg)"
      content.style.maxHeight = content.scrollHeight + "px"
    } else {
      // close the table
      icon.style.transform = "rotate(0deg)"
      content.style.maxHeight = null
    }
    opened = !opened
  }
})

/**
 * Gallery modal to view media in large
 */
let mediaModal = document.querySelector('#media-modal')
let mediaModalContent = document.querySelector('#media-modal-content')
// let mediaModalImage = document.querySelector('#media-modal img')
// let mediaModalVideo = document.querySelector('#media-modal video')
// let mediaModalSource = document.querySelector('#media-modal video source')

// function disableScroll() { 
//     // Get the current page scroll position 
//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
  
//         // if any scroll is attempted, set this to the previous value 
//         window.onscroll = function() { 
//             window.scrollTo(scrollLeft, scrollTop); 
//         }; 
// } 
  
// function enableScroll() { 
//     window.onscroll = function() {}; 
// }


let openModal = (url, isVideo) =>  {
  mediaModal.style.visibility = 'visible'
  mediaModal.style.opacity = 1
  mediaModalContent.innerHTML = ""

  let attr = document.createAttribute('src')
  attr.value = url
  let el = null
  if (isVideo) {
    el = document.createElement('video')
    el.setAttribute('controls', '')
    el.setAttribute('autoplay', '')
    el.setAttribute('name', 'media')
    let source = document.createElement('source')
    source.setAttribute('src', url)
    source.setAttribute('type', 'video/mp4')
    el.appendChild(source)
  } else {
    el = document.createElement('img')
    el.attributes.setNamedItem(attr)
  }
  mediaModalContent.appendChild(el)
  //document.body.style.height = '100vh'
  document.body.style.overflow = 'hidden'
  document.body.style.touchAction = 'none'
}

let closeModal = () =>  {
  mediaModal.style.visibility = 'hidden'
  mediaModal.style.opacity = 0
  document.body.style.overflow = 'initial'
  document.body.style.height = 'initial'
  let video = document.querySelector('#media-modal video')
  if (video !== null) {
    video.pause()
  }
}