Support GIFs

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

@@ -0,0 +1,97 @@
+import Foundation
+
+/**
+ An element showing a selection of images one by one using navigation buttons.
+ */
+struct ImageGallery: HtmlProducer {
+
+    /// The unique id to distinguish different galleries in HTML and JavaScript
+    let id: String
+
+    /// The images to display
+    let images: [ImageSet]
+
+    /// 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]) {
+        self.id = id
+        self.images = images
+    }
+
+    func populate(_ result: inout String) {
+        guard !images.isEmpty else {
+            return
+        }
+
+        result += "<div id='\(htmlSafeId)' class='swiper'><div class='swiper-wrapper'>"
+
+        let needsPagination = images.count > 1
+
+        for image in images {
+            result += "<div class='swiper-slide'>"
+            result += image.content
+            if needsPagination {
+                result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"
+            }
+            result += "</div>" // Close swiper-slide
+        }
+
+        result += "</div>" // Close swiper-wrapper
+        if needsPagination {
+            result += "<div class='swiper-button-next'></div>"
+            result += "<div class='swiper-button-prev'></div>"
+            result += "<div class='swiper-pagination'></div>"
+        }
+        result += "</div>" // Close swiper
+    }
+
+    private static func htmlSafe(_ id: String) -> String {
+        id.replacingOccurrences(of: "-", with: "_")
+    }
+
+    static func swiperInit(id: String) -> String {
+        let id = htmlSafe(id)
+        return """
+        var swiper_\(id) = new Swiper("#\(id)", {
+              loop: true,
+              slidesPerView: 1,
+              spaceBetween: 30,
+              centeredSlides: true,
+              keyboard: { enabled: true },
+              pagination: {
+                el: "#\(id) .swiper-pagination",
+                clickable: true
+              },
+              navigation: {
+                nextEl: "#\(id) .swiper-button-next",
+                prevEl: "#\(id) .swiper-button-prev"
+              }
+            });
+        """
+    }
+}
+
+/*
+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")) { }
+        }
+    }
+}
+*/

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

@@ -0,0 +1,34 @@
+import Foundation
+
+/**
+ An image that is part of the page content.
+
+ A tap/click on the image shows a fullscreen version of the image, including an optional caption.
+ */
+struct PageImage: HtmlProducer {
+
+    /// The HTML id attribute used to enable fullscreen images
+    let imageId: String
+
+    /// The small version of the image visible on the page
+    let thumbnail: ImageSet
+
+    /// The large version of the image for fullscreen view
+    let largeImage: ImageSet
+
+    /// The optional caption text below the fullscreen image
+    let caption: String?
+
+    func populate(_ result: inout String) {
+        result += "<div class='content-image' onclick=\"document.getElementById('\(imageId)').classList.add('active')\">"
+        result += thumbnail.content
+        result += "</div>"
+        result += "<div id='\(imageId)' class='fullscreen-image' onclick=\"document.getElementById('\(imageId)').classList.remove('active')\">"
+        result += largeImage.content
+        if let caption {
+            result += "<div class='caption'>\(caption)</div>"
+        }
+        result += "<div class='close'></div>"
+        result += "</div>"
+    }
+}

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

@@ -26,16 +26,3 @@ struct PartialSvgImage: HtmlProducer {
         result += "</span>"
     }
 }
-
-struct SvgImage: HtmlProducer {
-
-    let imagePath: String
-
-    let altText: String
-
-    func populate(_ result: inout String) {
-        result += "<div class='content-image svg-image'>"
-        result += "<img src='\(imagePath)' loading='lazy' alt='\(altText)'/>"
-        result += "</div>"
-    }
-}

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

@@ -0,0 +1,14 @@
+
+
+struct SimpleImage: HtmlProducer {
+
+    let imagePath: String
+
+    let altText: String
+
+    func populate(_ result: inout String) {
+        result += "<div class='content-image svg-image'>"
+        result += "<img src='\(imagePath)' loading='lazy' alt='\(altText)'/>"
+        result += "</div>"
+    }
+}