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 6a0b00c0bb..aa5c53faf7 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -1,3 +1,5 @@ +// eslint-disable-next-line local-rules/no-external-imports +import type { IRouterSlot } from 'router-slot/model'; import type { UUIDialogElement, UUIModalDialogElement, @@ -5,6 +7,7 @@ import type { UUIModalSidebarSize, } from '@umbraco-ui/uui'; import { BehaviorSubject } from 'rxjs'; +import { UmbRouterSlotElement } from '@umbraco-cms/internal/router'; import { UmbModalConfig, UmbModalType } from './modal.context'; import { UmbModalToken } from './token/modal-token'; import { UmbId } from '@umbraco-cms/backoffice/id'; @@ -45,18 +48,18 @@ export class UmbModalHandlerClass(undefined); public readonly innerElement = this.#innerElement.asObservable(); - #modalElement?: UUIModalSidebarElement | UUIDialogElement; - public key: string; public type: UmbModalType = 'dialog'; public size: UUIModalSidebarSize = 'small'; constructor( host: UmbControllerHostElement, + router: IRouterSlot | null, modalAlias: string | UmbModalToken, data?: ModalData, config?: UmbModalConfig @@ -79,6 +82,10 @@ export class UmbModalHandlerClass; @@ -78,12 +80,16 @@ export class UmbModalContext { public open( modalAlias: string | UmbModalToken, data?: ModalData, - config?: UmbModalConfig + config?: UmbModalConfig, + router: IRouterSlot | null = null ) { - const modalHandler = new UmbModalHandlerClass(this.host, modalAlias, data, config) as unknown as UmbModalHandler< - ModalData, - ModalResult - >; + const modalHandler = new UmbModalHandlerClass( + this.host, + router, + modalAlias, + data, + config + ) as unknown as UmbModalHandler; modalHandler.modalElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts index 087faf63ac..abd84ac786 100644 --- a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line local-rules/no-external-imports -import type { IRoutingInfo } from 'router-slot/model'; +import type { IRoutingInfo, IRouterSlot } from 'router-slot/model'; import type { UmbRoute } from './route.interface'; import { generateRoutePathBuilder } from './generate-route-path-builder.function'; import { @@ -13,13 +13,17 @@ import { UMB_MODAL_CONTEXT_TOKEN, UmbModalRouteRegistration } from '@umbraco-cms const EmptyDiv = document.createElement('div'); export class UmbRouteContext { + #mainRouter: IRouterSlot; + #modalRouter: IRouterSlot; #modalRegistrations: UmbModalRouteRegistration[] = []; #modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE; #contextRoutes: UmbRoute[] = []; #routerBasePath?: string; #activeModalPath?: string; - constructor(host: UmbControllerHostElement, private _onGotModals: (contextRoutes: any) => void) { + constructor(host: UmbControllerHostElement, mainRouter: IRouterSlot, modalRouter: IRouterSlot) { + this.#mainRouter = mainRouter; + this.#modalRouter = modalRouter; new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this); new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => { this.#modalContext = context; @@ -29,7 +33,6 @@ export class UmbRouteContext { public registerModal(registration: UmbModalRouteRegistration) { this.#modalRegistrations.push(registration); - console.log('registerModal', registration); this.#generateNewUrlBuilder(registration); this.#generateContextRoutes(); return registration; @@ -48,7 +51,7 @@ export class UmbRouteContext { component: EmptyDiv, setup: (component, info) => { if (!this.#modalContext) return; - const modalHandler = modalRegistration.routeSetup(this.#modalContext, info.match.params); + const modalHandler = modalRegistration.routeSetup(this.#modalRouter, this.#modalContext, info.match.params); if (modalHandler) { modalHandler.onSubmit().then( () => { @@ -81,7 +84,8 @@ export class UmbRouteContext { }); // TODO: Should we await one frame, to ensure we don't call back too much?. - this._onGotModals(this.#contextRoutes); + this.#modalRouter.routes = this.#contextRoutes; + this.#modalRouter.render(); } public _internal_routerGotBasePath(routerBasePath: string) { diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts index b28474805e..c21ad0f34d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts @@ -1,5 +1,7 @@ // eslint-disable-next-line local-rules/no-external-imports import { RouterSlot } from 'router-slot/router-slot'; +// eslint-disable-next-line local-rules/no-external-imports +import type { IRouterSlot } from 'router-slot/model'; import { css, html, PropertyValueMap } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UmbLitElement } from '../lit-element'; @@ -28,6 +30,14 @@ export class UmbRouterSlotElement extends UmbLitElement { this.#router.routes = value || []; } + @property() + public get parent(): IRouterSlot | null | undefined { + return this.#router.parent; + } + public set parent(parent: IRouterSlot | null | undefined) { + this.#router.parent = parent; + } + private _routerPath?: string; public get absoluteRouterPath() { return this._routerPath; @@ -42,11 +52,7 @@ export class UmbRouterSlotElement extends UmbLitElement { return this._routerPath + '/' + this._activeLocalPath; } - #routeContext = new UmbRouteContext(this, (contextRoutes) => { - this.#modalRouter.routes = contextRoutes; - // Force a render? - this.#modalRouter.render(); - }); + #routeContext = new UmbRouteContext(this, this.#router, this.#modalRouter); constructor() { super();