add simple lightbox

resources/css/app.scss

@@ -9,15 +9,16 @@
 @use "plugins/contact-form-7";
 @use "plugins/mce";
 
-// Sections
-@use "sections/header";
-@use "sections/footer";
-
 // Components
 @use "components/block";
 @use "components/forms";
 @use "components/button";
 @use "components/card";
+@use "components/BadEggLightbox";
+
+// Sections
+@use "sections/header";
+@use "sections/footer";
 
 // Page Styles
 @use "views/page";

resources/css/components/_BadEggLightbox.scss

@@ -0,0 +1,92 @@
+#badegg-lightbox {
+  &-overlay,
+  &-image,
+  &-close {
+    transition: all 300ms ease;
+    opacity: 0;
+  }
+
+  &-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    padding: 3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(white, 0.5);
+
+    .open & {
+      opacity: 1;
+      backdrop-filter: blur(1em);
+    }
+  }
+
+  &-image {
+    position: relative;
+    z-index: 2;
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    transform: scale(0.8);
+
+    .open & {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  &-close {
+    position: absolute;
+    z-index: 3;
+    top: 1em;
+    right: 1em;
+    display: block;
+    appearance: none;
+    border: none;
+    background: transparent;
+    border: 2px solid black;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transform: scale(0.01) rotate(-360deg);
+
+    .open & {
+      opacity: 1;
+      transform: none;
+    }
+
+    &:hover,
+    &:focus {
+      transform: scale(1.2) rotate(90deg);
+    }
+
+    .admin-bar & {
+      top: calc(1em + 32px);
+
+      @media (max-width: 782px) {
+        top: calc(1em + 46px);
+      }
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      stroke: black;
+      stroke-width: 5;
+    }
+
+    &:focus {
+      outline: 2px dashed red;
+    }
+  }
+}

resources/js/app.js

@@ -5,7 +5,8 @@ import.meta.glob([
 
 import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';
+import BadEggLightbox from './lib/BadEggLightbox';
 
-LazyLoad();
 Header();
-
+LazyLoad();
+BadEggLightbox();

resources/js/lib/BadEggLightbox.js

@@ -0,0 +1,81 @@
+export default function BadEggLightbox()
+{
+  const lightboxes = document.querySelectorAll(".badegg-lightbox");
+
+  if(!lightboxes) return;
+
+  lightboxes.forEach(lightbox => {
+    const fullSize = lightbox.getAttribute('href');
+    const thumbnail = lightbox.querySelector("img");
+
+    lightbox.addEventListener("click", (e) => {
+      e.preventDefault();
+      // console.log(e);
+
+      modal(fullSize, thumbnail);
+    });
+
+  });
+}
+
+function modal(src = '', img = '')
+{
+  if(!src || !img) {
+    alert('Error: No image defined');
+    return;
+  }
+
+  const title = img.getAttribute("title") || '';
+  const alt = img.getAttribute("alt") || '';
+
+  const body = document.querySelector("body");
+
+  let template = `
+    <img id="badegg-lightbox-image" src="${src}" tabindex="0" title="${title}" alt="${alt}" />
+    <button id="badegg-lightbox-close" aria-label="close" aria-expanded="true" tabindex="0">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <line x2="32" y2="32"/>
+        <line x1="32" y2="32"/>
+      </svg>
+    </button>
+    <div id="badegg-lightbox-overlay"></div>
+  `;
+
+  let modal = document.createElement("div");
+
+  modal.setAttribute("id", "badegg-lightbox-modal");
+  modal.setAttribute("aria-modal", "true");
+  modal.innerHTML = template;
+
+  body.appendChild(modal);
+
+  setTimeout(() => modal.classList.add("open"), 100);
+
+  document.getElementById("badegg-lightbox-image").focus();
+
+  modalDeleteListener();
+}
+
+function modalDeleteListener()
+{
+  const modal = document.getElementById("badegg-lightbox-modal");
+
+  if(!modal) return;
+
+  const modalClose = document.getElementById("badegg-lightbox-close");
+  const modalOverlay = document.getElementById("badegg-lightbox-overlay");
+
+  modalClose.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  modalOverlay.addEventListener("click", (e) => {
+    modal.remove();
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if(e.key === 'Escape') {
+      modal.remove();
+    }
+  });
+}