portfolio/js/image-thumbnails.js

52 lines
1.5 KiB
JavaScript
Raw Normal View History

'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);
});
}
});
})();