diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift index 3c9e2cc75..e8aec06dd 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift +++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift @@ -15,6 +15,10 @@ import WebKit @Binding var increaseFontActionID: UUID? @Binding var decreaseFontActionID: UUID? + @Binding var increaseMarginActionID: UUID? + @Binding var decreaseMarginActionID: UUID? + @Binding var increaseLineHeightActionID: UUID? + @Binding var decreaseLineHeightActionID: UUID? @Binding var annotationSaveTransactionID: UUID? @Binding var showNavBarActionID: UUID? @Binding var shareActionID: UUID? @@ -29,6 +33,16 @@ import WebKit return storedSize <= 1 ? UITraitCollection.current.preferredWebFontSize : storedSize } + func lineHeight() -> Int { + let storedSize = UserDefaults.standard.integer(forKey: UserDefaultKey.preferredWebLineSpacing.rawValue) + return storedSize <= 1 ? 150 : storedSize + } + + func margin() -> Int { + let storedSize = UserDefaults.standard.integer(forKey: UserDefaultKey.preferredWebMargin.rawValue) + return storedSize <= 1 ? 360 : storedSize + } + func makeUIView(context: Context) -> WKWebView { let webView = WebViewManager.shared() let contentController = WKUserContentController() @@ -77,6 +91,26 @@ import WebKit (webView as? WebView)?.decreaseFontSize() } + if increaseMarginActionID != context.coordinator.previousIncreaseMarginActionID { + context.coordinator.previousIncreaseMarginActionID = increaseMarginActionID + (webView as? WebView)?.increaseMargin() + } + + if decreaseMarginActionID != context.coordinator.previousDecreaseMarginActionID { + context.coordinator.previousDecreaseMarginActionID = decreaseMarginActionID + (webView as? WebView)?.decreaseMargin() + } + + if increaseLineHeightActionID != context.coordinator.previousIncreaseLineHeightActionID { + context.coordinator.previousIncreaseLineHeightActionID = increaseLineHeightActionID + (webView as? WebView)?.increaseLineHeight() + } + + if decreaseLineHeightActionID != context.coordinator.previousDecreaseLineHeightActionID { + context.coordinator.previousDecreaseLineHeightActionID = decreaseLineHeightActionID + (webView as? WebView)?.decreaseLineHeight() + } + if showNavBarActionID != context.coordinator.previousShowNavBarActionID { context.coordinator.previousShowNavBarActionID = showNavBarActionID context.coordinator.showNavBar() @@ -116,7 +150,9 @@ import WebKit highlightsJSONString: highlightsJSONString, item: item, isDark: UITraitCollection.current.userInterfaceStyle == .dark, - fontSize: fontSize() + fontSize: fontSize(), + lineHeight: lineHeight(), + margin: margin() ) .styledContent, baseURL: ViewsPackage.bundleURL diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift index 482e55677..3ba2b83cd 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift +++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift @@ -17,6 +17,10 @@ import WebKit @State private var progressViewOpacity = 0.0 @State var increaseFontActionID: UUID? @State var decreaseFontActionID: UUID? + @State var increaseMarginActionID: UUID? + @State var decreaseMarginActionID: UUID? + @State var increaseLineHeightActionID: UUID? + @State var decreaseLineHeightActionID: UUID? @State var annotationSaveTransactionID: UUID? @State var showNavBarActionID: UUID? @State var shareActionID: UUID? @@ -147,6 +151,10 @@ import WebKit }, increaseFontActionID: $increaseFontActionID, decreaseFontActionID: $decreaseFontActionID, + increaseMarginActionID: $increaseMarginActionID, + decreaseMarginActionID: $decreaseMarginActionID, + increaseLineHeightActionID: $increaseMarginActionID, + decreaseLineHeightActionID: $decreaseLineHeightActionID, annotationSaveTransactionID: $annotationSaveTransactionID, showNavBarActionID: $showNavBarActionID, shareActionID: $shareActionID, @@ -195,7 +203,11 @@ import WebKit .formSheet(isPresented: $showPreferencesPopover) { WebPreferencesPopoverView( increaseFontAction: { increaseFontActionID = UUID() }, - decreaseFontAction: { decreaseFontActionID = UUID() } + decreaseFontAction: { decreaseFontActionID = UUID() }, + increaseMarginAction: { increaseMarginActionID = UUID() }, + decreaseMarginAction: { decreaseMarginActionID = UUID() }, + increaseLineHeightAction: { increaseLineHeightActionID = UUID() }, + decreaseLineHeightAction: { decreaseLineHeightActionID = UUID() } ) } .onDisappear { diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift index 1b100683f..29d023138 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift +++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift @@ -4,6 +4,8 @@ import Utils struct WebReaderContent { let textFontSize: Int + let lineHeight: Int + let margin: Int let htmlContent: String let highlightsJSONString: String let item: LinkedItem @@ -14,9 +16,13 @@ struct WebReaderContent { highlightsJSONString: String, item: LinkedItem, isDark: Bool, - fontSize: Int + fontSize: Int, + lineHeight: Int, + margin: Int ) { self.textFontSize = fontSize + self.lineHeight = lineHeight + self.margin = margin self.htmlContent = htmlContent self.highlightsJSONString = highlightsJSONString self.item = item @@ -71,6 +77,8 @@ struct WebReaderContent { } window.fontSize = \(textFontSize) + window.margin = \(margin) + window.lineHeight = \(lineHeight) window.localStorage.setItem("theme", "\(themeKey)") diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift index e88339d84..61f687846 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift +++ b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift @@ -17,6 +17,10 @@ final class WebReaderCoordinator: NSObject { var lastSavedAnnotationID: UUID? var previousIncreaseFontActionID: UUID? var previousDecreaseFontActionID: UUID? + var previousIncreaseMarginActionID: UUID? + var previousDecreaseMarginActionID: UUID? + var previousIncreaseLineHeightActionID: UUID? + var previousDecreaseLineHeightActionID: UUID? var previousShowNavBarActionID: UUID? var previousShareActionID: UUID? var updateNavBarVisibilityRatio: (Double) -> Void = { _ in } diff --git a/apple/OmnivoreKit/Sources/Utils/UserDefaultKeys.swift b/apple/OmnivoreKit/Sources/Utils/UserDefaultKeys.swift index c32f00401..a9e418c80 100644 --- a/apple/OmnivoreKit/Sources/Utils/UserDefaultKeys.swift +++ b/apple/OmnivoreKit/Sources/Utils/UserDefaultKeys.swift @@ -2,6 +2,8 @@ import Foundation public enum UserDefaultKey: String { case preferredWebFontSize + case preferredWebLineSpacing + case preferredWebMargin case userHasDeniedPushPrimer case firebasePushToken case homeFeedlayoutPreference diff --git a/apple/OmnivoreKit/Sources/Views/Article/WebView.swift b/apple/OmnivoreKit/Sources/Views/Article/WebView.swift index b45018a91..144a30ec4 100644 --- a/apple/OmnivoreKit/Sources/Views/Article/WebView.swift +++ b/apple/OmnivoreKit/Sources/Views/Article/WebView.swift @@ -34,6 +34,22 @@ public final class WebView: WKWebView { dispatchEvent("decreaseFontSize") } + public func increaseMargin() { + dispatchEvent("increaseMargin") + } + + public func decreaseMargin() { + dispatchEvent("decreaseMargin") + } + + public func increaseLineHeight() { + dispatchEvent("increaseLineHeight") + } + + public func decreaseLineHeight() { + dispatchEvent("decreaseLineHeight") + } + public func shareOriginalItem() { dispatchEvent("share") } diff --git a/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift b/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift index a3a7fd58e..1eab5b2d1 100644 --- a/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift +++ b/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift @@ -2,8 +2,14 @@ import SwiftUI import Utils public struct WebPreferencesPopoverView: View { + @State private var renderCount = 0 + let increaseFontAction: () -> Void let decreaseFontAction: () -> Void + let increaseMarginAction: () -> Void + let decreaseMarginAction: () -> Void + let increaseLineHeightAction: () -> Void + let decreaseLineHeightAction: () -> Void static let preferredWebFontSizeKey = UserDefaultKey.preferredWebFontSize.rawValue #if os(macOS) @@ -12,18 +18,29 @@ public struct WebPreferencesPopoverView: View { @AppStorage(preferredWebFontSizeKey) var storedFontSize: Int = UITraitCollection.current.preferredWebFontSize #endif + @AppStorage(UserDefaultKey.preferredWebLineSpacing.rawValue) var storedLineSpacing = 150 + @AppStorage(UserDefaultKey.preferredWebMargin.rawValue) var storedMargin = 360 + public init( increaseFontAction: @escaping () -> Void, - decreaseFontAction: @escaping () -> Void + decreaseFontAction: @escaping () -> Void, + increaseMarginAction: @escaping () -> Void, + decreaseMarginAction: @escaping () -> Void, + increaseLineHeightAction: @escaping () -> Void, + decreaseLineHeightAction: @escaping () -> Void ) { self.increaseFontAction = increaseFontAction self.decreaseFontAction = decreaseFontAction + self.increaseMarginAction = increaseMarginAction + self.decreaseMarginAction = decreaseMarginAction + self.increaseLineHeightAction = increaseLineHeightAction + self.decreaseLineHeightAction = decreaseLineHeightAction } public var body: some View { VStack { Stepper( - "Font Size:", + "Font Size (\(storedFontSize):", onIncrement: { storedFontSize = min(storedFontSize + 2, 28) increaseFontAction() @@ -33,6 +50,32 @@ public struct WebPreferencesPopoverView: View { decreaseFontAction() } ) + + Stepper( + "Margin (\(storedMargin):", + onIncrement: { + storedMargin = min(storedMargin + 45, 560) + increaseMarginAction() + }, + onDecrement: { + storedMargin = max(storedMargin - 45, 200) + decreaseMarginAction() + } + ) + + Stepper( + "Line Spacing (\(storedLineSpacing):", + onIncrement: { + storedLineSpacing = min(storedLineSpacing + 25, 300) + increaseLineHeightAction() + }, + onDecrement: { + storedLineSpacing = max(storedLineSpacing - 25, 100) + decreaseLineHeightAction() + } + ) + + Text(String(renderCount)) } .padding() } diff --git a/packages/appreader/src/index.jsx b/packages/appreader/src/index.jsx index edc1c129a..b4c58040a 100644 --- a/packages/appreader/src/index.jsx +++ b/packages/appreader/src/index.jsx @@ -7,10 +7,11 @@ import '@omnivore/web/styles/globals.css' import '@omnivore/web/styles/articleInnerStyling.css' const mutation = async (name, input) => { - const result = await window?.webkit?.messageHandlers.articleAction?.postMessage({ - actionID: name, - ...input - }) + const result = + await window?.webkit?.messageHandlers.articleAction?.postMessage({ + actionID: name, + ...input, + }) console.log('action result', result, result.result) return result.result } @@ -40,13 +41,19 @@ const App = () => { highlightBarDisabled={true} highlightsBaseURL="https://example.com" fontSize={window.fontSize ?? 18} - margin={0} + margin={window.margin} + lineHeight={window.lineHeight} articleMutations={{ - createHighlightMutation: (input) => mutation('createHighlight', input), - deleteHighlightMutation: (highlightId) => mutation('deleteHighlight', { highlightId }), - mergeHighlightMutation: (input) => mutation('mergeHighlight', input), - updateHighlightMutation: (input) => mutation('updateHighlight', input), - articleReadingProgressMutation: (input) => mutation('articleReadingProgress', input), + createHighlightMutation: (input) => + mutation('createHighlight', input), + deleteHighlightMutation: (highlightId) => + mutation('deleteHighlight', { highlightId }), + mergeHighlightMutation: (input) => + mutation('mergeHighlight', input), + updateHighlightMutation: (input) => + mutation('updateHighlight', input), + articleReadingProgressMutation: (input) => + mutation('articleReadingProgress', input), }} />