Testing lightbox for e-learning

Peace-Research-Institute-Frankfurt · Jan 28, 2025 · 39964dd · 39964dd
1 parent e9c668b
commit 39964dd
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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}