67 lines
2.0 KiB
Swift
67 lines
2.0 KiB
Swift
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?
|
|
|
|
/// The id of the image container
|
|
let id: String?
|
|
|
|
/// Additional class names for the image container
|
|
let className: String?
|
|
|
|
/// Additional content for the image container
|
|
let imageContent: String?
|
|
|
|
init(imageId: String, thumbnail: ImageSet, largeImage: ImageSet, caption: String?, id: String? = nil, className: String? = nil, imageContent: String? = nil) {
|
|
self.imageId = imageId
|
|
self.thumbnail = thumbnail
|
|
self.largeImage = largeImage
|
|
self.caption = caption
|
|
self.id = id
|
|
self.className = className
|
|
self.imageContent = imageContent
|
|
}
|
|
|
|
var idString: String {
|
|
guard let id else { return "" }
|
|
return " id='\(id)'"
|
|
}
|
|
|
|
var classString: String {
|
|
guard let className else { return "" }
|
|
return " \(className)"
|
|
}
|
|
|
|
func populate(_ result: inout String) {
|
|
result += "<div\(idString) class='content-image\(classString)' onclick=\"document.getElementById('\(imageId)').classList.add('active')\">"
|
|
result += thumbnail.content
|
|
if let imageContent {
|
|
result += imageContent
|
|
}
|
|
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>"
|
|
}
|
|
}
|