From 39964dde2b6f512ba54e1d9640d93b9e38205934 Mon Sep 17 00:00:00 2001
From: Thomas <info@handmade-it.de>
Date: Tue, 28 Jan 2025 20:51:03 +0100
Subject: [PATCH] Testing lightbox for e-learning

---
 .../content/learning-units/demo/0_intro.mdx   |  1 +
 e-learning/src/components/App.js              |  1 +
 e-learning/src/components/Figure.module.scss  | 37 +++++++++++++++++++
 e-learning/src/components/FigureAdapter.js    | 11 +++++-
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/e-learning/content/learning-units/demo/0_intro.mdx b/e-learning/content/learning-units/demo/0_intro.mdx
index 97f008cb8..caccedaa6 100644
--- a/e-learning/content/learning-units/demo/0_intro.mdx
+++ b/e-learning/content/learning-units/demo/0_intro.mdx
@@ -49,6 +49,7 @@ Both raster images (PNG, JPG, etc.) and vector images (SVG) are supported. Raste
   alt=""
   license="cc-by-2"
   discourageSaving={true}
+  expandable={true}
 ></Figure>
 
 ## Image gallery
diff --git a/e-learning/src/components/App.js b/e-learning/src/components/App.js
index d5a8e01a2..8d18eac86 100644
--- a/e-learning/src/components/App.js
+++ b/e-learning/src/components/App.js
@@ -12,6 +12,7 @@ function App(props) {
       <main>{props.children}</main>
       <SiteFooter />
       <div id="tooltips" />
+      <div id="lightboxes" />
     </>
   )
 }
diff --git a/e-learning/src/components/Figure.module.scss b/e-learning/src/components/Figure.module.scss
index 69f833224..00329cb81 100644
--- a/e-learning/src/components/Figure.module.scss
+++ b/e-learning/src/components/Figure.module.scss
@@ -154,3 +154,40 @@
     pointer-events: none;
   }
 }
+
+.lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 5000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--black);
+  pointer-events: none;
+  opacity: 0;
+  transition: var(--fast);
+  visibility: hidden;
+  padding: var(--padding-small);
+}
+
+.lightbox-media {
+  height: 100%;
+  display: flex;
+  position: relative;
+  .image {
+    height: 100%;
+    width: auto;
+    img {
+      object-fit: contain !important;
+    }
+  }
+}
+
+.lightbox-active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
diff --git a/e-learning/src/components/FigureAdapter.js b/e-learning/src/components/FigureAdapter.js
index ae6e36e30..4a8e70e40 100644
--- a/e-learning/src/components/FigureAdapter.js
+++ b/e-learning/src/components/FigureAdapter.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Figure from '@shared/components/Figure'
 
-export default function FigureAdapter({ styles, caption, credit, size, alt, src, license, discourageSaving }) {
+export default function FigureAdapter({ styles, caption, credit, size, alt, src, license, discourageSaving, expandable }) {
   const data = useStaticQuery(graphql`
     query ImageQuery {
       licenses: allLicensesJson {
@@ -54,11 +54,20 @@ export default function FigureAdapter({ styles, caption, credit, size, alt, src,
     }
   })
 
+  const [lightboxTargetEl, setLightboxTargetEl] = useState(null)
+
+    // Prepare render target for lightboxes
+    useEffect(() => {
+      setLightboxTargetEl(document.querySelector('#lightboxes'))
+    }, [setLightboxTargetEl])
+
   return (
     <Figure
       styles={styles}
       image={image}
       src={src}
+      expandable={expandable}
+      lightboxTargetEl={lightboxTargetEl}
       caption={caption}
       license={licenseNode}
       credit={credit}