server/static/assets/js/organization.js
2020-07-18 10:43:13 +00:00

84 lines
2.6 KiB
JavaScript

/**
* 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()
}
}