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

fix: fix backdrop teardown/init bugs and align APIs WIP

Browse source
This commit is contained in:
jorenbroekema 2020-10-07 18:08:27 +02:00
parent 8301092d9d
commit b5e7df3ed9
1 changed files with 56 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -160,6 +160,8 @@ export class OverlayController extends EventTargetShim {
this.updateConfig(config);
this.__hasActiveTrapsKeyboardFocus = false;
this.__hasActiveBackdrop = true;
/** @type {HTMLElement | undefined} */
this.__backdropNodeToBeTornDown = undefined;
this.__escKeyHandler = this.__escKeyHandler.bind(this);
}
@ -418,7 +420,7 @@ export class OverlayController extends EventTargetShim {
*/
updateConfig(cfgToAdd) {
// Teardown all previous configs
this._handleFeatures({ phase: 'teardown' });
this.teardown();
/** @type {OverlayConfig} */
this.__prevConfig = this.config || {};
@ -896,52 +898,30 @@ export class OverlayController extends EventTargetShim {
* @param {{ animation?: boolean, phase: OverlayPhase }} config
*/
_handleBackdrop({ animation = true, phase }) {
if (this.placementMode === 'local') {
switch (phase) {
case 'init':
if (!this.backdropNode) {
this.__backdropNode = document.createElement('div');
/** @type {HTMLElement} */
(this.backdropNode).classList.add('local-overlays__backdrop');
}
this.backdropNode.slot = '_overlay-shadow-outlet';
/** @type {HTMLElement} */
(this.contentNode.parentNode).insertBefore(this.backdropNode, this.contentNode);
break;
case 'show':
this.__hasActiveBackdrop = true;
break;
case 'hide':
if (!this.backdropNode) {
return;
}
this.__hasActiveBackdrop = false;
break;
case 'teardown':
if (!this.backdropNode || !this.backdropNode.parentNode) {
return;
}
this.backdropNode.parentNode.removeChild(this.backdropNode);
this.__backdropNode = undefined;
break;
/* no default */
}
return;
}
switch (phase) {
case 'init':
this.__backdropNode = document.createElement('div');
this.backdropNode.classList.add('global-overlays__backdrop');
/** @type {HTMLElement} */
(this.contentWrapperNode.parentElement).insertBefore(
this.backdropNode,
this.contentWrapperNode,
);
case 'init': {
if (!this.backdropNode) {
this.__backdropNode = document.createElement('div');
/** @type {HTMLElement} */
(this.backdropNode).classList.add(`${this.placementMode}-overlays__backdrop`);
}
this.backdropNode.slot = '_overlay-shadow-outlet';
let insertionAnchor = /** @type {HTMLElement} */ (this.contentNode.parentNode);
let insertionBefore = this.contentNode;
if (this.placementMode === 'global') {
insertionAnchor = /** @type {HTMLElement} */ (this.contentWrapperNode.parentElement);
insertionBefore = this.contentWrapperNode;
}
insertionAnchor.insertBefore(this.backdropNode, insertionBefore);
break;
}
case 'show':
this.backdropNode.classList.add('global-overlays__backdrop--visible');
if (animation === true) {
this.backdropNode.classList.add('global-overlays__backdrop--fade-in');
if (this.placementMode === 'global') {
this.backdropNode.classList.add('global-overlays__backdrop--visible');
if (animation === true) {
this.backdropNode.classList.add('global-overlays__backdrop--fade-in');
}
}
this.__hasActiveBackdrop = true;
break;
@ -949,39 +929,50 @@ export class OverlayController extends EventTargetShim {
if (!this.backdropNode) {
return;
}
this.backdropNode.classList.remove('global-overlays__backdrop--fade-in');
if (animation) {
/** @type {(ev:AnimationEvent) => void} */
let afterFadeOut;
this.backdropNode.classList.add('global-overlays__backdrop--fade-out');
this.__backDropAnimation = new Promise(resolve => {
afterFadeOut = () => {
this.backdropNode.classList.remove('global-overlays__backdrop--fade-out');
this.backdropNode.classList.remove('global-overlays__backdrop--visible');
this.backdropNode.removeEventListener('animationend', afterFadeOut);
resolve();
};
});
// @ts-expect-error
this.backdropNode.addEventListener('animationend', afterFadeOut);
} else {
this.backdropNode.classList.remove('global-overlays__backdrop--visible');
}
this.__hasActiveBackdrop = false;
if (this.placementMode === 'global') {
this.backdropNode.classList.remove('global-overlays__backdrop--fade-in');
if (animation) {
/** @type {(ev:AnimationEvent) => void} */
let afterFadeOut;
this.backdropNode.classList.add('global-overlays__backdrop--fade-out');
this.__backDropAnimation = new Promise(resolve => {
afterFadeOut = () => {
if (this.backdropNode) {
this.backdropNode.classList.remove('global-overlays__backdrop--fade-out');
this.backdropNode.classList.remove('global-overlays__backdrop--visible');
this.backdropNode.removeEventListener('animationend', afterFadeOut);
}
resolve();
};
});
// @ts-expect-error
this.backdropNode.addEventListener('animationend', afterFadeOut);
} else {
this.backdropNode.classList.remove('global-overlays__backdrop--visible');
}
}
break;
case 'teardown':
if (!this.backdropNode || !this.backdropNode.parentNode) {
return;
}
if (animation && this.__backDropAnimation) {
this.__backdropNodeToBeTornDown = this.backdropNode;
this.__backDropAnimation.then(() => {
/** @type {HTMLElement} */
(this.backdropNode.parentNode).removeChild(this.backdropNode);
if (this.__backdropNodeToBeTornDown) {
/** @type {HTMLElement} */ (this.__backdropNodeToBeTornDown.parentNode).removeChild(
this.__backdropNodeToBeTornDown,
);
}
});
} else {
this.backdropNode.parentNode.removeChild(this.backdropNode);
}
this.__backdropNode = undefined;
break;
/* no default */
}