84 lines
2.6 KiB
Swift
84 lines
2.6 KiB
Swift
import Foundation
|
|
|
|
struct ImageGallery {
|
|
|
|
let id: String
|
|
|
|
let images: [FeedEntryData.Image]
|
|
|
|
init(id: String, images: [FeedEntryData.Image]) {
|
|
self.id = id
|
|
self.images = images
|
|
}
|
|
|
|
func addContent(to result: inout String) {
|
|
guard !images.isEmpty else {
|
|
return
|
|
}
|
|
|
|
result += "<div id=\"s\(id)\" class=\"swiper\"><div class=\"swiper-wrapper\">"
|
|
|
|
guard images.count > 1 else {
|
|
let image = images[0]
|
|
result += "<div class=\"swiper-slide\"><img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\"></div>"
|
|
result += "</div></div>" // Close swiper, swiper-wrapper
|
|
return
|
|
}
|
|
|
|
for image in images {
|
|
// TODO: Use different images based on device
|
|
result += "<div class=\"swiper-slide\">"
|
|
result += "<img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\">"
|
|
result += "<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"></div>"
|
|
result += "</div>" // Close swiper-slide
|
|
}
|
|
|
|
result += "<div class=\"swiper-button-next\"></div>"
|
|
result += "<div class=\"swiper-button-prev\"></div>"
|
|
result += "<div class=\"swiper-pagination\"></div>"
|
|
result += "</div></div>" // Close swiper, swiper-wrapper
|
|
}
|
|
|
|
static func swiperInit(id: String) -> String {
|
|
"""
|
|
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")) { }
|
|
}
|
|
}
|
|
}
|
|
*/
|