add toggle for auto highlight mode on ios

This commit is contained in:
Satindar Dhillon
2023-02-09 15:22:39 -08:00
parent 78c44dfec7
commit eddbcd293a
13 changed files with 81 additions and 6 deletions

File diff suppressed because one or more lines are too long

View File

@ -9,6 +9,7 @@ import Views
)
@AppStorage(UserDefaultKey.preferredWebLineSpacing.rawValue) var storedLineSpacing = 150
@AppStorage(UserDefaultKey.preferredWebMaxWidthPercentage.rawValue) var storedMaxWidthPercentage = 100
@AppStorage(UserDefaultKey.enableHighlightOnRelease.rawValue) var enableHighlightOnRelease = false
@Binding var preferredFont: String
@Binding var prefersHighContrastText: Bool
@ -114,6 +115,11 @@ import Views
isOn: $prefersHighContrastText,
label: { Text(LocalText.genericHighContrastText) }
)
Toggle(
isOn: $enableHighlightOnRelease,
label: { Text(LocalText.genericHighContrastText) }
)
}
}
}

View File

@ -100,6 +100,7 @@ struct WebReader: PlatformViewRepresentable {
(webView as? OmnivoreWebView)?.updateFontFamily()
(webView as? OmnivoreWebView)?.updateFontSize()
(webView as? OmnivoreWebView)?.updateTextContrast()
(webView as? OmnivoreWebView)?.updateAutoHighlightMode()
(webView as? OmnivoreWebView)?.updateMaxWidthPercentage()
(webView as? OmnivoreWebView)?.updateLineHeight()
(webView as? OmnivoreWebView)?.updateLabels(labelsJSON: item.labelsJSONString)
@ -152,6 +153,15 @@ struct WebReader: PlatformViewRepresentable {
}
}()
let enableHighlightOnRelease: Bool = {
let key = UserDefaultKey.enableHighlightOnRelease.rawValue
if UserDefaults.standard.object(forKey: key) != nil {
return UserDefaults.standard.bool(forKey: key)
} else {
return false
}
}()
let fontFamily = fontFamilyValue.flatMap { WebFont(rawValue: $0) } ?? .system
let htmlString = WebReaderContent(
@ -162,7 +172,8 @@ struct WebReader: PlatformViewRepresentable {
lineHeight: lineHeight(),
maxWidthPercentage: maxWidthPercentage(),
fontFamily: fontFamily,
prefersHighContrastText: prefersHighContrastText
prefersHighContrastText: prefersHighContrastText,
enableHighlightOnRelease: enableHighlightOnRelease
)
.styledContent

View File

@ -12,6 +12,7 @@ struct WebReaderContent {
let fontFamily: WebFont
let articleContent: ArticleContent
let prefersHighContrastText: Bool
let enableHighlightOnRelease: Bool
init(
item: LinkedItem,
@ -21,7 +22,8 @@ struct WebReaderContent {
lineHeight: Int,
maxWidthPercentage: Int,
fontFamily: WebFont,
prefersHighContrastText: Bool
prefersHighContrastText: Bool,
enableHighlightOnRelease: Bool
) {
self.textFontSize = fontSize
self.lineHeight = lineHeight
@ -31,6 +33,7 @@ struct WebReaderContent {
self.fontFamily = fontFamily
self.articleContent = articleContent
self.prefersHighContrastText = prefersHighContrastText
self.enableHighlightOnRelease = enableHighlightOnRelease
}
// swiftlint:disable line_length
@ -88,6 +91,7 @@ struct WebReaderContent {
window.localStorage.setItem("theme", "\(themeKey)")
window.prefersHighContrastFont = \(prefersHighContrastText)
window.enableHighlightBar = \(isMacApp)
window.highlightOnRelease = \(enableHighlightOnRelease)
</script>
<script src="bundle.js"></script>
<script src="mathJaxConfiguration.js" id="MathJax-script"></script>

View File

@ -6,6 +6,7 @@ public enum UserDefaultKey: String {
case preferredWebLineSpacing
case preferredWebMaxWidthPercentage
case prefersHighContrastWebFont
case enableHighlightOnRelease
case userHasDeniedPushPrimer
case firebasePushToken
case homeFeedlayoutPreference

View File

@ -107,6 +107,20 @@ public final class OmnivoreWebView: WKWebView {
}
}
public func updateAutoHighlightMode() {
let isEnabled = UserDefaults.standard.value(
forKey: UserDefaultKey.enableHighlightOnRelease.rawValue
) as? Bool
if let isEnabled = isEnabled {
do {
try dispatchEvent(.handleAutoHighlightModeChange(isEnabled: isEnabled))
} catch {
showErrorInSnackbar("Error updating text contrast")
}
}
}
public func updateTitle(title: String) {
do {
try dispatchEvent(.updateTitle(title: title))
@ -382,6 +396,7 @@ public final class OmnivoreWebView: WKWebView {
public enum WebViewDispatchEvent {
case handleFontContrastChange(isHighContrast: Bool)
case handleAutoHighlightModeChange(isEnabled: Bool)
case updateLineHeight(height: Int)
case updateMaxWidthPercentage(maxWidthPercentage: Int)
case updateFontSize(size: Int)
@ -445,6 +460,8 @@ public enum WebViewDispatchEvent {
return "updateLabels"
case .updateTitle:
return "updateTitle"
case .handleAutoHighlightModeChange:
return "handleAutoHighlightModeChange"
}
}
@ -487,6 +504,8 @@ public enum WebViewDispatchEvent {
return "event.anchorIdx = '\(anchorIdx)';"
case .annotate, .highlight, .setHighlightLabels, .share, .remove, .copyHighlight, .dismissHighlight:
return ""
case let .handleAutoHighlightModeChange(isEnabled: isEnabled):
return "event.enableHighlightOnRelease = '\(isEnabled)';"
}
}
}

View File

@ -72,6 +72,7 @@ public enum WebFont: String, CaseIterable {
UITraitCollection.current.preferredWebFontSize
@AppStorage(UserDefaultKey.preferredWebLineSpacing.rawValue) var storedLineSpacing = 150
@AppStorage(UserDefaultKey.preferredWebMaxWidthPercentage.rawValue) var storedMaxWidthPercentage = 100
@AppStorage(UserDefaultKey.enableHighlightOnRelease.rawValue) var enableHighlightOnRelease = false
@AppStorage(UserDefaultKey.preferredWebFont.rawValue) var preferredFont = WebFont.inter.rawValue
@AppStorage(UserDefaultKey.prefersHighContrastWebFont.rawValue) var prefersHighContrastText = true
@ -202,6 +203,13 @@ public enum WebFont: String, CaseIterable {
updateReaderPreferences()
}
Toggle(LocalText.enableHighlightOnReleaseText, isOn: $enableHighlightOnRelease)
.frame(height: 40)
.padding(.trailing, 6)
.onChange(of: enableHighlightOnRelease) { _ in
updateReaderPreferences()
}
Spacer()
}
.padding()

View File

@ -159,6 +159,7 @@ public enum LocalText {
public static let genericLoading = localText(key: "genericLoading")
public static let genericFontFamily = localText(key: "genericFontFamily")
public static let genericHighContrastText = localText(key: "genericHighContrastText")
public static let enableHighlightOnReleaseText = localText(key: "enableHighlightOnReleaseText")
public static let genericFont = localText(key: "genericFont")
public static let genericHighlight = localText(key: "genericHighlight")
public static let labelsGeneric = localText(key: "labelsGeneric")

File diff suppressed because one or more lines are too long

View File

@ -164,6 +164,7 @@
"genericLoading" = "Loading...";
"genericFontFamily" = "Font Family";
"genericHighContrastText" = "High Contrast Text";
"enableHighlightOnReleaseText" = "Auto Highlight Mode:";
"genericFont" = "Font";
"genericHighlight" = "Highlight";
"labelsGeneric" = "Labels";

View File

@ -165,6 +165,7 @@
"genericLoading" = "加载中...";
"genericFontFamily" = "字体册";
"genericHighContrastText" = "高对比度文本";
"enableHighlightOnReleaseText" = "Auto Highlight Mode:";
"genericFont" = "字体";
"genericHighlight" = "荧光笔";
"labelsGeneric" = "标签";

View File

@ -76,7 +76,7 @@ const App = () => {
margin={window.margin}
maxWidthPercentage={window.maxWidthPercentage}
lineHeight={window.lineHeight}
highlightOnRelease={true}
highlightOnRelease={window.highlightOnRelease}
highContrastFont={window.prefersHighContrastFont ?? true}
articleMutations={{
createHighlightMutation: (input) =>

View File

@ -106,6 +106,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
const [title, setTitle] = useState(props.article.title)
const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
const [highlightOnRelease, setHighlightOnRelease] = useState(
props.highlightOnRelease
)
// iOS app embed can overide the original margin and line height
const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
number | null
@ -147,6 +150,18 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
}
}
interface UpdateHighlightModeEvent extends Event {
enableHighlightOnRelease?: boolean
}
const updateHighlightMode = (event: UpdateHighlightModeEvent) => {
const isEnabled =
event.enableHighlightOnRelease !== undefined
? event.enableHighlightOnRelease
: false
setHighlightOnRelease(isEnabled)
}
interface UpdateMaxWidthPercentageEvent extends Event {
maxWidthPercentage?: number
}
@ -254,6 +269,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
document.addEventListener('updateLabels', handleUpdateLabels)
document.addEventListener('share', share)
document.addEventListener(
'handleAutoHighlightModeChange',
updateHighlightMode
)
return () => {
document.removeEventListener('updateFontFamily', updateFontFamily)
@ -272,6 +291,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
document.removeEventListener('updateTitle', handleUpdateTitle)
document.removeEventListener('updateLabels', handleUpdateLabels)
document.removeEventListener('share', share)
document.removeEventListener(
'handleAutoHighlightModeChange',
updateHighlightMode
)
}
})
@ -405,7 +428,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
highlightBarDisabled={props.highlightBarDisabled}
showHighlightsModal={props.showHighlightsModal}
setShowHighlightsModal={props.setShowHighlightsModal}
highlightOnRelease={props.highlightOnRelease}
highlightOnRelease={highlightOnRelease}
articleMutations={props.articleMutations}
/>
{showReportIssuesModal ? (