update font family in web view

This commit is contained in:
Satindar Dhillon
2022-06-03 16:44:40 -07:00
parent 842d77fba7
commit e607fc5675
7 changed files with 29 additions and 6 deletions

View File

@ -13,6 +13,7 @@ import WebKit
let webViewActionHandler: (WKScriptMessage, WKScriptMessageReplyHandler?) -> Void
let navBarVisibilityRatioUpdater: (Double) -> Void
@Binding var updateFontFamilyActionID: UUID?
@Binding var updateFontActionID: UUID?
@Binding var updateMarginActionID: UUID?
@Binding var updateLineHeightActionID: UUID?
@ -78,6 +79,11 @@ import WebKit
(webView as? WebView)?.dispatchEvent(.saveAnnotation(annotation: annotation))
}
if updateFontFamilyActionID != context.coordinator.previousUpdateFontFamilyActionID {
context.coordinator.previousUpdateFontFamilyActionID = updateFontFamilyActionID
(webView as? WebView)?.updateFontFamily()
}
if updateFontActionID != context.coordinator.previousUpdateFontActionID {
context.coordinator.previousUpdateFontActionID = updateFontActionID
(webView as? WebView)?.updateFontSize()
@ -126,6 +132,9 @@ import WebKit
}
func loadContent(webView: WKWebView) {
let fontFamilyValue = UserDefaults.standard.string(forKey: UserDefaultKey.preferredWebFont.rawValue)
let fontFamily = fontFamilyValue.flatMap { WebFont(rawValue: $0) } ?? .inter
webView.loadHTMLString(
WebReaderContent(
htmlContent: htmlContent,
@ -135,7 +144,7 @@ import WebKit
fontSize: fontSize(),
lineHeight: lineHeight(),
margin: margin(),
fontFamily: .inter // TODO: lookup from user defaults
fontFamily: fontFamily
)
.styledContent,
baseURL: ViewsPackage.bundleURL

View File

@ -15,6 +15,7 @@ import WebKit
@State private var navBarVisibilityRatio = 1.0
@State private var showDeleteConfirmation = false
@State private var progressViewOpacity = 0.0
@State var updateFontFamilyActionID: UUID?
@State var updateFontActionID: UUID?
@State var updateMarginActionID: UUID?
@State var updateLineHeightActionID: UUID?
@ -146,6 +147,7 @@ import WebKit
navBarVisibilityRatioUpdater: {
navBarVisibilityRatio = $0
},
updateFontFamilyActionID: $updateFontFamilyActionID,
updateFontActionID: $updateFontActionID,
updateMarginActionID: $updateMarginActionID,
updateLineHeightActionID: $updateLineHeightActionID,
@ -196,6 +198,7 @@ import WebKit
}
.formSheet(isPresented: $showPreferencesPopover) {
WebPreferencesPopoverView(
updateFontFamilyAction: { updateFontFamilyActionID = UUID() },
updateFontAction: { updateFontActionID = UUID() },
updateMarginAction: { updateMarginActionID = UUID() },
updateLineHeightAction: { updateLineHeightActionID = UUID() },

View File

@ -15,6 +15,7 @@ final class WebReaderCoordinator: NSObject {
var linkHandler: (URL) -> Void = { _ in }
var needsReload = false
var lastSavedAnnotationID: UUID?
var previousUpdateFontFamilyActionID: UUID?
var previousUpdateFontActionID: UUID?
var previousUpdateMarginActionID: UUID?
var previousUpdateLineHeightActionID: UUID?

View File

@ -27,6 +27,12 @@ public final class WebView: WKWebView {
fatalError("init(coder:) has not been implemented")
}
public func updateFontFamily() {
if let fontFamily = UserDefaults.standard.value(forKey: UserDefaultKey.preferredWebFont.rawValue) as? String {
dispatchEvent(.updateFontFamily(family: fontFamily))
}
}
public func updateFontSize() {
if let fontSize = UserDefaults.standard.value(forKey: UserDefaultKey.preferredWebFontSize.rawValue) as? Int {
dispatchEvent(.updateFontSize(size: fontSize))

View File

@ -10,6 +10,7 @@ public enum WebFont: String, CaseIterable {
}
public struct WebPreferencesPopoverView: View {
let updateFontFamilyAction: () -> Void
let updateFontAction: () -> Void
let updateMarginAction: () -> Void
let updateLineHeightAction: () -> Void
@ -27,11 +28,13 @@ public struct WebPreferencesPopoverView: View {
@AppStorage(UserDefaultKey.preferredWebFont.rawValue) var preferredFont = WebFont.inter.rawValue
public init(
updateFontFamilyAction: @escaping () -> Void,
updateFontAction: @escaping () -> Void,
updateMarginAction: @escaping () -> Void,
updateLineHeightAction: @escaping () -> Void,
dismissAction: @escaping () -> Void
) {
self.updateFontFamilyAction = updateFontFamilyAction
self.updateFontAction = updateFontAction
self.updateMarginAction = updateMarginAction
self.updateLineHeightAction = updateLineHeightAction
@ -41,7 +44,7 @@ public struct WebPreferencesPopoverView: View {
public var body: some View {
VStack(alignment: .center) {
ZStack {
Text("Preferences").font(.appTitleTwo)
Text("Preferences").font(.appTitleThree)
HStack {
Spacer()
Button(
@ -50,7 +53,6 @@ public struct WebPreferencesPopoverView: View {
)
}
}
.padding()
List {
Section("Sizing") {
@ -97,6 +99,7 @@ public struct WebPreferencesPopoverView: View {
Button(
action: {
preferredFont = font.rawValue
updateFontFamilyAction()
},
label: {
HStack {

File diff suppressed because one or more lines are too long

View File

@ -107,12 +107,13 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
}
interface UpdateFontFamilyEvent extends Event {
family?: string
fontFamily?: string
}
const updateFontFamily = (event: UpdateFontFamilyEvent) => {
const newFontFamily =
event.family ?? fontFamilyOverride ?? props.fontFamily ?? 'inter'
event.fontFamily ?? fontFamilyOverride ?? props.fontFamily ?? 'inter'
console.log('setting font fam to', event.fontFamily)
setFontFamilyOverride(newFontFamily)
}