Add image gallery block

CHDataManagement/Generator/Blocks/ContentBlock.swift

@@ -17,6 +17,8 @@ enum ContentBlock: String, CaseIterable {
 
     case route
 
+    case gallery
+
     var processor: BlockProcessor.Type {
         switch self {
         case .audio: return AudioBlock.self
@@ -27,6 +29,7 @@ enum ContentBlock: String, CaseIterable {
         case .labels: return LabelsBlock.self
         case .screens: return PhoneScreensBlock.self
         case .route: return RouteBlock.self
+        case .gallery: return GalleryBlock.self
         }
     }
 }

CHDataManagement/Generator/Blocks/GalleryBlock.swift

@@ -0,0 +1,46 @@
+
+struct GalleryBlock: BlockLineProcessor {
+
+    static let blockId: ContentBlock = .gallery
+
+    let content: Content
+
+    let results: PageGenerationResults
+
+    let language: ContentLanguage
+
+    init(content: Content, results: PageGenerationResults, language: ContentLanguage) {
+        self.content = content
+        self.results = results
+        self.language = language
+    }
+
+    private var imageWidth: Int {
+        content.settings.pages.contentWidth
+    }
+
+    func process(_ lines: [String], markdown: Substring) -> String {
+        var images = [FileResource]()
+
+        for line in lines {
+            let imageId = line.trimmed
+            guard !imageId.isEmpty else { continue }
+            guard let image = content.image(imageId) else {
+                results.missing(file: imageId, source: "Route block")
+                continue
+            }
+            images.append(image)
+        }
+        guard let firstImage = images.first else { return "" }
+
+        let imageSets = images.map {
+            $0.imageSet(width: imageWidth, height: imageWidth, language: language)
+        }
+        imageSets.forEach(results.require)
+        let id = firstImage.id.replacingOccurrences(of: ".", with: "-")
+        let gallery = ImageGallery(id: id, images: imageSets, standalone: true)
+        results.require(footer: gallery.standaloneFooter)
+        results.require(headers: .swiperJs, .swiperCss)
+        return gallery.content
+    }
+}

CHDataManagement/Generator/Page Generators/FeedPageGenerator.swift

@@ -84,14 +84,7 @@ final class FeedPageGenerator {
     }
 
     func swiperInitScript(posts: [FeedEntryData]) -> String {
-        var result = "<script> window.onload = () => { "
-        for post in posts {
-            guard post.requiresSwiper else {
-                continue
-            }
-            result += ImageGallery.swiperInit(id: post.entryId)
-        }
-        result += "}; </script>"
-        return result
+        let ids = posts.filter { $0.requiresSwiper }.map { $0.entryId }
+        return ImageGallery.combinedFootor(ids: ids)
     }
 }

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")) { }
-        }
-    }
-}
-*/

CHDataManagement/Views/Pages/Commands/Insert+Gallery.swift

@@ -0,0 +1,68 @@
+import SwiftUI
+import SFSafeSymbols
+
+struct InsertableGallery: View, InsertableCommandView {
+
+    static let title = "Gallery"
+
+    static let sheetTitle = "Insert an image gallery"
+
+    static let icon: SFSymbol = .photoStack
+
+    final class Model: InsertableCommandModel {
+
+        @Published
+        var images: [FileResource] = []
+
+        var isReady: Bool {
+            !images.isEmpty
+        }
+
+        init() {
+
+        }
+
+        var command: String? {
+            guard !images.isEmpty else {
+                return nil
+            }
+            return (
+                ["```\(GalleryBlock.blockId)"] +
+                images.map { $0.id } +
+                ["```"]
+            ).joined(separator: "\n")
+        }
+    }
+
+    @Environment(\.colorScheme)
+    private var colorScheme
+
+    @ObservedObject
+    private var model: Model
+
+    @State
+    private var showImagePicker = false
+
+    init(model: Model) {
+        self.model = model
+    }
+
+    var body: some View {
+        VStack(spacing: 2) {
+            ScrollView(.horizontal) {
+                HStack(alignment: .center, spacing: 8) {
+                    ForEach(model.images) { image in
+                        PostImageView(image: image)
+                    }
+                }
+            }
+            Button("Select images", action: { showImagePicker = true })
+            .padding(.vertical, 2)
+        }
+        .sheet(isPresented: $showImagePicker) {
+            MultiFileSelectionView(
+                selectedFiles: $model.images,
+                allowedType: .image)
+        }
+    }
+}

CHDataManagement/Views/Pages/Commands/InsertableItemsView.swift

@@ -7,6 +7,7 @@ struct InsertableItemsView: View {
             Text("Commands")
                 .font(.headline)
             InsertableView<InsertableImage>()
+            InsertableView<InsertableGallery>()
             InsertableView<InsertableLabels>()
             InsertableView<InsertableButtons>()
             InsertableView<InsertableLink>()