portfolio/js/image-thumbnails.js

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