Implement image comparison command
This commit is contained in:
@ -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>
|
||||
"""
|
||||
}
|
||||
}
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user