Only load lightbox on content and journey pages

thekid · Jan 5, 2025 · 39bfc25 · 39bfc25
1 parent 2bca7ee
commit 39bfc25
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/src/main/handlebars/content.handlebars b/src/main/handlebars/content.handlebars
@@ -37,6 +37,8 @@ parent: feed
 
       {{> partials/images in=item style='all'}}
     </section>
+
+    {{> partials/lightbox}}
   {{/inline}}
   {{#*inline "scripts"}}
     <script src="/assets/{{asset 'mapping.js'}}" defer></script>

diff --git a/src/main/handlebars/journey.handlebars b/src/main/handlebars/journey.handlebars
@@ -79,6 +79,8 @@ parent: feed
         <p>(Coming soon)</p>
       </section>
     {{/with}}
+
+    {{> partials/lightbox}}
   {{/inline}}
   {{#*inline "scripts"}}
     <script src="/assets/{{asset 'mapping.js'}}" defer></script>

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
@@ -881,37 +881,11 @@
       {{> main}}
     </div>
   </main>
-
-  <dialog id="lightbox">
-    <div class="image">
-      <div class="imageset">
-        <img class="prev" alt="Lightbox (previous)" width="100%">
-        <img class="next" alt="Lightbox (next)" width="100%">
-        <img class="display" alt="Lightbox" width="100%">
-      </div>
-      <div class="meta">
-        <div><output name="datetime"></output></div>
-        <div><output name="make"></output></div>
-        <div><output name="model"></output></div>
-        <div><output name="lensmodel"></output></div>
-        <div>ISO <output name="isospeedratings"></output></div>
-        <div><output name="focallength"></output> mm</div>
-        <div><output name="aperturefnumber"></output></div>
-        <div><output name="exposuretime"></output> s</div>
-      </div>
-    </div>
-  </dialog>
-
   <footer class="footer">
     With ❤️ by Timm Friebe 2005-{{date null format="Y"}}
   </footer>
 
   <script src="/assets/{{asset 'vendor.js'}}" defer></script>
   {{> scripts}}
-
-  <script type="module">
-    {{&use 'lightbox'}}
-    new Lightbox().attach(document.querySelectorAll('a[data-lightbox]'), document.querySelector('#lightbox'));
-  </script>
 </body>
 </html>
diff --git a/src/main/handlebars/partials/lightbox.handlebars b/src/main/handlebars/partials/lightbox.handlebars
@@ -0,0 +1,23 @@
+<dialog id="lightbox">
+  <div class="image">
+    <div class="imageset">
+      <img class="prev" alt="Lightbox (previous)" width="100%">
+      <img class="next" alt="Lightbox (next)" width="100%">
+      <img class="display" alt="Lightbox" width="100%">
+    </div>
+    <div class="meta">
+      <div><output name="datetime"></output></div>
+      <div><output name="make"></output></div>
+      <div><output name="model"></output></div>
+      <div><output name="lensmodel"></output></div>
+      <div>ISO <output name="isospeedratings"></output></div>
+      <div><output name="focallength"></output> mm</div>
+      <div><output name="aperturefnumber"></output></div>
+      <div><output name="exposuretime"></output> s</div>
+    </div>
+  </div>
+</dialog>
+<script type="module">
+  {{&use 'lightbox'}}
+  new Lightbox().attach(document.querySelectorAll('a[data-lightbox]'), document.querySelector('#lightbox'));
+</script>