From a895eab79e6e4bb0cbae592489108067ec6f48a7 Mon Sep 17 00:00:00 2001
From: Henry Lee <gbvrcx@gmail.com>
Date: Fri, 8 Mar 2024 05:01:03 +0000
Subject: [PATCH] :sparkles: Nicer gallery view

---
 assets/js/gallery.js            | 45 +++++++++++++++++++++++++++------
 layouts/shortcodes/gallery.html | 15 ++++++++---
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/assets/js/gallery.js b/assets/js/gallery.js
index 92034fb..4b1226e 100644
--- a/assets/js/gallery.js
+++ b/assets/js/gallery.js
@@ -1,11 +1,40 @@
-const galleries = document.querySelectorAll('.gallery');
-galleries.forEach((gallery) => {
-    const masonry = new Masonry(gallery, {
-        itemSelector: '.item',
-        percentPosition: true
+// Enable lazy loading for image thumbnails
+document.addEventListener("DOMContentLoaded", function () {
+    const lazyloadImages = document.querySelectorAll(".lazy");
+    const imageObserver = new IntersectionObserver(function (entries, observer) {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+                const image = entry.target;
+                image.src = image.dataset.src;
+                image.classList.remove("lazy");
+                imageObserver.unobserve(image);
+            }
+        });
     });
 
-    imagesLoaded(gallery).on('progress', function () {
-        masonry.layout();
+    lazyloadImages.forEach(function (image) {
+        imageObserver.observe(image);
+    });
+
+});
+
+// Build masonry layout one by one
+const galleryHolders = document.querySelectorAll('.gallery-holder');
+galleryHolders.forEach((galleryHolder) => {
+    const target = document.querySelector(galleryHolder.dataset.galleryTarget);
+    const masonry = new Masonry(target, {
+        itemSelector: '.gallery-item',
+        percentPosition: true,
+        transitionDuration: 0,
     });
-}) 
+
+    const nItems = galleryHolder.children.length;
+    for (let i = 0; i < nItems; i++) {
+        const item = galleryHolder.children[0];
+        target.appendChild(item);
+        masonry.appended([item]);
+        masonry.layout();
+    }
+
+    galleryHolder.remove();
+});
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index bd4b9ce..4063d3b 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -5,7 +5,8 @@
 {{ $name := replace $folder "." "" }}
 {{ $name := replace $name "/" "-" }}
 
-<div class="gallery row">
+<div class="gallery row" id="{{ $name }}Gallery"></div>
+<div class="gallery-holder d-none" data-gallery-target="#{{ $name }}Gallery">
     {{ range $idx, $org := $images }}
         {{ $image := strings.TrimPrefix "./" $org }}
         {{ $image := $.Page.Resources.GetMatch $image }}
@@ -26,10 +27,18 @@
         {{ else }}
             {{ $image = $image.Resize "1000x webp" }}
         {{ end }}
-        <div class="item col-sm-6 col-lg-4 px-1 pb-2" data-bs-toggle="modal" data-bs-target="#{{ $name }}Modal" role="button" data-bs-image="{{ $org }}">
+        {{ $placeholder := $image.Resize "1x1" }}
+        {{ $placeholder := printf "%dx%d" $image.Width $image.Height | $placeholder.Resize }}
+        {{ $placeholderColor := index $placeholder.Colors 0 }}
+        {{ $placeholderColor := replace $placeholderColor "#" "%23" }}
+        <div class="gallery-item col-sm-6 col-lg-4 px-1 pb-2" data-bs-toggle="modal" data-bs-target="#{{ $name }}Modal" role="button" data-bs-image="{{ $org }}">
             <div data-bs-target="#{{ $name }}Carousel" data-bs-slide-to="{{ $idx }}">
                 <div class="card">
-                    <img src="{{ $image.RelPermalink }}" loading="lazy" class="card-img w-100">
+                    <img
+                        src="data:image/svg+xml;utf8,%3Csvg width='1000' height='{{ $image.Height }}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1000' height='{{ $image.Height }}' x='0' y='0' fill='{{ $placeholderColor }}' /%3E%3C/svg%3E"
+                        data-src="{{ $image.RelPermalink }}"
+                        class="lazy card-img w-100"
+                    >
                 </div>
             </div>
         </div>