Merge pull request #41 from pixel-foundry/master

Add viewport-fit to viewport meta tag
JohnSundell · Mar 31, 2023 · d8fa91a · d8fa91a
2 parents 42ab862 + ae6a174
commit d8fa91a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/Sources/Plot/API/HTMLComponents.swift b/Sources/Plot/API/HTMLComponents.swift
@@ -88,9 +88,15 @@ public extension Node where Context == HTML.HeadContext {
     /// - parameter widthMode: How the viewport's width should scale according
     ///   to the device the page is being rendered on. See `HTMLViewportWidthMode`.
     /// - parameter initialScale: The initial scale that the page should use.
+    /// - parameter fit: How the viewport should be laid out on screen in relation
+    ///   to the screen’s safe area insets. See `HTMLViewportFitMode`.
     static func viewport(_ widthMode: HTMLViewportWidthMode,
-                         initialScale: Double = 1) -> Node {
-        let content = "width=\(widthMode.string), initial-scale=\(initialScale)"
+                         initialScale: Double = 1,
+                         fit: HTMLViewportFitMode? = nil) -> Node {
+        var content = "width=\(widthMode.string), initial-scale=\(initialScale)"
+        if let fit = fit {
+            content += ", viewport-fit=\(fit.rawValue)"
+        }
         return .meta(.name("viewport"), .content(content))
     }
 

diff --git a/Sources/Plot/API/HTMLViewportFitMode.swift b/Sources/Plot/API/HTMLViewportFitMode.swift
@@ -0,0 +1,19 @@
+/**
+*  Plot
+*  Copyright (c) John Sundell 2019
+*  MIT license, see LICENSE file for details
+*/
+
+import Foundation
+
+/// Enum defining the fit parameters of the viewport meta tag.
+public enum HTMLViewportFitMode: String {
+    /// The default viewport fit behavior.
+    case auto
+    /// The initial layout viewport and the visual viewport are set
+    /// to fit within the safe area insets of the screen of the device.
+    case contain
+    /// The initial layout viewport and the visual viewport are set
+    /// to the outer rectangle covering the screen, ignoring safe area insets.
+    case cover
+}
diff --git a/Tests/PlotTests/HTMLTests.swift b/Tests/PlotTests/HTMLTests.swift
@@ -128,6 +128,13 @@ final class HTMLTests: XCTestCase {
         <head><meta name="viewport" content="width=500, initial-scale=1.0"/></head>
         """)
     }
+
+    func testViewportFit() {
+        let html = HTML(.head(.viewport(.accordingToDevice, fit: .cover)))
+        assertEqualHTMLContent(html, """
+        <head><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/></head>
+        """)
+    }
 
     func testFavicon() {
         let html = HTML(.head(.favicon("icon.png")))