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

use maxWidthPercentage to update margin in web reader:

Browse Source
This commit is contained in:
Satindar Dhillon
2022-06-13 11:27:21 -07:00
parent 93a155798e
commit bd34f4ff3c
10 changed files with 60 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import WebKit
@Binding var updateFontFamilyActionID: UUID?
@Binding var updateFontActionID: UUID?
@Binding var updateTextContrastActionID: UUID?
@Binding var updateMarginActionID: UUID?
@Binding var updateMaxWidthActionID: UUID?
@Binding var updateLineHeightActionID: UUID?
@Binding var annotationSaveTransactionID: UUID?
@Binding var showNavBarActionID: UUID?
@ -36,13 +36,9 @@ import WebKit
return storedSize <= 1 ? 150 : storedSize
}
func margin() -> Int {
let storedSize = UserDefaults.standard.integer(forKey: UserDefaultKey.preferredWebMargin.rawValue)
if storedSize < 1 {
return UIDevice.isIPhone ? 200 : 360
} else {
return storedSize
}
func maxWidthPercentage() -> Int {
let storedSize = UserDefaults.standard.integer(forKey: UserDefaultKey.preferredWebMaxWidthPercentage.rawValue)
return storedSize <= 1 ? 100 : storedSize
}
func makeUIView(context: Context) -> WKWebView {
@ -98,9 +94,9 @@ import WebKit
(webView as? WebView)?.updateTextContrast()
}
if updateMarginActionID != context.coordinator.previousUpdateMarginActionID {
context.coordinator.previousUpdateMarginActionID = updateMarginActionID
(webView as? WebView)?.updateMargin()
if updateMaxWidthActionID != context.coordinator.previousUpdateMaxWidthActionID {
context.coordinator.previousUpdateMaxWidthActionID = updateMaxWidthActionID
(webView as? WebView)?.updateMaxWidthPercentage()
}
if updateLineHeightActionID != context.coordinator.previousUpdateLineHeightActionID {
@ -151,7 +147,7 @@ import WebKit
isDark: UITraitCollection.current.userInterfaceStyle == .dark,
fontSize: fontSize(),
lineHeight: lineHeight(),
margin: margin(),
maxWidthPercentage: maxWidthPercentage(),
fontFamily: fontFamily
)
.styledContent,

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

@ -18,7 +18,7 @@ import WebKit
@State var updateFontFamilyActionID: UUID?
@State var updateFontActionID: UUID?
@State var updateTextContrastActionID: UUID?
@State var updateMarginActionID: UUID?
@State var updateMaxWidthActionID: UUID?
@State var updateLineHeightActionID: UUID?
@State var annotationSaveTransactionID: UUID?
@State var showNavBarActionID: UUID?
@ -152,7 +152,7 @@ import WebKit
updateFontFamilyActionID: $updateFontFamilyActionID,
updateFontActionID: $updateFontActionID,
updateTextContrastActionID: $updateTextContrastActionID,
updateMarginActionID: $updateMarginActionID,
updateMaxWidthActionID: $updateMaxWidthActionID,
updateLineHeightActionID: $updateLineHeightActionID,
annotationSaveTransactionID: $annotationSaveTransactionID,
showNavBarActionID: $showNavBarActionID,
@ -204,7 +204,7 @@ import WebKit
updateFontFamilyAction: { updateFontFamilyActionID = UUID() },
updateFontAction: { updateFontActionID = UUID() },
updateTextContrastAction: { updateTextContrastActionID = UUID() },
updateMarginAction: { updateMarginActionID = UUID() },
updateMaxWidthAction: { updateMaxWidthActionID = UUID() },
updateLineHeightAction: { updateLineHeightActionID = UUID() },
dismissAction: { showPreferencesPopover = false }
)

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

@ -6,7 +6,7 @@ import Views
struct WebReaderContent {
let textFontSize: Int
let lineHeight: Int
let margin: Int
let maxWidthPercentage: Int
let item: LinkedItem
let themeKey: String
let fontFamily: WebFont
@ -18,12 +18,12 @@ struct WebReaderContent {
isDark: Bool,
fontSize: Int,
lineHeight: Int,
margin: Int,
maxWidthPercentage: Int,
fontFamily: WebFont
) {
self.textFontSize = fontSize
self.lineHeight = lineHeight
self.margin = margin
self.maxWidthPercentage = maxWidthPercentage
self.item = item
self.themeKey = isDark ? "Gray" : "LightGray"
self.fontFamily = fontFamily
@ -79,7 +79,7 @@ struct WebReaderContent {
window.fontSize = \(textFontSize)
window.fontFamily = "\(fontFamily.rawValue)"
window.margin = \(margin)
window.maxWidthPercentage = \(maxWidthPercentage)
window.lineHeight = \(lineHeight)
window.localStorage.setItem("theme", "\(themeKey)")
</script>

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

@ -18,7 +18,7 @@ final class WebReaderCoordinator: NSObject {
var previousUpdateFontFamilyActionID: UUID?
var previousUpdateFontActionID: UUID?
var previousUpdateTextContrastActionID: UUID?
var previousUpdateMarginActionID: UUID?
var previousUpdateMaxWidthActionID: UUID?
var previousUpdateLineHeightActionID: UUID?
var previousShowNavBarActionID: UUID?
var previousShareActionID: UUID?

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

@ -4,7 +4,7 @@ public enum UserDefaultKey: String {
case preferredWebFont
case preferredWebFontSize
case preferredWebLineSpacing
case preferredWebMargin
case preferredWebMaxWidthPercentage
case prefersHighContrastWebFont
case userHasDeniedPushPrimer
case firebasePushToken

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

@ -39,9 +39,9 @@ public final class WebView: WKWebView {
}
}
public func updateMargin() {
if let margin = UserDefaults.standard.value(forKey: UserDefaultKey.preferredWebMargin.rawValue) as? Int {
dispatchEvent(.updateMargin(width: margin))
public func updateMaxWidthPercentage() {
if let maxWidthPercentage = UserDefaults.standard.value(forKey: UserDefaultKey.preferredWebMaxWidthPercentage.rawValue) as? Int {
dispatchEvent(.updateMaxWidthPercentage(maxWidthPercentage: maxWidthPercentage))
}
}
@ -240,7 +240,7 @@ public final class WebView: WKWebView {
public enum WebViewDispatchEvent {
case handleFontContrastChange(isHighContrast: Bool)
case updateLineHeight(height: Int)
case updateMargin(width: Int)
case updateMaxWidthPercentage(maxWidthPercentage: Int)
case updateFontSize(size: Int)
case updateColorMode(isDark: Bool)
case updateFontFamily(family: String)
@ -262,8 +262,8 @@ public enum WebViewDispatchEvent {
return "handleFontContrastChange"
case .updateLineHeight:
return "updateLineHeight"
case .updateMargin:
return "updateMargin"
case .updateMaxWidthPercentage:
return "updateMaxWidthPercentage"
case .updateFontSize:
return "updateFontSize"
case .updateColorMode:
@ -293,8 +293,8 @@ public enum WebViewDispatchEvent {
return "event.fontContrast = '\(isHighContrast ? "high" : "normal")';"
case let .updateLineHeight(height: height):
return "event.lineHeight = '\(height)';"
case let .updateMargin(width: width):
return "event.margin = '\(width)';"
case let .updateMaxWidthPercentage(maxWidthPercentage: maxWidthPercentage):
return "event.maxWidthPercentage = '\(maxWidthPercentage)';"
case let .updateFontSize(size: size):
return "event.fontSize = '\(size)';"
case let .updateColorMode(isDark: isDark):

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

@ -22,7 +22,7 @@ public struct WebPreferencesPopoverView: View {
let updateFontFamilyAction: () -> Void
let updateFontAction: () -> Void
let updateTextContrastAction: () -> Void
let updateMarginAction: () -> Void
let updateMaxWidthAction: () -> Void
let updateLineHeightAction: () -> Void
let dismissAction: () -> Void
@ -34,7 +34,7 @@ public struct WebPreferencesPopoverView: View {
#endif
@AppStorage(UserDefaultKey.preferredWebLineSpacing.rawValue) var storedLineSpacing = 150
@AppStorage(UserDefaultKey.preferredWebMargin.rawValue) var storedMargin = UIDevice.isIPhone ? 200 : 360
@AppStorage(UserDefaultKey.preferredWebMaxWidthPercentage.rawValue) var storedMaxWidthPercentage = 100
@AppStorage(UserDefaultKey.preferredWebFont.rawValue) var preferredFont = WebFont.inter.rawValue
@AppStorage(UserDefaultKey.prefersHighContrastWebFont.rawValue) var prefersHighContrastText = false
@ -42,14 +42,14 @@ public struct WebPreferencesPopoverView: View {
updateFontFamilyAction: @escaping () -> Void,
updateFontAction: @escaping () -> Void,
updateTextContrastAction: @escaping () -> Void,
updateMarginAction: @escaping () -> Void,
updateMaxWidthAction: @escaping () -> Void,
updateLineHeightAction: @escaping () -> Void,
dismissAction: @escaping () -> Void
) {
self.updateFontFamilyAction = updateFontFamilyAction
self.updateFontAction = updateFontAction
self.updateTextContrastAction = updateTextContrastAction
self.updateMarginAction = updateMarginAction
self.updateMaxWidthAction = updateMaxWidthAction
self.updateLineHeightAction = updateLineHeightAction
self.dismissAction = dismissAction
}
@ -99,12 +99,12 @@ public struct WebPreferencesPopoverView: View {
LabelledStepper(
labelText: "Margin:",
onIncrement: {
storedMargin = min(storedMargin + 45, 560)
updateMarginAction()
storedMaxWidthPercentage = max(storedMaxWidthPercentage - 10, 40)
updateMaxWidthAction()
},
onDecrement: {
storedMargin = max(storedMargin - 45, 200)
updateMarginAction()
storedMaxWidthPercentage = min(storedMaxWidthPercentage + 10, 100)
updateMaxWidthAction()
}
)

2
apple/OmnivoreKit/Sources/Views/Resources/bundle.js
View File

File diff suppressed because one or more lines are too long

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

@ -43,6 +43,7 @@ const App = () => {
fontSize={window.fontSize ?? 18}
fontFamily={window.fontFamily ?? 'inter'}
margin={window.margin}
maxWidthPercentage={window.maxWidthPercentage}
lineHeight={window.lineHeight}
articleMutations={{
createHighlightMutation: (input) =>

53
packages/web/components/templates/article/ArticleContainer.tsx
View File

@ -32,17 +32,19 @@ type ArticleContainerProps = {
fontSize?: number
fontFamily?: string
lineHeight?: number
maxWidthPercentage?: number
highContrastFont?: boolean
showHighlightsModal: boolean
setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
}
export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
const [showShareModal, setShowShareModal] = useState(false)
const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
// iOS app embed can overide the original margin and line height
const [marginOverride, setMarginOverride] = useState<number | null>(null)
const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
number | null
>(null)
const [lineHeightOverride, setLineHeightOverride] = useState<number | null>(
null
)
@ -99,14 +101,15 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
}
}
interface UpdateMarginEvent extends Event {
margin?: number
interface UpdateMaxWidthPercentageEvent extends Event {
maxWidthPercentage?: number
}
const updateMargin = (event: UpdateMarginEvent) => {
const newMargin = event.margin ?? marginOverride ?? 360
if (newMargin >= 200 && newMargin <= 560) {
setMarginOverride(newMargin)
const updateMaxWidthPercentage = (event: UpdateMaxWidthPercentageEvent) => {
const newMaxWidthPercentage =
event.maxWidthPercentage ?? maxWidthPercentageOverride ?? 100
if (newMaxWidthPercentage >= 40 && newMaxWidthPercentage <= 100) {
setMaxWidthPercentageOverride(newMaxWidthPercentage)
}
}
@ -161,7 +164,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
document.addEventListener('updateFontFamily', updateFontFamily)
document.addEventListener('updateLineHeight', updateLineHeight)
document.addEventListener('updateMargin', updateMargin)
document.addEventListener(
'updateMaxWidthPercentage',
updateMaxWidthPercentage
)
document.addEventListener('updateFontSize', handleFontSizeChange)
document.addEventListener('updateColorMode', updateColorMode)
document.addEventListener(
@ -173,7 +179,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
return () => {
document.removeEventListener('updateFontFamily', updateFontFamily)
document.removeEventListener('updateLineHeight', updateLineHeight)
document.removeEventListener('updateMargin', updateMargin)
document.removeEventListener(
'updateMaxWidthPercentage',
updateMaxWidthPercentage
)
document.removeEventListener('updateFontSize', handleFontSizeChange)
document.removeEventListener('updateColorMode', updateColorMode)
document.removeEventListener(
@ -186,7 +195,8 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
const styles = {
fontSize,
margin: marginOverride ?? props.margin ?? 360,
margin: props.margin ?? 360,
maxWidthPercentage: maxWidthPercentageOverride ?? props.maxWidthPercentage,
lineHeight: lineHeightOverride ?? props.lineHeight ?? 150,
fontFamily: fontFamilyOverride ?? props.fontFamily ?? 'inter',
readerFontColor: highContrastFont
@ -197,28 +207,13 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
readerHeadersColor: theme.colors.readerHeader.toString(),
}
// Margin should be in rage of 200...560
// For Apple embeds we want to convery that to
// a maxWidthPercentage with 40% as the lower bound
// (40% when margin is 560, 100% when margin is 200)
function appEmbedMaxWidthPercentage(margin: number): number {
if (margin < 200 || margin > 560) {
return 100
}
const ratio = (margin - 200) / 360
return 100 - ratio * 60
}
return (
<>
<Box
id="article-container"
css={{
padding: '16px',
maxWidth: props.isAppleAppEmbed
? `${appEmbedMaxWidthPercentage(styles.margin)}%`
: '100%',
maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
background: props.isAppleAppEmbed
? 'unset'
: theme.colors.grayBg.toString(),
@ -241,7 +236,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
margin: `30px 0px`,
},
'@md': {
maxWidth: 1024 - styles.margin,
maxWidth: styles.maxWidthPercentage
? `${styles.maxWidthPercentage}%`
: 1024 - styles.margin,
},
}}
>