update and error handling

static/assets/js/organization.js

@@ -24,21 +24,61 @@ document.querySelectorAll('.schedule-category').forEach(node => {
  * Gallery modal to view media in large
  */
 let mediaModal = document.querySelector('#media-modal')
-let mediaModalImage = document.querySelector('#media-modal-image')
+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')
 
-let openModal = url =>  {
+// 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
-  mediaModalImage.attributes.setNamedItem(attr)
-  document.body.style.height = "100vh"
-  document.body.style.overflow = "hidden"
+  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"
+  document.body.style.overflow = 'initial'
+  document.body.style.height = 'initial'
+  let video = document.querySelector('#media-modal video')
+  if (video !== null) {
+    video.pause()
+  }
 }