Take three

aseradyn · May 4, 2024 · 773a8e9 · 773a8e9
1 parent 2c99f1c
commit 773a8e9
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 69 deletions.
diff --git a/components/photo-gallery/photo-gallery.css b/components/photo-gallery/photo-gallery.css
@@ -2,74 +2,57 @@
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
     margin-top: 40px;
 }
-.photo-gallery > img,
-.photo-gallery > a > img {
+.photo-gallery > div {
     width: 350px;
-    display: block;
     animation-delay: 0.5s;
 }
-.lightbox-overlay {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    margin: 0px;
-    padding: 0px;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0,0,0,0.5);
+.photo-gallery-photo-wrapper {
+    width: 350px;
+    display: grid;
+    grid-template: "thingy";
+    align-items: center;
+    justify-items: center;
 }
-.hide {
-    display: none;
+.photo-gallery-photo-wrapper > * {
+    grid-area: thingy;
+}
+.photo-gallery-photo-wrapper > img {
+    width: auto;
+    height: auto;
+    max-height: calc(100% - 40px);
+    max-width: calc(100% - 40px);
 }
 .lightbox {
-    display: grid;
-    grid-template-columns: 20px 1fr 80vw 1fr 20px;
-    grid-template-rows: 80vh 1fr;
-    grid-template-areas: 
-        "x left photo right y"
-        "x left caption right y";
-    width: 100%;
-    height: 100%;
+    padding: 20px;
 }
-.lightbox-image-container {
-    width: calc(100% - 40px);
-    height: calc(100% - 40px);
-    grid-area: photo;
+.lightbox::backdrop {
+    background-color: rgb(0,0,0,0.8);
 }
 .lightbox img {
-    object-fit: contain;
-    height: 100%;
-    width: 100%;
+    height: auto;
+    width: auto;
+    max-height: 90vh;
+    max-width: 90vw;
     padding: 0px;
     margin: 0px;
-    background: none;
-}
-.lightbox button {
-    background-color: white;
-    font-weight: 600;
-    padding: 5px;
 }
-.lightbox-nav-left {
-    grid-area: left;
-    justify-self: start;
-    align-self: center;
-}
-.lightbox-nav-right {
-    grid-area: right;
+.photo-gallery-toggle-button {
     justify-self: end;
-    align-self: center;
-}
-.lightbox-caption {
+    align-self: end;
+    z-index: 2;
     padding: 10px;
-    color: black;
-    background-color: white;
-    grid-area: caption;
-    align-self: center;
-    max-height: 100%;
-    overflow-y: auto;
+    background-color: var(--turquoise);
+    color: var(--baseFont);
+    width: 3em;
+    height: 3em;
+    border-radius: 3em;
+    transition-duration: 0.4s;
+    border: 0px;
+}
+.photo-gallery-toggle-button:hover {
+    background-color: var(--orange);
 }
diff --git a/components/photo-gallery/photo-gallery.js b/components/photo-gallery/photo-gallery.js
@@ -31,22 +31,38 @@ const insertLightboxes = (images) => {
             const alt = image.getAttribute("alt") ?? "";
             const title = image.getAttribute("title") ?? "";
             const key = image.getAttribute("key");
-            const lightboxHtml = `
-                <div id="${key}" class="lightbox-overlay hide">
-                    <div class="lightbox">
-                        <div class="lightbox-image-container photo-card">
-                            <img src="${imgUrl}" alt="${alt}"  />
-                        </div>
-                        <div class="lightbox-caption">
-                            ${title}
-                        </div>
-                        <button class="lightbox-nav-left" onClick="navigatePrevious(${key})">&larr;</button>
-                        <button class="lightbox-nav-right" onClick="navigateNext(${key})">&rarr;</button>
-                    </div>
-                </div>
-            `
-            image.addEventListener('click', function(e) {showLightbox(key)});
-            image.insertAdjacentHTML('afterend', lightboxHtml);
+
+            // build needed nodes
+            const replacementImage = image.cloneNode(true);
+            const imageForLightbox = image.cloneNode(true);
+            imageForLightbox.setAttribute("style", ""); // unset the transform style
+
+            const wrapper = document.createElement("div");
+            wrapper.classList = "photo-gallery-photo-wrapper";
+
+            const lightbox = document.createElement("div");
+            lightbox.classList = "lightbox";
+            lightbox.setAttribute("popover", "");
+            lightbox.id = `lightbox-${key}`;
+
+            const button = document.createElement("button");
+            button.classList = "photo-gallery-toggle-button";
+            button.popoverTargetElement = lightbox;
+            button.setAttribute("title", "Pop up larger image");
+            const buttonLabel = document.createTextNode("⇱");
+
+            // assemble   
+            button.appendChild(buttonLabel);         
+            wrapper.appendChild(replacementImage);
+            wrapper.appendChild(button);
+            lightbox.appendChild(imageForLightbox);
+            wrapper.appendChild(lightbox);
+
+            // insert
+            image.after(wrapper);
+
+            // and hide the original
+            image.remove();
         });
 }