From 2e50560459f4e0daaf3ab254c5fdef1e523ef2fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sat, 2 Mar 2024 09:06:40 +0100 Subject: [PATCH] initial refactor for binding modals to a host --- .../core/modal/component/modal.element.ts | 28 ++++++++----------- .../modal/context/modal-manager.context.ts | 8 ++++-- .../core/modal/context/modal.context.ts | 16 ++++++++--- 3 files changed, 29 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts index 9bd49840ff..6757f2d6f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts @@ -56,22 +56,18 @@ export class UmbModalElement extends UmbLitElement { // Makes sure that the modal triggers the reject of the context promise when it is closed by pressing escape. this.element.addEventListener(UUIModalCloseEvent, this.#onClose); - if (this.#modalContext.originTarget) { - // The following code is the context api proxy. - // It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal. - this.element.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, ((event: UmbContextRequestEvent) => { - if (!this.#modalContext) return; - if (this.#modalContext.originTarget) { - // Note for this hack (The if-sentence): - // We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched. - // To avoid such this hack just prevents proxying the event if its a request for the Modal Context. - if (event.contextAlias !== UMB_MODAL_CONTEXT.contextAlias) { - event.stopImmediatePropagation(); - this.#modalContext.originTarget.dispatchEvent(event.clone()); - } - } - }) as EventListener); - } + // The following code is the context api proxy. + // It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal. [NL] + this.element.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, ((event: UmbContextRequestEvent) => { + if (!this.#modalContext) return; + // Note for this hack (The if-sentence): [NL] + // We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched. + // To avoid such this hack just prevents proxying the event if its a request for the Modal Context. [NL] + if (event.contextAlias !== UMB_MODAL_CONTEXT.contextAlias) { + event.stopImmediatePropagation(); + this.#modalContext.getHostElement().dispatchEvent(event.clone()); + } + }) as EventListener); this.#modalContext.onSubmit().then( () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts index 6edd817eac..d923e06b0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal-manager.context.ts @@ -26,8 +26,9 @@ export class UmbModalManagerContext extends UmbContextBase, >( + host: UmbControllerHost, modalAlias: UmbModalToken | string, args: UmbModalContextClassArgs = {}, ) { - const modalContext = new UmbModalContext(modalAlias, args); + const modalContext = new UmbModalContext(host, modalAlias, args); // Append to store: this.#modals.setValue( diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts index 9cafca3fbf..49b4d7fa14 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts @@ -1,9 +1,11 @@ import { UmbModalToken } from '../token/modal-token.js'; import type { UmbModalConfig, UmbModalType } from './modal-manager.context.js'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { IRouterSlot } from '@umbraco-cms/backoffice/external/router-slot'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; import { UmbId } from '@umbraco-cms/backoffice/id'; import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; export interface UmbModalRejectReason { type: string; @@ -21,7 +23,7 @@ export type UmbModalContextClassArgs< }; // TODO: consider splitting this into two separate handlers -export class UmbModalContext extends EventTarget { +export class UmbModalContext extends UmbControllerBase { // #submitPromise: Promise; #submitResolver?: (value: ModalValue) => void; @@ -32,20 +34,19 @@ export class UmbModalContext; #value; public readonly value; constructor( + host: UmbControllerHost, modalAlias: string | UmbModalToken, args: UmbModalContextClassArgs, ) { - super(); + super(host); this.key = args.modal?.key || UmbId.new(); this.router = args.router ?? null; - this.originTarget = args.originTarget; this.alias = modalAlias; if (this.alias instanceof UmbModalToken) { @@ -130,4 +131,11 @@ export class UmbModalContext) { this.#value.update(partialValue); } + + public destroy(): void { + this.#value.destroy(); + (this as any).router = null; + (this as any).data = undefined; + super.destroy(); + } }