Update the text size using JavaScript so that the web page doesn't reload. Fixes #2641

This commit is contained in:
Maurice Parker 2020-12-08 19:00:56 -06:00
parent ac4f5d658d
commit 6ef29e3927
7 changed files with 56 additions and 35 deletions

View File

@ -242,7 +242,6 @@
</constraints>
</view>
<connections>
<outlet property="articleTextSizePopup" destination="Z6O-Zt-V1g" id="qNu-i3-fFB"/>
<outlet property="defaultBrowserPopup" destination="Ci4-fW-KjU" id="7Nh-nU-Sbc"/>
<outlet property="showUnreadCountCheckbox" destination="mwT-nY-TrX" id="ZH9-P5-JkT"/>
</connections>
@ -430,16 +429,16 @@
<autoresizingMask key="autoresizingMask"/>
<subviews>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="7UM-iq-OLB" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target">
<rect key="frame" x="20" y="44" width="180" height="334"/>
<rect key="frame" x="20" y="44" width="180" height="344"/>
<subviews>
<scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="PaF-du-r3c">
<rect key="frame" x="1" y="0.0" width="178" height="333"/>
<rect key="frame" x="1" y="0.0" width="178" height="343"/>
<clipView key="contentView" id="cil-Gq-akO">
<rect key="frame" x="0.0" y="0.0" width="178" height="333"/>
<rect key="frame" x="0.0" y="0.0" width="178" height="343"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<tableView verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" columnReordering="NO" columnSelection="YES" columnResizing="NO" multipleSelection="NO" autosaveColumns="NO" rowHeight="24" viewBased="YES" id="aTp-KR-y6b">
<rect key="frame" x="0.0" y="0.0" width="178" height="333"/>
<rect key="frame" x="0.0" y="0.0" width="178" height="343"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<size key="intercellSpacing" width="3" height="2"/>
<color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@ -546,7 +545,7 @@
<rect key="frame" x="83" y="20" width="117" height="24"/>
</customView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="Y7D-xQ-wep">
<rect key="frame" x="208" y="20" width="222" height="358"/>
<rect key="frame" x="208" y="20" width="222" height="368"/>
</customView>
</subviews>
<constraints>
@ -601,16 +600,16 @@
<autoresizingMask key="autoresizingMask"/>
<subviews>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="pjs-G4-byk" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target">
<rect key="frame" x="20" y="44" width="180" height="327"/>
<rect key="frame" x="20" y="44" width="180" height="337"/>
<subviews>
<scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="29T-r2-ckC">
<rect key="frame" x="1" y="0.0" width="178" height="326"/>
<rect key="frame" x="1" y="0.0" width="178" height="336"/>
<clipView key="contentView" id="dXw-GY-TP8">
<rect key="frame" x="0.0" y="0.0" width="178" height="326"/>
<rect key="frame" x="0.0" y="0.0" width="178" height="336"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<tableView verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" columnReordering="NO" columnSelection="YES" columnResizing="NO" multipleSelection="NO" autosaveColumns="NO" rowHeight="24" viewBased="YES" id="dfn-Vn-oDp">
<rect key="frame" x="0.0" y="0.0" width="178" height="326"/>
<rect key="frame" x="0.0" y="0.0" width="178" height="336"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<size key="intercellSpacing" width="3" height="2"/>
<color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@ -713,7 +712,7 @@
<rect key="frame" x="83" y="20" width="117" height="24"/>
</customView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="N1N-pE-gBL">
<rect key="frame" x="208" y="20" width="222" height="351"/>
<rect key="frame" x="208" y="20" width="222" height="361"/>
</customView>
</subviews>
<constraints>

View File

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

View File

@ -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 {

View File

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

View File

@ -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 {

View File

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

View File

@ -11,5 +11,5 @@
<div class="articleTitle"><h1>[[title]]</h1></div>
<div class="[[dateline_style]]">[[date_medium]]</div>
<div class="externalLink">[[external_link]]</div>
<div class="articleBody">[[body]]</div>
<div id="bodyContainer" class="articleBody [[text_size_class]]">[[body]]</div>
</article>