javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react,vue): backdrop for inline modal/popover overlay (#24453)

Browse Source 
Resolves #24449
This commit is contained in:
Sean Perkins
2022-01-07 13:21:20 -05:00
committed by GitHub
parent 388622f973
commit 77f8412b74
9 changed files with 65 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
core/src/utils/overlays.ts
View File

@ -59,27 +59,29 @@ export const prepareOverlay = <T extends HTMLIonOverlayElement>(el: T) => {
}
};
export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined, customElement?: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<T> => {
/* tslint:disable-next-line */
if (typeof window.customElements !== 'undefined') {
if (typeof (window as any) !== 'undefined' && window.customElements) {
if (!window.customElements.get(tagName)) {
window.customElements.define(tagName, customElement);
}
/**
* If the parent element has nested usage of custom elements,
* we need to manually define those custom elements.
*/
if (childrenCustomElements) {
for (const customElementDefinition of childrenCustomElements) {
if (!window.customElements.get(customElementDefinition.tagName)) {
window.customElements.define(customElementDefinition.tagName, customElementDefinition.customElement);
}
}
const registerOverlayComponents = (tagName: string, customElement: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<any> => {
const { customElements } = window;
if (!customElements.get(tagName)) {
customElements.define(tagName, customElement);
}
/**
* If the parent element has nested usage of custom elements,
* we need to manually define those custom elements.
*/
if (childrenCustomElements) {
for (const customElementDefinition of childrenCustomElements) {
if (!customElements.get(customElementDefinition.tagName)) {
customElements.define(customElementDefinition.tagName, customElementDefinition.customElement);
}
}
}
return customElements.whenDefined(tagName);
}
return window.customElements.whenDefined(tagName).then(() => {
export const createOverlay = <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined, customElement?: any, childrenCustomElements?: ChildCustomElementDefinition[]): Promise<T> => {
/* tslint:disable-next-line */
if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
return registerOverlayComponents(tagName, customElement, childrenCustomElements).then(() => {
const element = document.createElement(tagName) as HTMLIonOverlayElement;
element.classList.add('overlay-hidden');