Implement image comparison command

This commit is contained in:
Christoph Hagen
2025-01-05 20:16:16 +01:00
parent 29bba5e76e
commit ac7fbdd638
23 changed files with 200 additions and 40 deletions

View File

@ -0,0 +1,12 @@
extension Icon {
struct LeftRightArrow: ContentIcon {
static let name = "left-right-arrow"
static let content = """
<svg id='\(name)' viewBox='0 0 100 100'><polygon points='10 50 37 80 37 20 10 50' style='fill:currentColor'/><polygon points='90 50 64 20 64 80 90 50' style='fill:currentColor'/></svg>
"""
}
}

View File

@ -53,6 +53,10 @@ enum PageIcon: String, CaseIterable {
case audioPlayerNext = "next"
// MARK: Image compare
case leftRightArrow = "left-right-arrow"
var icon: ContentIcon.Type {
switch self {
case .statisticsTime: return StatisticsTimeIcon.self
@ -77,6 +81,7 @@ enum PageIcon: String, CaseIterable {
case .location: return Icon.Location.self
case .poster: return Icon.Poster.self
case .video: return Icon.Video.self
case .leftRightArrow:return Icon.LeftRightArrow.self
}
}
}

View File

@ -0,0 +1,20 @@
struct ImageCompare: HtmlProducer {
let left: ImageSet
let right: ImageSet
static let extraAttributes = " draggable='false''"
static var requiredIcon: PageIcon { .leftRightArrow }
func populate(_ result: inout String) {
result += "<div class='image-compare' style='aspect-ratio: 748/487'>"
result += "<div class='right'>\(left.content)</div>"
result += "<div class='left'>\(right.content)</div>"
result += "<div class='drag'>"
result += "<svg><use href='#\(Icon.LeftRightArrow.name)'></use></svg>"
result += "</div></div>" // Close drag, image-compare
}
}