feat(popover): consider safe areas during positioning

konstaui · Aug 31, 2021 · 8375b14 · 8375b14
1 parent a8f9011
commit 8375b14
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/react/shared/calc-popover-position.js b/src/react/shared/calc-popover-position.js
@@ -43,9 +43,14 @@ export const calcPopoverPosition = ({
 
   let targetOffsetLeft;
   let targetOffsetTop;
-  let safeAreaTop = 0; // parseInt($('html').css('--f7-safe-area-top'), 10);
-  let safeAreaLeft = 0; // parseInt($('html').css('--f7-safe-area-left'), 10);
-  let safeAreaRight = 0; // parseInt($('html').css('--f7-safe-area-right'), 10);
+  // eslint-disable-next-line
+  const targetElStyles = window.getComputedStyle(targetEl);
+  let safeAreaTop =
+    parseInt(targetElStyles.getPropertyValue('--twm-safe-area-top'), 10) || 0;
+  let safeAreaLeft =
+    parseInt(targetElStyles.getPropertyValue('--twm-safe-area-left'), 10) || 0;
+  let safeAreaRight =
+    parseInt(targetElStyles.getPropertyValue('--twm-safe-area-right'), 10) || 0;
   if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
   if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
   if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;