52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
'use srict';
|
|
|
|
(function() {
|
|
const imageModalWrapper = document.querySelector('#image-modal-wrapper');
|
|
const imageModalFlex = document.querySelector('#image-modal-flex');
|
|
const imageModal = document.querySelector('#image-modal');
|
|
const imageModalContents = document.querySelector('#image-modal-contents');
|
|
|
|
imageModal.querySelector('.close-x').addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
imageModalWrapper.hidden = true;
|
|
});
|
|
|
|
imageModalFlex.addEventListener('click', function(e) {
|
|
if(e.target === imageModalFlex) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
imageModalWrapper.hidden = true;
|
|
}
|
|
|
|
});
|
|
|
|
window.addEventListener('keydown', function(e) {
|
|
const modalCloseKeys = ['escape', 'tab']
|
|
console.log("e.key: ", e.key);
|
|
if(!imageModalWrapper.hidden) {
|
|
if(modalCloseKeys.includes(e.key.toLowerCase())) {
|
|
imageModalWrapper.hidden = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
const images = document.querySelectorAll('img');
|
|
images.forEach(function(img) {
|
|
const name = img.src.split('/').pop();
|
|
|
|
if(name.match(/^th_/)) {
|
|
img.classList.add('clickable');
|
|
img.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
imageModalWrapper.hidden = undefined;
|
|
const fullImage = document.createElement('img');
|
|
fullImage.src = `./images/${name.replace(/^th_/, '')}`;
|
|
imageModalContents.replaceChildren(fullImage);
|
|
});
|
|
}
|
|
});
|
|
})();
|