124 lines
3.9 KiB
JavaScript
124 lines
3.9 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(0deg)"
|
|
content.style.maxHeight = content.scrollHeight + "px"
|
|
} else {
|
|
// close the table
|
|
icon.style.transform = "rotate(180deg)"
|
|
content.style.maxHeight = null
|
|
}
|
|
opened = !opened
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Description
|
|
*/
|
|
let description = document.querySelector('.description-cutted')
|
|
let descriptionActions = document.querySelector('.description-actions-container')
|
|
let descriptionOpened = false
|
|
let defaultMaxHeight = ""
|
|
if (description !== null) {
|
|
let btn = document.querySelector('.description-btn')
|
|
btn.onclick = () => {
|
|
if (!descriptionOpened) {
|
|
// open the full description
|
|
descriptionActions.className = descriptionActions.className.replace(' closed', '')
|
|
defaultMaxHeight = description.style.maxHeight
|
|
description.style.maxHeight = description.scrollHeight + "px"
|
|
btn.textContent = "Fermer la description"
|
|
} else {
|
|
// initial max Height
|
|
descriptionActions.className += ' closed'
|
|
description.style.maxHeight = defaultMaxHeight
|
|
btn.textContent = "Ouvrir la description"
|
|
}
|
|
descriptionOpened = !descriptionOpened
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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'
|
|
|
|
setTimeout(() => {
|
|
|
|
const outsideClickListener = event => {
|
|
if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
|
|
closeModal()
|
|
document.removeEventListener('click', outsideClickListener)
|
|
}
|
|
}
|
|
document.addEventListener('click', outsideClickListener)
|
|
|
|
}, 100)
|
|
}
|
|
|
|
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
|
|
|
|
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()
|
|
}
|
|
}
|