ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(overlays): prevent error throw for body margin auto

Browse source
This commit is contained in:
Jonathan 2021-01-22 15:37:19 +01:00 committed by Joren Broekema
parent b9de1789c3
commit 2e8e547cd4
2 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/pink-crabs-begin.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/overlays': patch
---
Prevent error throw for body margin auto on overlay hide/show.

31
packages/overlays/src/OverlayController.js
View file

@ -735,21 +735,17 @@ export class OverlayController extends EventTargetShim {
case 'before-show': case 'before-show':
this.__bodyClientWidth = document.body.clientWidth; this.__bodyClientWidth = document.body.clientWidth;
this.__bodyClientHeight = document.body.clientHeight; this.__bodyClientHeight = document.body.clientHeight;
this.__bodyMarginRight = 0; this.__bodyMarginRightInline = document.body.style.marginRight;
this.__bodyMarginBottom = 0; this.__bodyMarginBottomInline = document.body.style.marginBottom;
break; break;
case 'show': { case 'show': {
if (supportsCSSTypedObject) { if (window.getComputedStyle) {
// @ts-expect-error types attributeStyleMap not available yet
this.__bodyMarginRight = document.body.computedStyleMap().get('margin-right').value;
// @ts-expect-error types computedStyleMap not available yet
this.__bodyMarginBottom = document.body.computedStyleMap().get('margin-bottom').value;
} else if (window.getComputedStyle) {
const bodyStyle = window.getComputedStyle(document.body); const bodyStyle = window.getComputedStyle(document.body);
if (bodyStyle) { this.__bodyMarginRight = parseInt(bodyStyle.getPropertyValue('margin-right'), 10);
this.__bodyMarginRight = parseInt(bodyStyle.getPropertyValue('margin-right'), 10); this.__bodyMarginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
this.__bodyMarginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10); } else {
} this.__bodyMarginRight = 0;
this.__bodyMarginBottom = 0;
} }
const scrollbarWidth = const scrollbarWidth =
document.body.clientWidth - /** @type {number} */ (this.__bodyClientWidth); document.body.clientWidth - /** @type {number} */ (this.__bodyClientWidth);
@ -769,15 +765,8 @@ export class OverlayController extends EventTargetShim {
break; break;
} }
case 'hide': case 'hide':
if (supportsCSSTypedObject) { document.body.style.marginRight = this.__bodyMarginRightInline || '';
// @ts-expect-error types attributeStyleMap + CSS.px not available yet document.body.style.marginBottom = this.__bodyMarginBottomInline || '';
document.body.attributeStyleMap.set('margin-right', CSS.px(this.__bodyMarginRight));
// @ts-expect-error types attributeStyleMap + CSS.px not available yet
document.body.attributeStyleMap.set('margin-bottom', CSS.px(this.__bodyMarginBottom));
} else {
document.body.style.marginRight = `${this.__bodyMarginRight}px`;
document.body.style.marginBottom = `${this.__bodyMarginBottom}px`;
}
break; break;
/* no default */ /* no default */
} }