Spaces:
Runtime error
Runtime error
File size: 3,164 Bytes
a6ec9cb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
"use strict"
const imageModal = (function() {
const zoomElem = createElement(
'i',
undefined,
['fa-solid', 'tertiaryButton'],
)
const closeElem = createElement(
'i',
undefined,
['fa-solid', 'fa-xmark', 'tertiaryButton'],
)
const menuBarElem = createElement('div', undefined, 'menu-bar', [zoomElem, closeElem])
const imageContainer = createElement('div', undefined, 'image-wrapper')
const backdrop = createElement('div', undefined, 'backdrop')
const modalContainer = createElement('div', undefined, 'content', [menuBarElem, imageContainer])
const modalElem = createElement(
'div',
{ id: 'viewFullSizeImgModal' },
['popup'],
[backdrop, modalContainer],
)
document.body.appendChild(modalElem)
const setZoomLevel = (value) => {
const img = imageContainer.querySelector('img')
if (value) {
zoomElem.classList.remove('fa-magnifying-glass-plus')
zoomElem.classList.add('fa-magnifying-glass-minus')
if (img) {
img.classList.remove('natural-zoom')
let zoomLevel = typeof value === 'number' ? value : img.dataset.zoomLevel
if (!zoomLevel) {
zoomLevel = 100
}
img.dataset.zoomLevel = zoomLevel
img.width = img.naturalWidth * (+zoomLevel / 100)
img.height = img.naturalHeight * (+zoomLevel / 100)
}
} else {
zoomElem.classList.remove('fa-magnifying-glass-minus')
zoomElem.classList.add('fa-magnifying-glass-plus')
if (img) {
img.classList.add('natural-zoom')
img.removeAttribute('width')
img.removeAttribute('height')
}
}
}
zoomElem.addEventListener(
'click',
() => setZoomLevel(imageContainer.querySelector('img')?.classList?.contains('natural-zoom')),
)
const close = () => {
imageContainer.innerHTML = ''
modalElem.classList.remove('active')
document.body.style.overflow = 'initial'
}
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modalElem.classList.contains('active')) {
close()
}
})
window.addEventListener('click', (e) => {
if (modalElem.classList.contains('active')) {
if (e.target === backdrop || e.target === closeElem) {
close()
}
e.stopPropagation()
e.stopImmediatePropagation()
e.preventDefault()
}
})
return (optionsFactory) => {
const options = typeof optionsFactory === 'function' ? optionsFactory() : optionsFactory
const src = typeof options === 'string' ? options : options.src
// TODO center it if < window size
const imgElem = createElement('img', { src }, 'natural-zoom')
imageContainer.appendChild(imgElem)
modalElem.classList.add('active')
document.body.style.overflow = 'hidden'
setZoomLevel(false)
}
})()
|