this repo has no description
Another (better) way of updating safe area insets
Hopefully this works
+21
-17
+21
-17
src/utils/safe-bounding-box-padding.js
+21
-17
src/utils/safe-bounding-box-padding.js
···
1
-
import mem from 'mem';
2
-
3
1
const root = document.documentElement;
4
2
const style = getComputedStyle(root);
5
3
const defaultBoundingBoxPadding = 8;
6
-
function _safeBoundingBoxPadding(paddings = []) {
7
-
// paddings = [top, right, bottom, left]
4
+
5
+
let safeAreaInsets = [0, 0, 0, 0];
6
+
function getSafeAreaInsets() {
8
7
// Get safe area inset variables from root
9
8
const safeAreaInsetTop = style.getPropertyValue('--sai-top');
10
9
const safeAreaInsetRight = style.getPropertyValue('--sai-right');
11
10
const safeAreaInsetBottom = style.getPropertyValue('--sai-bottom');
12
11
const safeAreaInsetLeft = style.getPropertyValue('--sai-left');
13
-
const str = [
14
-
safeAreaInsetTop,
15
-
safeAreaInsetRight,
16
-
safeAreaInsetBottom,
17
-
safeAreaInsetLeft,
18
-
]
19
-
.map(
20
-
(v, i) =>
21
-
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
22
-
)
12
+
safeAreaInsets = [
13
+
// top, right, bottom, left (clockwise)
14
+
Math.max(0, parseInt(safeAreaInsetTop, 10)),
15
+
Math.max(0, parseInt(safeAreaInsetRight, 10)),
16
+
Math.max(0, parseInt(safeAreaInsetBottom, 10)),
17
+
Math.max(0, parseInt(safeAreaInsetLeft, 10)),
18
+
];
19
+
}
20
+
requestAnimationFrame(getSafeAreaInsets);
21
+
22
+
function safeBoundingBoxPadding(paddings = []) {
23
+
const str = safeAreaInsets
24
+
.map((v, i) => (v || defaultBoundingBoxPadding) + (paddings[i] || 0))
23
25
.join(' ');
24
26
// console.log(str);
25
27
return str;
26
28
}
27
-
const safeBoundingBoxPadding = mem(_safeBoundingBoxPadding, {
28
-
maxAge: 10000, // 10 seconds
29
-
});
29
+
30
+
// Update safe area insets when orientation or resize
31
+
if (CSS.supports('top: env(safe-area-inset-top)')) {
32
+
window.addEventListener('resize', getSafeAreaInsets, { passive: true });
33
+
}
30
34
31
35
export default safeBoundingBoxPadding;