Gallery

Author: wesbos

exercises/56 - Gallery/gallery-DEMO.js

@@ -0,0 +1,78 @@
+// Topics: Design Pattern
+// Challenge: Add Arrows for prev/next
+// Challenge: add close button
+
+function Gallery(gallery) {
+  if (!gallery) {
+    throw new Error('No gallery Found!');
+  }
+
+  const images = Array.from(gallery.querySelectorAll('img'));
+  const modal = document.querySelector('.modal');
+  const prevButton = document.querySelector('.prev');
+  const nextButton = document.querySelector('.next');
+  let currentImage;
+
+  function handleKeyUp(e) {
+    if (e.key === 'Escape') closeModal();
+    if (e.key === 'ArrowRight') showImage(currentImage.nextElementSibling);
+    if (e.key === 'ArrowLeft') showImage(currentImage.previousElementSibling);
+  }
+
+  function handleClickOutside(e) {
+    if (e.target === e.currentTarget) {
+      closeModal();
+    }
+  }
+  function showNextImage() {
+    showImage(currentImage.nextElementSibling);
+  }
+  function showPreviousImage() {
+    showImage(currentImage.previousElementSibling);
+  }
+
+  function openModal() {
+    if (modal.matches('.open')) {
+      console.info('modal already open');
+      return;
+    }
+    // listen for keys
+    modal.classList.add('open');
+    window.addEventListener('keyup', handleKeyUp);
+    modal.addEventListener('click', handleClickOutside);
+    nextButton.addEventListener('click', showNextImage);
+    prevButton.addEventListener('click', showPreviousImage);
+  }
+
+  function closeModal() {
+    modal.classList.remove('open');
+    window.removeEventListener('keyup', handleKeyUp);
+    modal.removeEventListener('click', handleClickOutside);
+    nextButton.removeEventListener('click', showNextImage);
+    prevButton.removeEventListener('click', showPreviousImage);
+  }
+
+  function showImage(el) {
+    if (!el) {
+      console.info('No Image To Show');
+      return;
+    }
+    modal.querySelector('img').src = el.src;
+    modal.querySelector('h2').textContent = el.title;
+    modal.querySelector('figure p').textContent = el.dataset.description;
+    currentImage = el;
+    openModal();
+  }
+
+  images.forEach(image =>
+    image.addEventListener('click', e => showImage(e.currentTarget))
+  );
+  images.forEach(image =>
+    image.addEventListener('keyup', e => {
+      if (e.key === 'Enter') showImage(e.currentTarget);
+    })
+  );
+}
+
+const gallery1 = Gallery(document.querySelector('.gallery1'));
+const gallery2 = Gallery(document.querySelector('.gallery2'));

exercises/56 - Gallery/gallery-FINISHED.js

@@ -0,0 +1,91 @@
+function Gallery(gallery) {
+  if (!gallery) {
+    throw new Error('No Gallery Found!');
+  }
+  // select the elements we need
+  const images = Array.from(gallery.querySelectorAll('img'));
+  const modal = document.querySelector('.modal');
+  const prevButton = modal.querySelector('.prev');
+  const nextButton = modal.querySelector('.next');
+  let currentImage;
+
+  function openModal() {
+    console.info('Opening Modal...');
+    // First check if the modal is already open
+    if (modal.matches('.open')) {
+      console.info('Madal already open');
+      return; // stop the function from running
+    }
+    modal.classList.add('open');
+
+    // Event listeners to be bound when we open the modal:
+    window.addEventListener('keyup', handleKeyUp);
+    nextButton.addEventListener('click', showNextImage);
+    prevButton.addEventListener('click', showPrevImage);
+  }
+
+  function closeModal() {
+    modal.classList.remove('open');
+    // TODO: add event listeners for clicks and keyboard..
+    window.removeEventListener('keyup', handleKeyUp);
+    nextButton.removeEventListener('click', showNextImage);
+    prevButton.removeEventListener('click', showPrevImage);
+  }
+
+  function handleClickOutside(e) {
+    if (e.target === e.currentTarget) {
+      closeModal();
+    }
+  }
+
+  function handleKeyUp(event) {
+    if (event.key === 'Escape') return closeModal();
+    if (event.key === 'ArrowRight') return showNextImage();
+    if (event.key === 'ArrowLeft') return showPrevImage();
+  }
+
+  function showNextImage() {
+    showImage(currentImage.nextElementSibling || gallery.firstElementChild);
+  }
+  function showPrevImage() {
+    showImage(currentImage.previousElementSibling || gallery.lastElementChild);
+  }
+
+  function showImage(el) {
+    if (!el) {
+      console.info('no image to show');
+      return;
+    }
+    // update the modal with this info
+    console.log(el);
+    modal.querySelector('img').src = el.src;
+    modal.querySelector('h2').textContent = el.title;
+    modal.querySelector('figure p').textContent = el.dataset.description;
+    currentImage = el;
+    openModal();
+  }
+
+  // These are our Event Listeners!
+  images.forEach(image =>
+    image.addEventListener('click', e => showImage(e.currentTarget))
+  );
+
+  // loop over each image
+  images.forEach(image => {
+    // attach an event listener for each image
+    image.addEventListener('keyup', e => {
+      // when that is keyup'd, check if it was enter
+      if (e.key === 'Enter') {
+        // if it was, show that image
+        showImage(e.currentTarget);
+      }
+    });
+  });
+
+  modal.addEventListener('click', handleClickOutside);
+}
+
+// Use it on the page
+
+const gallery1 = Gallery(document.querySelector('.gallery1'));
+const gallery2 = Gallery(document.querySelector('.gallery2'));

exercises/56 - Gallery/gallery.css

@@ -0,0 +1,81 @@
+.galleries {
+  padding: 2rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 2rem;
+}
+.gallery {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-gap: 20px;
+    align-items: stretch;
+    background: white;
+    padding: 2rem;
+    }
+
+    .gallery img {
+      width: 100%;
+      object-fit: cover;
+      border:1px solid black;
+    }
+
+    .modal {
+      position: fixed;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 2;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.5s;
+    }
+
+    .modalInner {
+      border-radius: 4px;
+      background: white;
+      box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.05);
+      transform: translateY(-100vh);
+      transition: all 0.5s;
+      max-width: 1000px;
+      height: calc(100vh - 100px);
+      display: grid;
+      grid-template-columns: 50px 1fr 50px;
+      color: black;
+      margin: 3rem;
+    }
+
+    .modal figure {
+      height: 100%;
+      display: grid;
+      margin: 0;
+      grid-template-rows: 1fr auto;
+    }
+
+    .modal img {
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+
+    .modal.open {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .modal figcaption {
+      padding: 10px;
+    }
+
+    .modal h2 {
+      color: black;
+    }
+
+    .modal.open .modalInner {
+      transform: translateY(0);
+    }