99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
function mediaModalSetup() {
|
|
/**
|
|
* Gallery modal to view media in large
|
|
*/
|
|
const mediaDataRaw = document.getElementById('project-images-data')
|
|
if (mediaDataRaw == null) return;
|
|
const mediaData = JSON.parse(mediaDataRaw.textContent)
|
|
console.log('mediaData', mediaData)
|
|
|
|
|
|
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 modalCaption = document.getElementById('caption')
|
|
let media = {}
|
|
|
|
let fillModal = (m) => {
|
|
mediaModalContent.innerHTML = ""
|
|
let attr = document.createAttribute('src')
|
|
attr.value = m.image
|
|
let el = null
|
|
el = document.createElement('img')
|
|
el.attributes.setNamedItem(attr)
|
|
mediaModalContent.appendChild(el)
|
|
modalCaption.innerText = m.description
|
|
}
|
|
|
|
setTimeout(() => {
|
|
mediaModal.style = ''
|
|
}, 500)
|
|
|
|
window.openModal = (id) => {
|
|
|
|
mediaModal.style.visibility = 'visible'
|
|
mediaModal.style.opacity = 1
|
|
|
|
media = mediaData.filter(m => m.id === id)[0]
|
|
|
|
fillModal(media)
|
|
|
|
//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 )
|
|
|
|
window.closeModal = () => {
|
|
mediaModal.style.visibility = 'hidden'
|
|
mediaModal.style.opacity = 0
|
|
document.body.style.overflow = 'initial'
|
|
document.body.style.height = 'initial'
|
|
document.body.style.touchAction = 'initial'
|
|
}
|
|
|
|
window.navLeft = () => {
|
|
if (mediaData.indexOf(media) === 0) { return; }
|
|
media = mediaData[mediaData.indexOf(media) - 1]
|
|
fillModal(media)
|
|
}
|
|
|
|
window.navRight = () => {
|
|
if (mediaData.indexOf(media) + 1 === mediaData.length) { return; }
|
|
media = mediaData[mediaData.indexOf(media) + 1]
|
|
fillModal(media)
|
|
}
|
|
|
|
}
|
|
|
|
export { mediaModalSetup };
|