From 0e8d4104f8ba878eb0f9c6b1f6e2b2b60acf6190 Mon Sep 17 00:00:00 2001
From: Jose Farias <jose@37signals.com>
Date: Fri, 29 Nov 2024 15:52:45 -0600
Subject: [PATCH] Implement lightbox

---
 app/assets/stylesheets/lightbox.css           | 57 +++++++++++++++++++
 .../controllers/lightbox_controller.js        | 18 ++++++
 app/views/comments/_comment.html.erb          |  2 +-
 app/views/layouts/_lightbox.html.erb          | 10 ++++
 app/views/layouts/application.html.erb        |  4 +-
 5 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/lightbox.css
 create mode 100644 app/javascript/controllers/lightbox_controller.js
 create mode 100644 app/views/layouts/_lightbox.html.erb

diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
new file mode 100644
index 000000000..b2508149e
--- /dev/null
+++ b/app/assets/stylesheets/lightbox.css
@@ -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));
+}
diff --git a/app/javascript/controllers/lightbox_controller.js b/app/javascript/controllers/lightbox_controller.js
new file mode 100644
index 000000000..c2a541a13
--- /dev/null
+++ b/app/javascript/controllers/lightbox_controller.js
@@ -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
+  }
+}
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index 673edf740..7efab5588 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -13,7 +13,7 @@
       <% end %>
     </div>
     <div class="comment__body txt-align-start">
-      <%= simple_format comment.body_html %>
+      <%= comment.body_html %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
new file mode 100644
index 000000000..77c58be0c
--- /dev/null
+++ b/app/views/layouts/_lightbox.html.erb
@@ -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>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index d977d6af0..2121cf22a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -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>