ch/ChWebsiteApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add screen slider component

Browse Source
This commit is contained in:
Christoph Hagen
2025-02-20 23:44:12 +01:00
parent a8bc7298ff
commit d4c0da0a32
6 changed files with 328 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHDataManagement/Generator/Blocks/ContentBlock.swift
View File

@@ -13,6 +13,8 @@ enum ContentBlock: String, CaseIterable {
case labels
case screens
var processor: BlockProcessor.Type {
switch self {
case .audio: return AudioBlock.self
@@ -21,6 +23,7 @@ enum ContentBlock: String, CaseIterable {
case .button: return ButtonBlock.self
case .buttons: return ButtonsBlock.self
case .labels: return LabelsBlock.self
case .screens: return PhoneScreensBlock.self
}
}
}

104
CHDataManagement/Generator/Blocks/PhoneScreensBlock.swift Normal file
View File

@@ -0,0 +1,104 @@
struct PhoneScreensBlock: OrderedKeyBlockProcessor {
enum Key: String {
case id
case frame
case tall
case wide
}
static let blockId: ContentBlock = .screens
let content: Content
let results: PageGenerationResults
let language: ContentLanguage
init(content: Content, results: PageGenerationResults, language: ContentLanguage) {
self.content = content
self.results = results
self.language = language
}
func process(_ arguments: [(key: Key, value: String)], markdown: Substring) -> String {
print("Processing Phone Screens Block")
guard let frameId = arguments.first(where: {$0.key == .frame })?.value else {
invalid(markdown)
return ""
}
guard let frameFile = content.file(frameId) else {
results.missing(file: frameId, source: "Wallpaper Block")
return ""
}
guard let id = arguments.first(where: {$0.key == .id })?.value else {
invalid(markdown)
return ""
}
let remaining = arguments.filter { $0.key == .tall || $0.key == .wide }
var images = [WallpaperSlider.Image]()
var tall: FileResource?
var wide: FileResource?
for (key, fileId) in remaining {
guard let file = content.file(fileId) else {
print("Missing file: \(fileId)")
results.missing(file: fileId, source: "Wallpaper Block")
return ""
}
if key == .tall {
if tall != nil {
print("Another tall image: \(file.id)")
invalid(markdown)
return ""
}
if let other = wide {
let image = WallpaperSlider.Image(
tall: file,
wide: other,
language: language,
results: results)
images.append(image)
wide = nil
continue
}
tall = file
continue
}
// key == .wide
if wide != nil {
print("Another wide image: \(file.id)")
invalid(markdown)
return ""
}
guard let other = tall else {
wide = file
continue
}
let image = WallpaperSlider.Image(
tall: other,
wide: file,
language: language,
results: results)
images.append(image)
tall = nil
}
if tall != nil || wide != nil {
invalid(markdown)
print("Wide/tall does not have the same number of items")
return ""
}
let frame = WallpaperSlider.Frame(frame: frameFile, language: language, results: results)
let slider = WallpaperSlider(frame: frame, images: images, id: id)
results.require(footer: slider.script)
results.require(headers: .swiperJs, .swiperCss)
results.require(header: .style(slider.style))
return slider.content
}
}

7
CHDataManagement/Generator/HeaderElement.swift
View File

@@ -52,6 +52,8 @@ enum HeaderElement {
case manifest(FileResource)
case style(String)
var order: Int {
switch self {
case .charset: 1
@@ -69,6 +71,7 @@ enum HeaderElement {
case .ogDescription: 104
case .ogImage: 105
case .ogUrl: 106
case .style: 200
}
}
@@ -136,6 +139,8 @@ extension HeaderElement {
return "<meta name='robots' content='noindex'>"
case .manifest(let file):
return "<link rel='manifest' href='\(file.absoluteUrl)'>"
case .style(let style):
return "<style>\(style)</style>"
}
}
}
@@ -174,6 +179,8 @@ extension HeaderElement: CustomStringConvertible {
return "robots"
case .manifest:
return "manifest"
case .style:
return "style"
}
}
}

49
CHDataManagement/Generator/KnownHeaderElement.swift
View File

@@ -1,19 +1,25 @@
enum KnownHeaderElement: Int {
enum KnownHeaderElement {
case codeHightlighting = 4
case codeHightlighting
case modelViewer = 3
case modelViewer
/// CSS File to style the audio player
case audioPlayerCss = 1
case audioPlayerCss
/// JavaScript file for the audio player
case audioPlayerJs = 2
case audioPlayerJs
case imageCompareJs = 5
case imageCompareJs
case imageCompareCss = 6
case imageCompareCss
case swiperCss
case swiperJs
case style(String)
func header(content: Content) -> HeaderElement? {
switch self {
@@ -41,15 +47,32 @@ enum KnownHeaderElement: Int {
if let file = content.settings.pages.imageCompareCssFile {
return .css(file: file, order: HeaderElement.imageCompareCssOrder)
}
case .swiperCss:
if let swiperCss = content.settings.posts.swiperCssFile {
return .css(file: swiperCss, order: HeaderElement.swiperCssFileOrder)
}
case .swiperJs:
if let swiperJs = content.settings.posts.swiperJsFile {
return .js(file: swiperJs, defer: true)
}
case .style(let code):
return .style(code)
}
return nil
}
}
extension KnownHeaderElement: Comparable {
extension KnownHeaderElement: Equatable {
static func < (lhs: KnownHeaderElement, rhs: KnownHeaderElement) -> Bool {
lhs.rawValue < rhs.rawValue
static func == (lhs: KnownHeaderElement, rhs: KnownHeaderElement) -> Bool {
lhs.description == rhs.description
}
}
extension KnownHeaderElement: Hashable {
func hash(into hasher: inout Hasher) {
hasher.combine(description)
}
}
@@ -69,6 +92,12 @@ extension KnownHeaderElement: CustomStringConvertible {
return "image-compare-js"
case .imageCompareCss:
return "image-compare-css"
case .swiperCss:
return "swiper-css"
case .swiperJs:
return "swiper-js"
case .style(let style):
return "style: " + style
}
}
}

167
CHDataManagement/Page Elements/ContentElements/WallpaperSlider.swift Normal file
View File

@@ -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>
"""
}
}