Update the text size using JavaScript so that the web page doesn't reload. Fixes #2641
This commit is contained in:
parent
ac4f5d658d
commit
6ef29e3927
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue