diff --git a/src/features/rap/Hours.tsx b/src/features/rap/Hours.tsx index 1b54e8c..9586a97 100644 --- a/src/features/rap/Hours.tsx +++ b/src/features/rap/Hours.tsx @@ -18,6 +18,7 @@ import Errors from "./Errors"; import { useAppSelector } from "../../hooks"; import { WindsAloftHour } from "../../models/WindsAloft"; import { OnOff } from "./extra/settings/settingEnums"; +import { isApplePlatform } from "../../helpers/device"; const browser = detect(); @@ -162,6 +163,18 @@ interface TableProps { hours: WindsAloftHour[]; } +function determineScrollBehaviorByModifierKey(e: KeyboardEvent): Distance { + if (isApplePlatform()) { + if (e.metaKey) return Distance.End; + if (e.altKey) return Distance.Page; + return Distance.Hour; + } + + if (e.ctrlKey) return Distance.End; + if (e.altKey || e.metaKey) return Distance.Page; + return Distance.Hour; +} + export default function Hours({ hours }: TableProps) { const elevation = useAppSelector((state) => state.weather.elevation); @@ -205,9 +218,7 @@ export default function Hours({ hours }: TableProps) { const callback = (e: KeyboardEvent) => { if (!scrollViewRef.current) return; - let distance = Distance.Hour; - if (e.metaKey) distance = Distance.End; - if (e.altKey) distance = Distance.Page; + const distance = determineScrollBehaviorByModifierKey(e); switch (e.key) { case "ArrowLeft": diff --git a/src/helpers/device.ts b/src/helpers/device.ts index 51f842f..42fbb13 100644 --- a/src/helpers/device.ts +++ b/src/helpers/device.ts @@ -54,6 +54,10 @@ export function isMobile() { ); } +export function isApplePlatform(): boolean { + return /Mac|iPhone|iPad/.test(navigator.userAgent); +} + /** * Important: Must check to make sure UA is Safari first */