From 5ceaff890f2a147befbd9343f8d31102352aace8 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@villataika.fi>
Date: Thu, 2 Feb 2023 17:36:17 +0200
Subject: [PATCH] instatiate lightbox only when needed, slight hack

---
 app/javascript/application.js                | 12 +++++++++---
 app/views/members/show.html.haml             |  4 ++++
 app/views/merged/view/_section_pictures.haml |  5 +++++
 app/views/pictures/index.html.haml           |  3 +++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0db5b6b..a667dfe 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,4 +1,10 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import GLightbox from 'glightbox';
+// Configure your import map in config/importmap.rb.
+// Read more: https://github.com/rails/importmap-rails
 
-const lightbox = GLightbox({  });
+// Currently haml filter does not support modules.
+// import and make global as workaround
+//
+// haml module syntax is really clunky, filing issue and hoping
+//
+import GLightbox from 'glightbox';
+globalThis.GLightbox = GLightbox;
diff --git a/app/views/members/show.html.haml b/app/views/members/show.html.haml
index b3699bb..5b47dfe 100644
--- a/app/views/members/show.html.haml
+++ b/app/views/members/show.html.haml
@@ -47,3 +47,7 @@
           = link_to edit_picture_path(picture) do
             %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
               Edit Picture
+:javascript
+  document.addEventListener("DOMContentLoaded", function(event) {
+    const lightbox = GLightbox({  });
+  });
diff --git a/app/views/merged/view/_section_pictures.haml b/app/views/merged/view/_section_pictures.haml
index 668fce4..f2e8e77 100644
--- a/app/views/merged/view/_section_pictures.haml
+++ b/app/views/merged/view/_section_pictures.haml
@@ -1,3 +1,8 @@
 .mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
   - Picture.all.limit(4).each do |picture|
     = render "pictures/picture" , picture: picture
+
+:javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });
diff --git a/app/views/pictures/index.html.haml b/app/views/pictures/index.html.haml
index 6f3a5d9..242c9e7 100644
--- a/app/views/pictures/index.html.haml
+++ b/app/views/pictures/index.html.haml
@@ -16,3 +16,6 @@
       New Picture
 
 :javascript
+    document.addEventListener("DOMContentLoaded", function(event) {
+      const lightbox = GLightbox({  });
+    });