diff --git a/assets/js/app.ts b/assets/js/app.ts index 0e63f9b4..a4c4ee68 100644 --- a/assets/js/app.ts +++ b/assets/js/app.ts @@ -21,6 +21,7 @@ import {WeatherMap} from "./weather_map_hook" import {LocateMe, CopyLink} from "./locate_me_hook" import {RoverMap} from "./rover_map_hook" import {RoverSlider} from "./rover_slider_hook" +import {HorizontalWheelScroll} from "./horizontal_wheel_scroll_hook" import {BeaconMap} from "./beacon_map_hook" import {BeaconsListMap} from "./beacons_list_map_hook" @@ -312,7 +313,7 @@ const csrfToken = document.querySelector("meta[name='csrf-token']")!.getAttribut const liveSocket = new LiveSocket("/live", Socket, { longPollFallbackMs: 2500, params: initLiveStash({_csrf_token: csrfToken}), - hooks: {...colocatedHooks, PropagationMap, PathForecast, UtcClock, ContactMap, ContactsMap, ElevationProfile, WeatherMap, LocateMe, CopyLink, RoverMap, RoverSlider, BeaconMap, BeaconsListMap, CommaNumber, ImportConfetti, EmeGlobe, Skewt}, + hooks: {...colocatedHooks, PropagationMap, PathForecast, UtcClock, ContactMap, ContactsMap, ElevationProfile, WeatherMap, LocateMe, CopyLink, RoverMap, RoverSlider, HorizontalWheelScroll, BeaconMap, BeaconsListMap, CommaNumber, ImportConfetti, EmeGlobe, Skewt}, }) // live_table rows are dead on their own — wire up whole-row clicks to diff --git a/assets/js/horizontal_wheel_scroll_hook.ts b/assets/js/horizontal_wheel_scroll_hook.ts new file mode 100644 index 00000000..cfeef12d --- /dev/null +++ b/assets/js/horizontal_wheel_scroll_hook.ts @@ -0,0 +1,29 @@ +// Translates a vertical mouse-wheel into horizontal scroll on this +// element so users on a desktop without a horizontal trackpad can +// still scroll a horizontal carousel by using the wheel over it. + +import type { ViewHook } from "phoenix_live_view" + +interface HorizontalWheelScrollHook extends ViewHook { + wheelHandler?: (e: WheelEvent) => void +} + +export const HorizontalWheelScroll: Partial = { + mounted(this: HorizontalWheelScrollHook) { + this.wheelHandler = (e: WheelEvent) => { + // Only convert dominant-vertical wheels; leave true horizontal + // gestures alone so trackpads still feel native. + if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return + const el = this.el as HTMLElement + if (el.scrollWidth <= el.clientWidth) return + e.preventDefault() + el.scrollLeft += e.deltaY + } + this.el.addEventListener("wheel", this.wheelHandler, { passive: false }) + }, + destroyed(this: HorizontalWheelScrollHook) { + if (this.wheelHandler) { + this.el.removeEventListener("wheel", this.wheelHandler) + } + } +} diff --git a/lib/microwaveprop_web/live/rover_live.ex b/lib/microwaveprop_web/live/rover_live.ex index b77a3ef4..0e6ddecf 100644 --- a/lib/microwaveprop_web/live/rover_live.ex +++ b/lib/microwaveprop_web/live/rover_live.ex @@ -883,10 +883,14 @@ defmodule MicrowavepropWeb.RoverLive do
Ideal locations
-