Merge pull request #14 from Doctave/lightbox

Lightbox implementation

Author: antoinert

crates/libdoctave/src/templates/components/markdown/image.html.jinja

@@ -2,4 +2,5 @@
   src="{{ node.kind.data.url }}"
   alt="{{ node.kind.data.alt }}"
   title="{{ node.kind.data.title }}"
+  data-zoomable="true"
 />

crates/libdoctave/src/templates/css-lightbox.css

@@ -0,0 +1,47 @@
+.app-lightbox {
+  position: fixed;
+  top: 0;
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  cursor: zoom-out;
+  background-color: var(--bg-color, hsl(0, 0%, 0%, 0.85));
+  opacity: 0;
+  transition: opacity 0.35s;
+}
+
+.app-lightbox.is-active {
+  pointer-events: initial;
+  opacity: 1;
+}
+
+:global([data-zoomable]) {
+  cursor: zoom-in;
+}
+
+.portal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.35s, transform 0.35s;
+  transform: scale(0.2);
+}
+
+.app-lightbox.is-active .portal {
+  transform: scale(0.75);
+}
+
+@media (max-width: 1024px) {
+  .app-lightbox.is-active .portal {
+    transform: scale(0.9);
+  }
+}
+
+.portal img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius-6);
+}

crates/libdoctave/src/templates/css-prose.css

@@ -115,11 +115,13 @@
   border-radius: initial;
   margin-top: initial;
   margin-bottom: initial;
+  cursor: initial;
   {% else %}
   max-width: 100%;
   border-radius: var(--space-2);
   margin-top: calc(2em * var(--prose-scale));
   margin-bottom: calc(2em * var(--prose-scale));
+  cursor: zoom-in;
   {% endif %}
 }
 
@@ -381,6 +383,7 @@
   {% if not reset %}
   margin-top: 0;
   margin-bottom: 0;
+  cursor: zoom-in;
   {% endif %}
 }
 

crates/libdoctave/src/templates/css.html.jinja

@@ -668,5 +668,6 @@
   {% include "css-builtin-components.css" %}
   {% include "css-openapi.css" %}
   {% include "css-search-modal.css" %}
+  {% include "css-lightbox.css" %}
 </style>
 {# prettier-ignore-end #}

crates/libdoctave/src/templates/layouts/base.html.jinja

@@ -145,5 +145,7 @@
         {% endif %}
       </div>
     </div>
+
+    {% include "lightbox.html.jinja" %}
   </body>
 </html>

crates/libdoctave/src/templates/lightbox.html.jinja

@@ -0,0 +1,35 @@
+<div class="app-lightbox">
+    <div class="portal"></div>
+</div>
+
+<script>
+  const lbTriggers = document.querySelectorAll('[data-zoomable="true"]');
+
+  const lightbox = document.querySelector('.app-lightbox');
+  const portal = lightbox.querySelector('.portal');
+
+  for (const trig of lbTriggers) {
+    trig.addEventListener('click', () => {
+      portal.innerHTML = trig.outerHTML;
+      setTimeout(() => {
+        const img = portal.querySelectorAll('img')[0];
+        const ratio = img.naturalWidth / img.naturalHeight;
+        img.sizes = `${window.innerHeight * ratio}px`;
+      }, 352);
+      lightbox.classList.add('is-active');
+      document.documentElement.classList.add('scrollIsLocked');
+    });
+  }
+
+  lightbox.addEventListener('click', () => {
+    lightbox.classList.remove('is-active');
+    document.documentElement.classList.remove('scrollIsLocked');
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      lightbox.classList.remove('is-active');
+      document.documentElement.classList.remove('scrollIsLocked');
+    }
+  });
+</script>