add simple lightbox

app/blocks.php

@@ -268,14 +268,19 @@ function core_details_modified($content, $block)
 
 function core_image_modified($content, $block)
 {
-    $imageID = @$block['attrs']['id'];
-    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
-    $large = wp_get_attachment_image_src($imageID, '2048x2048');
-
     $dom = new \DomDocument();
     $dom->strictErrorChecking = false;
     @$dom->loadHTML($content);
-    @$images = $dom->getElementsByTagName('img');
+
+    $images = @$dom->getElementsByTagName('img');
+    $figures = @$dom->getElementsByTagName('figure');
+
+    if(!$figures) return $content;
+
+    // get image data
+    $imageID = @$block['attrs']['id'];
+    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
+    $large = wp_get_attachment_image_src($imageID, '2048x2048');
 
     // create lightbox link node
     $link = $dom->createElement('a');
@@ -311,5 +316,6 @@ function core_image_modified($content, $block)
         $linkClone->appendChild($image);
     }
 
-    return $dom->saveHTML();
+    return $dom->saveHTML($figures[0]);
+
 }

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

@@ -3,11 +3,10 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
-// import.meta.glob('../views/blocks/**/{style.scss,script.js,view.js}', { eager: true })
-
 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();
+    }
+  });
+}

vite.config.js

@@ -6,7 +6,7 @@ import path from 'path';
 
 function blockAsset(file)
 {
-  const files = fg.sync('resources/views/blocks/**/' + file);
+  const files = fg.sync(`resources/views/blocks/**/${file}`, { deep: 2 });
   let list = {};
 
   files.forEach(file => {
@@ -31,10 +31,6 @@ export default defineConfig({
   plugins: [
     laravel({
       input: {
-        // 'resources/css/app.scss',
-        // 'resources/js/app.js',
-        // 'resources/css/editor.scss',
-        // 'resources/js/editor.js',
         'css/app': 'resources/css/app.scss',
         'js/app': 'resources/js/app.js',
         'css/editor': 'resources/css/editor.scss',