Implement lightbox

2024-11-29 15:52:45 -06:00
parent ce3db053c2
commit 0e8d4104f8
5 changed files with 89 additions and 2 deletions
@@ -0,0 +1,57 @@
+.lightbox {
+  --backdrop-speed: 150ms;
+
+  background-color: oklch(var(--lch-white) / 0.66);
+  block-size: 100dvh;
+  border: 0;
+  inline-size: 100dvw;
+  inset: 0;
+  margin: auto;
+  max-height: unset;
+  max-width: unset;
+  overflow: hidden;
+  padding: var(--block-space-half) var(--inline-space);
+
+  &::backdrop {
+    -webkit-backdrop-filter: blur(66px);
+    backdrop-filter: blur(66px);
+    background-color: var(--color-ink);
+    opacity: 0;
+    transition:
+      display var(--backdrop-speed) allow-discrete,
+      opacity var(--backdrop-speed),
+      overlay var(--backdrop-speed) allow-discrete;
+  }
+
+  &[open] {
+    display: grid;
+    opacity: 1;
+    place-items: center;
+
+    &::backdrop {
+      opacity: 0.75;
+    }
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+.lightbox__btn {
+  align-self: start;
+  grid-area: 1/1;
+  justify-self: end;
+}
+
+.lightbox__image {
+  grid-area: 1/1;
+  max-inline-size: calc(100dvw - (var(--inline-space) * 2));
+  max-block-size: calc(100dvh - (var(--block-space) * 2));
+}
@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "image", "dialog", "zoomedImage" ]
+
+  open(event) {
+    this.dialogTarget.showModal()
+    this.#set(event.target.closest("a"))
+  }
+
+  reset() {
+    this.zoomedImageTarget.src = ""
+  }
+
+  #set(target) {
+    this.zoomedImageTarget.src = target.href
+  }
+}
@@ -13,7 +13,7 @@
      <% end %>
    </div>
    <div class="comment__body txt-align-start">
-      <%= simple_format comment.body_html %>
+      <%= comment.body_html %>
    </div>
  </div>
 <% end %>
@@ -0,0 +1,10 @@
+<dialog class="lightbox" aria-label="Image Viewer (Press escape to close)" data-lightbox-target="dialog" data-action="close->lightbox#reset">
+  <img src="" class="lightbox__image" data-lightbox-target="zoomedImage" />
+
+  <form method="dialog" class="lightbox__btn">
+    <button class="btn fill-white" title="Close (esc)">
+      <%= image_tag "remove.svg", aria: { hidden: "true" } %>
+      <span class="for-screen-reader">Close image viewer (esc)</span>
+    </button>
+  </form>
+</dialog>
@@ -19,7 +19,7 @@
    <%= yield :head %>
  </head>

-  <body>
+  <body data-controller="lightbox">
    <header id="header">
      <a href="#main-content" class="skip-navigation btn">Skip to main content</a>
      <%= yield :header %>
@@ -45,5 +45,7 @@
    <footer id="footer">
      <%= yield :footer %>
    </footer>
+
+    <%= render "layouts/lightbox" %>
  </body>
 </html>