Window.res
1open Preact
2// Mobile detections is defined as 2x the 90ch = 720px approx width of the sheet
3// point is to have at least double the max width of the sheet to show an equal amount of map
4// otherwise, render over/under style for mobile sizes
5let isMobileDeviceWidth = () =>
6 switch Doc.querySelector("#root")->Nullable.toOption {
7 | Some(ref) => Doc.getBoundingClientRect(ref).width < 2 * 720
8 | None => true
9 }
10let isMobile = Signal.make(isMobileDeviceWidth())
11Signal.effect(() => Log.debug("mobile detection", ~kv={"mobile": isMobile->Signal.get}))
12
13let getSize = () => {
14 switch Doc.querySelector("#root")->Nullable.toOption {
15 | Some(ref) => Some(Doc.getBoundingClientRect(ref))
16 | None => None
17 }
18}
19
20// window handler to update mobile detection on resize
21@val external window: 'a = "window"
22window["onresize"] = () => {
23 Log.debug("resize")
24 isMobile->Signal.set(isMobileDeviceWidth())
25}
26
27type timeoutId
28external setTimeout: (unit => unit, int) => timeoutId = "setTimeout"
29external clearTimeout: timeoutId => unit = "clearTimeout"
