Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wire up margin and line height changes to web view

Browse Source
This commit is contained in:
Satindar Dhillon
2022-06-01 17:16:06 -07:00
parent 1f0c48fdfa
commit cebdbedc59
8 changed files with 143 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift
View File

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

14
apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift
View File

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

10
apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContent.swift
View File

@ -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)")
</script>
<script src="bundle.js"></script>

4
apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift
View File

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

2
apple/OmnivoreKit/Sources/Utils/UserDefaultKeys.swift
View File

@ -2,6 +2,8 @@ import Foundation
public enum UserDefaultKey: String {
case preferredWebFontSize
case preferredWebLineSpacing
case preferredWebMargin
case userHasDeniedPushPrimer
case firebasePushToken
case homeFeedlayoutPreference

16
apple/OmnivoreKit/Sources/Views/Article/WebView.swift
View File

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

47
apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
View File

@ -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()
}

27
packages/appreader/src/index.jsx
View File

@ -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),
}}
/>
</VStack>