From 6ef29e3927bb1930a397c8ea0f3936f60c07f894 Mon Sep 17 00:00:00 2001 From: Maurice Parker Date: Tue, 8 Dec 2020 19:00:56 -0600 Subject: [PATCH] Update the text size using JavaScript so that the web page doesn't reload. Fixes #2641 --- Mac/Base.lproj/Preferences.storyboard | 21 +++++++++---------- .../Detail/DetailWebViewController.swift | 13 +++++------- Mac/MainWindow/Detail/styleSheet.css | 21 ++++++++++++++++++- .../Article Rendering/ArticleRenderer.swift | 10 +++++---- .../Article Rendering/ArticleTextSize.swift | 18 +++++++--------- Shared/Article Rendering/main.js | 6 ++++++ Shared/Article Rendering/template.html | 2 +- 7 files changed, 56 insertions(+), 35 deletions(-) diff --git a/Mac/Base.lproj/Preferences.storyboard b/Mac/Base.lproj/Preferences.storyboard index 222404ba9..39114909f 100644 --- a/Mac/Base.lproj/Preferences.storyboard +++ b/Mac/Base.lproj/Preferences.storyboard @@ -242,7 +242,6 @@ - @@ -430,16 +429,16 @@ - + - + - + - + @@ -546,7 +545,7 @@ - + @@ -601,16 +600,16 @@ - + - + - + - + @@ -713,7 +712,7 @@ - + diff --git a/Mac/MainWindow/Detail/DetailWebViewController.swift b/Mac/MainWindow/Detail/DetailWebViewController.swift index 9e13e9129..b1f8de853 100644 --- a/Mac/MainWindow/Detail/DetailWebViewController.swift +++ b/Mac/MainWindow/Detail/DetailWebViewController.swift @@ -40,13 +40,7 @@ final class DetailWebViewController: NSViewController, WKUIDelegate { } } - private var articleTextSize = AppDefaults.shared.articleTextSize { - didSet { - if articleTextSize != oldValue { - reloadHTML() - } - } - } + private var articleTextSize = AppDefaults.shared.articleTextSize #if !MAC_APP_STORE private var webInspectorEnabled: Bool { @@ -146,7 +140,10 @@ final class DetailWebViewController: NSViewController, WKUIDelegate { } @objc func userDefaultsDidChange(_ note: Notification) { - self.articleTextSize = AppDefaults.shared.articleTextSize + if articleTextSize != AppDefaults.shared.articleTextSize { + articleTextSize = AppDefaults.shared.articleTextSize + webView.evaluateJavaScript("updateTextSize(\"\(articleTextSize.cssClass)\");") + } } // MARK: Media Functions diff --git a/Mac/MainWindow/Detail/styleSheet.css b/Mac/MainWindow/Detail/styleSheet.css index 1dba70762..0d83a62ea 100644 --- a/Mac/MainWindow/Detail/styleSheet.css +++ b/Mac/MainWindow/Detail/styleSheet.css @@ -4,7 +4,26 @@ body { padding-left: 48px; padding-right: 48px; font-family: -apple-system; - font-size: [[font-size]]px; +} + +.smallText { + font-size: 14px; +} + +.mediumText { + font-size: 16px; +} + +.largeText { + font-size: 18px; +} + +.xlargeText { + font-size: 20px; +} + +.xxlargeText { + font-size: 22px; } :root { diff --git a/Shared/Article Rendering/ArticleRenderer.swift b/Shared/Article Rendering/ArticleRenderer.swift index 2daae0382..da1f2c116 100644 --- a/Shared/Article Rendering/ArticleRenderer.swift +++ b/Shared/Article Rendering/ArticleRenderer.swift @@ -166,7 +166,11 @@ private extension ArticleRenderer { } d["body"] = body - + + #if os(macOS) + d["text_size_class"] = AppDefaults.shared.articleTextSize.cssClass + #endif + var components = URLComponents() components.scheme = Self.imageIconScheme components.path = article.articleID @@ -287,9 +291,7 @@ private extension ArticleRenderer { } #else func styleSubstitutions() -> [String: String] { - var d = [String: String]() - d["font-size"] = String(describing: AppDefaults.shared.articleTextSize.fontSize) - return d + return [String: String]() } #endif diff --git a/Shared/Article Rendering/ArticleTextSize.swift b/Shared/Article Rendering/ArticleTextSize.swift index 6911e8ba1..00a95039f 100644 --- a/Shared/Article Rendering/ArticleTextSize.swift +++ b/Shared/Article Rendering/ArticleTextSize.swift @@ -15,24 +15,22 @@ enum ArticleTextSize: Int, CaseIterable, Identifiable { case xlarge = 4 case xxlarge = 5 - #if os(macOS) - var fontSize: Int { + var id: String { description() } + + var cssClass: String { switch self { case .small: - return 14 + return "smallText" case .medium: - return 16 + return "mediumText" case .large: - return 18 + return "largeText" case .xlarge: - return 20 + return "xLargeText" case .xxlarge: - return 22 + return "xxLargeText" } } - #endif - - var id: String { description() } func description() -> String { switch self { diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 0b42889bd..927d7f6a4 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -131,6 +131,12 @@ function stopMediaPlayback() { }); } +function updateTextSize(cssClass) { + var bodyElement = document.getElementById("bodyContainer"); + bodyElement.classList.remove("smallText", "mediumText", "largeText", "xLargeText", "xxLargeText"); + bodyElement.classList.add(cssClass); +} + function error() { document.body.innerHTML = "error"; } diff --git a/Shared/Article Rendering/template.html b/Shared/Article Rendering/template.html index f5f1e7aa6..295b28fd4 100644 --- a/Shared/Article Rendering/template.html +++ b/Shared/Article Rendering/template.html @@ -11,5 +11,5 @@

[[title]]

[[date_medium]]
[[external_link]]
-
[[body]]
+
[[body]]