Use custom lightbox controller instead of imported controller

Author: zhephyn

app/components/avo/cover_photo_component.html.erb

@@ -1,3 +1,9 @@
-<div class="related w-full -mt-4 md:-mt-4 lg:-mt-6 mb-2 flex flex-col">
-  <%= image_tag helpers.main_app.url_for(@cover_photo.value), class: class_names("w-full object-cover", size_class), data: {component: self.class.to_s.underscore} %>
+<div data-controller="lightbox" class="related w-full -mt-4 md:-mt-4 lg:-mt-6 mb-2 flex flex-col">
+  <%= image_tag helpers.main_app.url_for(@cover_photo.value), 
+    class: class_names("w-full object-cover", size_class), 
+    data: {
+      action: "click->lightbox#open",
+      lightbox_target: "image"
+      component: self.class.to_s.underscore
+      } %>
 </div>

app/javascript/js/controllers.js

@@ -52,6 +52,7 @@ import TiptapFieldController from './controllers/fields/tiptap_field_controller'
 import ToggleController from './controllers/toggle_controller'
 import TrixBodyController from './controllers/trix_body_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
+import LightBoxController from './controllers/lightbox_controller'
 
 application.register('action', ActionController)
 application.register('actions-overflow', ActionsOverflowController)
@@ -95,6 +96,7 @@ application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)
 application.register('toggle', ToggleController)
 application.register('trix-body', TrixBodyController)
+application.register('lightbox', LightBoxController)
 
 // Field controllers
 application.register('belongs-to-field', BelongsToFieldController)

app/javascript/js/controllers/lightbox_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal", "image"]
+
+  connect() {
+    console.log("Lightbox controller connected")
+  }
+
+  open(event) {
+    const imageUrl = event.target.getAttribute("src")
+    this.imageTarget.setAttribute("src", imageUrl)
+    this.modalTarget.classList.remove("hidden")
+  }
+
+  close(event) {
+    if (event.target === this.modalTarget) {
+      this.modalTarget.classList.add("hidden")
+    }
+  }
+}

app/views/layouts/avo/application.html.erb

@@ -12,6 +12,7 @@
     <%= render partial: "avo/partials/javascript" %>
     <%= render partial: "avo/partials/branding" %>
     <%= render partial: "avo/partials/pre_head" %>
+    <%= render partial: "avo/partials/lightbox" %>
     <%= render Avo::AssetManager::StylesheetComponent.new asset_manager: Avo.asset_manager %>
     <%= stylesheet_link_tag @stylesheet_assets_path, "data-turbo-track": "reload", as: "style" %>
 

spec/dummy/app/views/avo/partials/_lightbox.html.erb

@@ -0,0 +1,20 @@
+<div 
+  data-controller="lightbox" 
+  data-lightbox-target="modal" 
+  class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 transition-opacity"
+  data-action="click->lightbox#close"
+>
+  <div class="relative max-w-3xl w-full">
+    <img 
+      data-lightbox-target="image" 
+      class="rounded-lg shadow-lg object-contain max-h-screen" 
+      alt="Expanded view of the image"
+    />
+    <button 
+      class="absolute top-4 right-4 text-white text-2xl font-bold" 
+      data-action="click->lightbox#close"
+    >
+      &times;
+    </button>
+  </div>
+</div>