From 39fa514b545ff188e4e231d7a7e2fdb93acc3a6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 10 Mar 2023 10:28:52 +0100 Subject: [PATCH] rename the modal element to modalElement. --- .../libs/modal/modal-handler.ts | 40 +++++++++---------- .../libs/modal/modal.context.ts | 8 ++-- .../backoffice-modal-container.element.ts | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts index 150743c379..197a586b48 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -16,12 +16,12 @@ export class UmbModalHandler { private _closePromise: any; #host: UmbControllerHostInterface; - public containerElement: UUIModalDialogElement | UUIModalSidebarElement; + public modalElement: UUIModalDialogElement | UUIModalSidebarElement; #element = new BehaviorSubject(undefined); public readonly element = this.#element.asObservable(); - #innerElement?: UUIModalSidebarElement | UUIDialogElement; + #modalElement?: UUIModalSidebarElement | UUIDialogElement; public key: string; public type: UmbModalType = 'dialog'; @@ -49,7 +49,7 @@ export class UmbModalHandler { this._closeResolver = resolve; }); - this.containerElement = this.#createContainerElement(); + this.modalElement = this.#createContainerElement(); this.#observeModal(modalAlias.toString(), data); } @@ -59,7 +59,7 @@ export class UmbModalHandler { #createSidebarElement() { const sidebarElement = document.createElement('uui-modal-sidebar'); - this.#innerElement = sidebarElement; + this.#modalElement = sidebarElement; sidebarElement.size = this.size; return sidebarElement; } @@ -67,26 +67,26 @@ export class UmbModalHandler { #createDialogElement() { const modalDialogElement = document.createElement('uui-modal-dialog'); const dialogElement: UUIDialogElement = document.createElement('uui-dialog'); - this.#innerElement = dialogElement; + this.#modalElement = dialogElement; modalDialogElement.appendChild(dialogElement); return modalDialogElement; } - async #createModalElement(manifest: ManifestModal, data?: unknown) { - // TODO: add fallback element if no modal element is found - const modalElement = (await createExtensionElement(manifest)) as any; + async #createInnerElement(manifest: ManifestModal, data?: unknown) { + // TODO: add inner fallback element if no extension element is found + const innerElement = (await createExtensionElement(manifest)) as any; - if (modalElement) { - modalElement.data = data; - modalElement.modalHandler = this; + if (innerElement) { + innerElement.data = data; + innerElement.modalHandler = this; } - return modalElement; + return innerElement; } public close(...args: any) { this._closeResolver(...args); - this.containerElement.close(); + this.modalElement.close(); } public onClose(): Promise { @@ -103,23 +103,23 @@ export class UmbModalHandler { umbExtensionsRegistry.getByTypeAndAlias('modal', modalAlias), async (manifest) => { if (manifest) { - const element = await this.#createModalElement(manifest, data); - this.#appendModalElement(element); + const element = await this.#createInnerElement(manifest, data); + this.#appendInnerElement(element); } else { - this.#removeModalElement(); + this.#removeInnerElement(); } } ); } - #appendModalElement(element: any) { - this.#innerElement?.appendChild(element); + #appendInnerElement(element: any) { + this.#modalElement?.appendChild(element); this.#element.next(element); } - #removeModalElement() { + #removeInnerElement() { if (this.#element.getValue()) { - this.#innerElement?.removeChild(this.#element.getValue()); + this.#modalElement?.removeChild(this.#element.getValue()); this.#element.next(undefined); } } diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts index 646c9c4c8b..21c3b91bfd 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -55,10 +55,10 @@ export class UmbModalContext { requestAnimationFrame(() => { dialog.showModal(); }); - modalHandler.containerElement = dialog as unknown as UUIModalDialogElement; + modalHandler.modalElement = dialog as unknown as UUIModalDialogElement; //TODO END - modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); + modalHandler.modalElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); this.#modals.next([...this.#modals.getValue(), modalHandler]); return modalHandler; @@ -75,7 +75,7 @@ export class UmbModalContext { public open(modalAlias: string | UmbModalToken, data?: T, config?: UmbModalConfig): UmbModalHandler { const modalHandler = new UmbModalHandler(this.host, modalAlias, data, config); - modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); + modalHandler.modalElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); this.#modals.next([...this.#modals.getValue(), modalHandler]); return modalHandler; @@ -98,7 +98,7 @@ export class UmbModalContext { * @memberof UmbModalContext */ #onCloseEnd(modalHandler: UmbModalHandler) { - modalHandler.containerElement.removeEventListener('close-end', () => this.#onCloseEnd(modalHandler)); + modalHandler.modalElement.removeEventListener('close-end', () => this.#onCloseEnd(modalHandler)); this._close(modalHandler.key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts index 25b7b60eae..dd257e3841 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts @@ -41,7 +41,7 @@ export class UmbBackofficeModalContainer extends UmbLitElement { render() { return html` - ${this._modals ? repeat(this._modals, (modalHandler) => html`${modalHandler.containerElement}`) : ''} + ${this._modals ? repeat(this._modals, (modalHandler) => html`${modalHandler.modalElement}`) : ''} `; }