Add image gallery block

CHDataManagement/Page Elements/ContentElements/Images/ImageGallery.swift

@@ -11,14 +11,17 @@ struct ImageGallery: HtmlProducer {
     /// The images to display
     let images: [ImageSet]
 
+    let standalone: Bool
+
     /// A version of the id that is safe to use in HTML and JavaScript
     private var htmlSafeId: String {
         ImageGallery.htmlSafe(id)
     }
 
-    init(id: String, images: [ImageSet]) {
+    init(id: String, images: [ImageSet], standalone: Bool = false) {
         self.id = id
         self.images = images
+        self.standalone = standalone
     }
 
     func populate(_ result: inout String) {
@@ -26,7 +29,7 @@ struct ImageGallery: HtmlProducer {
             return
         }
 
-        result += "<div id='\(htmlSafeId)' class='swiper'><div class='swiper-wrapper'>"
+        result += "<div id='\(htmlSafeId)' class='swiper\(standalone ? " swiper-standalone" : "")'><div class='swiper-wrapper'>"
 
         let needsPagination = images.count > 1
 
@@ -53,10 +56,27 @@ struct ImageGallery: HtmlProducer {
         id.replacingOccurrences(of: "-", with: "_")
     }
 
-    static func swiperInit(id: String) -> String {
+    var javascriptInit: String {
+        ImageGallery.swiperInit(id: id)
+    }
+
+    var standaloneFooter: String {
+        "<script> window.onload = () => {\n\(javascriptInit)\n}; </script>"
+    }
+
+    static func combinedFootor(ids: [String]) -> String {
+        var result = ["<script> window.onload = () => { "]
+        for id in ids {
+            result.append(swiperInit(id: id))
+        }
+        result.append("}; </script>")
+        return result.joined(separator: "\n")
+    }
+
+    private static func swiperInit(id: String) -> String {
         let id = htmlSafe(id)
         return """
-        var swiper_\(id) = new Swiper("#\(id)", {
+            var swiper_\(id) = new Swiper("#\(id)", {
               loop: true,
               lazy: {
                   loadPrevNext: false,
@@ -77,25 +97,3 @@ struct ImageGallery: HtmlProducer {
         """
     }
 }
-
-/*
-extension ImageGallery: HTML {
-
-    var content: some HTML {
-        div(.id(id), .class("swiper")) {
-            div(.class("swiper-wrapper")) {
-                for image in images {
-                    div(.class("swiper-slide")) {
-                        // TODO: Use different images based on device
-                        img(.src(image.mainImageUrl), .lazyLoad)
-                        div(.class("swiper-lazy-preloader"), .class("swiper-lazy-preloader-white")) { }
-                    }
-                }
-            }
-            div(.class("swiper-button-next")) { }
-            div(.class("swiper-button-prev")) { }
-            div(.class("swiper-pagination")) { }
-        }
-    }
-}
-*/