yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor to use init method

Browse Source
This commit is contained in:
Niels Lyngsø
2024-11-07 21:51:13 +01:00
parent 5adcc43351
commit 62a66248e9
2 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts
View File

@@ -13,7 +13,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
@state()
_modals: Array<UmbModalContext> = [];
@property({ reflect: true, attribute: 'fill-background' })
@property({ type: Boolean, reflect: true, attribute: 'fill-background' })
fillBackground = false;
private _modalManager?: UmbModalManagerContext;
@@ -58,28 +58,26 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
return;
}
this._modals.forEach(async (modal) => {
if (this._modalElementMap.has(modal.key)) return;
this._modals.forEach(async (modalContext) => {
if (this._modalElementMap.has(modalContext.key)) return;
const modalElement = new UmbModalElement();
modalElement.modalContext = modal;
await modalElement.init(modalContext);
await modalElement.createModalElement();
modalElement.element?.addEventListener('close-end', this.#onCloseEnd.bind(this, modalContext.key));
modalContext.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modalContext.key));
modalElement.element?.addEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
modal.addEventListener('umb:destroy', this.#onCloseEnd.bind(this, modal.key));
this._modalElementMap.set(modal.key, modalElement);
this._modalElementMap.set(modalContext.key, modalElement);
// If any of the modals are fillBackground, set the fillBackground property to true
if (modal.backdropBackground) {
if (modalContext.backdropBackground) {
this.fillBackground = true;
this.shadowRoot
?.getElementById('container')
?.style.setProperty('--backdrop-background', modal.backdropBackground);
?.style.setProperty('--backdrop-background', modalContext.backdropBackground);
}
this.requestUpdate();
this.requestUpdate('_modalElementMap');
});
}

22
src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts
View File

@@ -26,18 +26,6 @@ import {
@customElement('umb-modal')
export class UmbModalElement extends UmbLitElement {
#modalContext?: UmbModalContext;
public get modalContext(): UmbModalContext | undefined {
return this.#modalContext;
}
public set modalContext(value: UmbModalContext | undefined) {
if (this.#modalContext === value) return;
this.#modalContext = value;
if (!value) {
this.destroy();
return;
}
}
public element?: UUIModalDialogElement | UUIModalSidebarElement | UUIModalElement;
@@ -51,8 +39,14 @@ export class UmbModalElement extends UmbLitElement {
this.#modalContext?.reject({ type: 'close' });
};
async createModalElement() {
if (!this.#modalContext) return;
async init(modalContext: UmbModalContext | undefined) {
if (this.#modalContext === modalContext) return;
this.#modalContext = modalContext;
if (!this.#modalContext) {
this.destroy();
return;
}
this.#modalContext.addEventListener('umb:destroy', this.#onContextDestroy);
this.element = await this.#createContainerElement();