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> </constraints>
</view> </view>
<connections> <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="defaultBrowserPopup" destination="Ci4-fW-KjU" id="7Nh-nU-Sbc"/>
<outlet property="showUnreadCountCheckbox" destination="mwT-nY-TrX" id="ZH9-P5-JkT"/> <outlet property="showUnreadCountCheckbox" destination="mwT-nY-TrX" id="ZH9-P5-JkT"/>
</connections> </connections>
@ -430,16 +429,16 @@
<autoresizingMask key="autoresizingMask"/> <autoresizingMask key="autoresizingMask"/>
<subviews> <subviews>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="7UM-iq-OLB" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target"> <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> <subviews>
<scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="PaF-du-r3c"> <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"> <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"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews> <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"> <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"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<size key="intercellSpacing" width="3" height="2"/> <size key="intercellSpacing" width="3" height="2"/>
<color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/> <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@ -546,7 +545,7 @@
<rect key="frame" x="83" y="20" width="117" height="24"/> <rect key="frame" x="83" y="20" width="117" height="24"/>
</customView> </customView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="Y7D-xQ-wep"> <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> </customView>
</subviews> </subviews>
<constraints> <constraints>
@ -601,16 +600,16 @@
<autoresizingMask key="autoresizingMask"/> <autoresizingMask key="autoresizingMask"/>
<subviews> <subviews>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="pjs-G4-byk" customClass="PreferencesTableViewBackgroundView" customModule="NetNewsWire" customModuleProvider="target"> <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> <subviews>
<scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="26" horizontalPageScroll="10" verticalLineScroll="26" verticalPageScroll="10" hasHorizontalScroller="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="29T-r2-ckC"> <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"> <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"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews> <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"> <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"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<size key="intercellSpacing" width="3" height="2"/> <size key="intercellSpacing" width="3" height="2"/>
<color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/> <color key="backgroundColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
@ -713,7 +712,7 @@
<rect key="frame" x="83" y="20" width="117" height="24"/> <rect key="frame" x="83" y="20" width="117" height="24"/>
</customView> </customView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="N1N-pE-gBL"> <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> </customView>
</subviews> </subviews>
<constraints> <constraints>

View File

@ -40,13 +40,7 @@ final class DetailWebViewController: NSViewController, WKUIDelegate {
} }
} }
private var articleTextSize = AppDefaults.shared.articleTextSize { private var articleTextSize = AppDefaults.shared.articleTextSize
didSet {
if articleTextSize != oldValue {
reloadHTML()
}
}
}
#if !MAC_APP_STORE #if !MAC_APP_STORE
private var webInspectorEnabled: Bool { private var webInspectorEnabled: Bool {
@ -146,7 +140,10 @@ final class DetailWebViewController: NSViewController, WKUIDelegate {
} }
@objc func userDefaultsDidChange(_ note: Notification) { @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 // MARK: Media Functions

View File

@ -4,7 +4,26 @@ body {
padding-left: 48px; padding-left: 48px;
padding-right: 48px; padding-right: 48px;
font-family: -apple-system; 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 { :root {

View File

@ -166,7 +166,11 @@ private extension ArticleRenderer {
} }
d["body"] = body d["body"] = body
#if os(macOS)
d["text_size_class"] = AppDefaults.shared.articleTextSize.cssClass
#endif
var components = URLComponents() var components = URLComponents()
components.scheme = Self.imageIconScheme components.scheme = Self.imageIconScheme
components.path = article.articleID components.path = article.articleID
@ -287,9 +291,7 @@ private extension ArticleRenderer {
} }
#else #else
func styleSubstitutions() -> [String: String] { func styleSubstitutions() -> [String: String] {
var d = [String: String]() return [String: String]()
d["font-size"] = String(describing: AppDefaults.shared.articleTextSize.fontSize)
return d
} }
#endif #endif

View File

@ -15,24 +15,22 @@ enum ArticleTextSize: Int, CaseIterable, Identifiable {
case xlarge = 4 case xlarge = 4
case xxlarge = 5 case xxlarge = 5
#if os(macOS) var id: String { description() }
var fontSize: Int {
var cssClass: String {
switch self { switch self {
case .small: case .small:
return 14 return "smallText"
case .medium: case .medium:
return 16 return "mediumText"
case .large: case .large:
return 18 return "largeText"
case .xlarge: case .xlarge:
return 20 return "xLargeText"
case .xxlarge: case .xxlarge:
return 22 return "xxLargeText"
} }
} }
#endif
var id: String { description() }
func description() -> String { func description() -> String {
switch self { 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() { function error() {
document.body.innerHTML = "error"; document.body.innerHTML = "error";
} }

View File

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