@shopgate/engage
Version:
Shopgate's ENGAGE library.
15 lines • 2.06 kB
JavaScript
/**
* Updates the page inset css variables
* @param {Object} pageInsets A page insets object
*/export var updatePageInsets=function updatePageInsets(pageInsets){var safeAreaInsetTop=pageInsets.safeAreaInsetTop,safeAreaInsetBottom=pageInsets.safeAreaInsetBottom;/**
* Try to use environment variables for the insets. On Android those variables are not available,
* on iOS devices without notch their value is 0px. To cover these different environments,
* we need to provide two different strategies with the help of media queries.
*
* Android doesn't support the max() function, but we can just use the insets from the params
* (they will always be 0px anyway). On iOS the page insets from the params will always contain
* values > 0px, but on notch devices the required insets might need to be bigger.
* Since all iOS versions which are shipped with notch iPhones support max(), we can use it to
* determine the appropriate value for the css variables which can be used in the Engage css
* when insets need to be considered.
*/var id='safe-area-insets';var styleBlock=document.querySelector("#".concat(id));if(!styleBlock){styleBlock=document.createElement('style');styleBlock.setAttribute('type','text/css');styleBlock.setAttribute('id',id);document.querySelector('head').appendChild(styleBlock);}styleBlock.innerHTML="\n @supports not (padding: max(0px)) {\n :root {\n --safe-area-inset-top: ".concat(safeAreaInsetTop,"px;\n --safe-area-inset-bottom: ").concat(safeAreaInsetBottom,"px;\n --safe-area-inset-left: 0px;\n --safe-area-inset-right: 0px;\n }\n }\n\n @supports(padding: max(0px)) {\n :root {\n --safe-area-inset-top: max(").concat(safeAreaInsetTop,"px, env(safe-area-inset-top));\n --safe-area-inset-bottom: max(").concat(safeAreaInsetBottom,"px, env(safe-area-inset-bottom));\n --safe-area-inset-left: max(0px, env(safe-area-inset-left));\n --safe-area-inset-right: max(0px, env(safe-area-inset-right));\n }\n }\n ");};