From 3edaa49ce72e567eb5f52199b3379551c4886a03 Mon Sep 17 00:00:00 2001
From: John Shaver <john.shaver@emsibg.com>
Date: Sun, 17 Jul 2022 14:14:19 -0700
Subject: [PATCH] get thumbnails all in place and working

---
 css/main.css              | 42 ++++++++++++++++++++++++++++++++++++++-
 index.html                | 15 ++++++++++----
 js/image-thumbnails.js    | 26 ++++++++++++++++++++++--
 package.json              |  3 ++-
 scripts/process-images.sh |  2 +-
 5 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/css/main.css b/css/main.css
index b96ac4e..a836523 100644
--- a/css/main.css
+++ b/css/main.css
@@ -64,7 +64,7 @@ h4 {
 }
 
 .project-image > img {
-    width:  100%;
+    max-width:  100%;
     margin-bottom: 3rem;
     -webkit-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
     -moz-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
@@ -104,3 +104,43 @@ section {
 .project-info {
     margin: 1.5em 0 5em 0;
 }
+
+.clickable {
+  cursor: pointer; 
+}
+
+.close-x {
+  font-size: 25px;
+  text-align: end;
+  padding: 10px 10px 0;
+}
+
+#image-modal-wrapper { 
+  position: fixed;
+  background: rgba(0,0,0,0.25);
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+#image-modal-flex {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#image-modal {
+  flex-grow: 0;
+  max-width: 90vh;
+  background: #FFF;
+  border-radius: 4px;
+}
+
+#image-modal-contents img {
+  box-sizing: border-box;
+  padding: 10px 25px 25px;
+  max-width: 100%; 
+}
diff --git a/index.html b/index.html
index 991c075..7ee316f 100644
--- a/index.html
+++ b/index.html
@@ -100,9 +100,9 @@
 			<h3>Skillsmatch</h3>
 			<div class="project">
 				<div class="project-image">
-					<img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
-					<img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
-					<img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
+					<img class="main-image" src="images/thumbnails/th_skills-match-img-1.webp"/>
+					<img class="main-image" src="images/thumbnails/th_skills-match-2.png"/>
+					<img class="main-image" src="images/thumbnails/th_skills-match-img-3.webp"/>
 				</div>
 				<div class="project-info">
 					<h4>Project Goals</h4>
@@ -285,6 +285,13 @@
 		</section>
 	</article>
 	</div>
-  <div id="image-modal" hidden><div class="close-x" aria-label="click to close modal">&#xd7;</div><div id="image-modal-contents"/></div>
+  <div id="image-modal-wrapper" hidden>
+    <div id="image-modal-flex">
+      <div id="image-modal">
+        <div class="close-x clickable" aria-label="click to close modal">&#xd7;</div>
+        <div id="image-modal-contents" />
+      </div>
+    </div>
+  </div>
   <script src="./js/image-thumbnails.js"></script>
 </body>
diff --git a/js/image-thumbnails.js b/js/image-thumbnails.js
index 93cdbba..43f41af 100644
--- a/js/image-thumbnails.js
+++ b/js/image-thumbnails.js
@@ -1,13 +1,34 @@
 '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();
-    imageModal.hidden = true;
+    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');
@@ -15,11 +36,12 @@
     const name = img.src.split('/').pop();
 
     if(name.match(/^th_/)) {
+      img.classList.add('clickable');
       img.addEventListener('click', function(e) {
         e.stopPropagation();
         e.preventDefault();
 
-        imageModal.hidden = undefined;
+        imageModalWrapper.hidden = undefined;
         const fullImage = document.createElement('img');
         fullImage.src = `./images/${name.replace(/^th_/, '')}`;
         imageModalContents.replaceChildren(fullImage);
diff --git a/package.json b/package.json
index 5dd84df..ed2b83e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "index.html",
   "scripts": {
     "test": "echo 'no tests yet.... so... pass?'",
-    "start": "http-server ./"
+    "start": "http-server ./",
+    "thumbs": "./scripts/process-images.sh"
   },
   "author": "john@jshaver.net",
   "license": "UNLICENSED",
diff --git a/scripts/process-images.sh b/scripts/process-images.sh
index 2950541..03a07a3 100755
--- a/scripts/process-images.sh
+++ b/scripts/process-images.sh
@@ -8,7 +8,7 @@ do
   case "$f" in
     *.jpeg|*.jpg|*.png|*.webp|*.gif)
       echo "Processing $f"
-      convert $f -resize $WIDTH ./images/thumbnails/th_`basename $f`
+      convert $f -resize $WIDTH\> ./images/thumbnails/th_`basename $f`
       ;;
     *)
       echo "Ignoring $f"