Add screen slider component

CHDataManagement/Page Elements/ContentElements/WallpaperSlider.swift

@@ -0,0 +1,167 @@
+
+struct WallpaperSlider: HtmlProducer {
+
+    static let frameHeight = 585
+
+    static let frameWidth = 270
+
+    static let imageWidth = 250
+
+    static let imageHeight = 500
+
+    let frame: Frame
+
+    let images: [Image]
+
+    let id: String
+
+    struct Frame {
+
+        let alt: String
+
+        let x1: ImageVersion
+
+        let x2: ImageVersion
+
+        init(frame: FileResource, language: ContentLanguage, results: PageGenerationResults) {
+            self.x1 = frame.imageVersion(
+                width: WallpaperSlider.frameWidth * 2,
+                height: WallpaperSlider.frameHeight * 2,
+                type: frame.type)
+
+            self.x2 = frame.imageVersion(
+                width: WallpaperSlider.frameWidth * 2,
+                height: WallpaperSlider.frameHeight * 2,
+                type: frame.type)
+
+            self.alt = frame.localized(in: language) ?? "A frame"
+
+            results.require(image: x1)
+            results.require(image: x2)
+        }
+    }
+
+    struct Image {
+
+        let display: ImageSet
+
+        let wide: DownloadImage
+
+        let tall: DownloadImage
+
+        struct DownloadImage {
+
+            let url: String
+
+            let button: String
+        }
+
+        init(tall: FileResource, wide: FileResource, language: ContentLanguage, results: PageGenerationResults) {
+            self.display = tall.imageSet(
+                width: WallpaperSlider.imageWidth,
+                height: WallpaperSlider.imageHeight,
+                language: language)
+            let wideButton = language == .english ? "Wide" : "Breit"
+            self.wide = .init(url: wide.absoluteUrl, button: wideButton)
+
+            let tallButton = language == .english ? "Tall" : "Hoch"
+            self.tall = .init(url: tall.absoluteUrl, button: tallButton)
+
+            results.require(imageSet: display)
+            results.require(file: wide)
+            results.require(file: tall)
+            results.require(icon: .buttonDownload)
+        }
+    }
+
+    func populate(_ result: inout String) {
+        let icon: PageIcon = .buttonDownload
+
+        result += "<div class='swiper-container'>"
+        result += "<img class='overlay-image' srcset='\(frame.x2.outputPath) 2x' src='\(frame.x1.outputPath)' \(frame.alt)/>"
+        result += "<div id='wallpaper-\(id)' class='swiper'><div class='swiper-wrapper'>"
+        for image in images {
+            result += "<div class='swiper-slide'>"
+            image.display.populate(&result)
+            result += "<div class='button-container'>"
+            result += "<a class='tag custom-button' href='\(image.tall.url)' download>\(icon.usageString)\(image.tall.button)</a>"
+            result += "<a class='tag custom-button' href='\(image.wide.url)' download>\(icon.usageString)\(image.wide.button)</a>"
+            result += "</div></div>" // Close button-container, swiper-slide
+        }
+        result += "</div>" // Close swiper-wrapper
+        result += "<div class='swiper-button-next'></div>"
+        result += "<div class='swiper-button-prev'></div>"
+        result += "</div>" // Close swiper
+        result += "</div>" // Close swiper-container
+    }
+
+    var style: String {
+        """
+        .swiper {
+            overflow: hidden;
+            border-radius: 10px;
+        }
+        .swiper-container {
+            position: relative;
+            max-width: 250px;
+            max-height: 500px;
+            margin: auto;
+            margin-top: 40px;
+            aspect-ratio: 1 / 2;
+        }
+
+        .overlay-image {
+            position: absolute;
+            top: -8.5%;
+            left: -4%;
+            width: 108%;
+            height: 117%;
+            z-index: 10;
+            object-fit: contain;
+            pointer-events: none;
+        }
+        .button-container {
+            position: absolute;
+            bottom: 15%;
+            width: 100%;
+            margin: auto;
+            display: flex;
+            justify-content: space-evenly;
+        }
+        .custom-button {
+            padding: 10px 10px;
+            width: 60px;
+            border: none;
+            border-radius: 10px;
+            background-color: rgba(29, 29, 29, 0.74);
+            color: white;
+            cursor: pointer;
+            text-decoration: none;
+            font-size: 12px;
+            justify-content: space-evenly;
+        }
+        .swiper-button-next {
+            margin-right: 5px;
+        }
+        .swiper-button-prev {
+            margin-left: 5px;
+        }
+        """
+    }
+
+    var script: String {
+        """
+        <script>
+        window.onload = () => {
+            var swiper_\(id) = new Swiper("#wallpaper-\(id)", {
+                loop: true,
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            });
+        };
+        </script>
+        """
+    }
+}