feat: update galleries on resize (with smooth animations this time)

2 files changed, 39 insertions, 24 deletions

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index e20e9ec..17a6f2b 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -92,32 +92,35 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 		w.WriteString(fmt.Sprintf(`
 <script>
 function createLightGallery%s() {
-		const $lgContainer = document.getElementById('lg-%s');
-        const inlineGallery = lightGallery($lgContainer, {
-			container: $lgContainer,
-			dynamic: true,
-			dynamicEl: [%s],
-			width: "100%%",
-            height: "50vmin",
-			hash: false,
-			closable: false,
-			showMaximizeIcon: true,
-			appendSubHtmlTo: ".lg-sub-html",
-            isMobile: () => false,
-			slideDelay: 0,
-			plugins: [lgZoom, lgThumbnail],
-			thumbWidth: calculateVmin(10),
-			thumbHeight: "10vmin",
-			thumbMargin: 4
-        });
+	const $lgContainer = document.getElementById('lg-%s');
+	const config = {
+		container: $lgContainer,
+		dynamic: true,
+		dynamicEl: [%s],
+		width: "100%%",
+		height: "50vmin",
+		hash: false,
+		closable: false,
+		showMaximizeIcon: true,
+		appendSubHtmlTo: ".lg-sub-html",
+		isMobile: () => false,
+		slideDelay: 0,
+		plugins: [lgZoom, lgThumbnail],
+		thumbWidth: calculateVmin(10),
+		thumbHeight: "10vmin",
+		thumbMargin: 4
+	};
+	const inlineGallery = lightGallery($lgContainer, config);
 
-		setTimeout(() => {
-			inlineGallery.openGallery();
-		}, 200);
+	setTimeout(() => {
+		inlineGallery.openGallery();
+	}, 200);
+
+	galleryMap.set(inlineGallery, createLightGallery%s);
 }
 
 document.addEventListener('DOMContentLoaded', createLightGallery%s);
-</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID))
+</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 83860d7..d685fda 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -12,6 +12,10 @@
         height: 100% !important;
     }
 </style>
+
+<script>
+    const galleryMap = new Map();
+</script>
 {{ end }}
 
 {{ define "body" }}
@@ -70,10 +74,18 @@
         {{ .MapLocationAreaMeters }}
     )});
 
+    let resizeTimeout;
     window.addEventListener('resize', function() {
-        setTimeout(() => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
             map.invalidateSize();
-        }, 100);
+            var oldGalleryMap = new Map(galleryMap);
+            oldGalleryMap.forEach((createFunc, g, map) => {
+                galleryMap.delete(g);
+                g.destroy();
+                createFunc();
+            });
+        }, 300);
     });
 </script>
 {{- end }}