diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json index 196b1d2b83..d2e313ff3b 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/settings.json +++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json @@ -1,6 +1,6 @@ { "cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"], - "cSpell.words": ["combobox", "variantable"], + "cSpell.words": ["combobox", "nesecary", "variantable"], "exportall.config.folderListener": [], "exportall.config.relExclusion": [] } diff --git a/src/Umbraco.Web.UI.Client/libs/modal/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/index.ts index 3c252e27f2..be736301da 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/index.ts @@ -1,4 +1,5 @@ export * from './modal.context'; export * from './modal-handler'; +export * from './modal-registration.controller'; export * from './token/modal-token'; export * from './modal.interfaces'; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts deleted file mode 100644 index 6dd45e6e52..0000000000 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller'; - -/* -export class UmbModalRegistrationController extends UmbController { - constructor(host: UmbControllerHostInterface, modalAlias: string | NewType) { - super(host); - this.key = config?.key || uuidv4(); - } - - updateSetup() {} - - hostConnected(): void {} - hostDisconnected(): void {} -} -*/ diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts new file mode 100644 index 0000000000..beaaeba8ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts @@ -0,0 +1,85 @@ +import type { UmbRouteContext } from '../../src/core/router/route.context'; +// TODO: Be aware here we import a class from src! +import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context'; +import { UmbModalRouteBuilder, UmbModalRouteOptions, UmbModalRouteRegistration } from './modal-route-registration'; +import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin'; +import { UmbController } from 'libs/controller/controller.class'; + +export type UmbModalRegistrationToken = UmbModalRouteRegistration; + +export class UmbModalRegistrationController extends UmbController { + #modalToken: UmbModalToken | string; + #modalOptions: UmbModalRouteOptions; + #routeContext?: UmbRouteContext; + #modalRegistration?: UmbModalRegistrationToken; + #uniqueParts; + //#urlBuilder?: UmbModalRouteBuilder; // TODO: not going to work, as this will not trigger a re-render of the host element. + + constructor( + host: UmbControllerHostInterface, + alias: UmbModalToken | string, + options: UmbModalRouteOptions, + unique: Map = new Map() + ) { + super(host); + this.#modalToken = alias; + this.#modalOptions = { + ...options, + /*getUrlBuilder: (urlBuilder) => { + this.#urlBuilder = urlBuilder; + },*/ + }; + this.#uniqueParts = unique; + + new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => { + this.#routeContext = _routeContext; + this._registererModal(); + }); + } + + /* + public getUrl(params: { [key: string]: string | number }) { + return this.#urlBuilder?.(params) || null; + } + */ + + setUniqueIdentifier(identifier: string, value: string) { + this.#uniqueParts.set(identifier, value); + } + + private _registererModal() { + if (!this.#routeContext) return; + if (this.#modalRegistration) { + this.#routeContext.unregisterModal(this.#modalRegistration); + } + + const pathParts = Array.from(this.#uniqueParts.values()); + + // Check if there is any undefined values of unique map: + if (pathParts.some((value) => value === undefined)) return; + + // Add the configured part of the path: + pathParts.push(this.#modalOptions.path); + + const modifiedModalOptions = { + ...this.#modalOptions, + path: pathParts.join('/'), + }; + + this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions); + } + + hostConnected() { + if (!this.#modalRegistration) { + this._registererModal(); + } + } + hostDisconnected(): void { + if (this.#modalRegistration) { + this.#routeContext?.unregisterModal(this.#modalRegistration); + this.#modalRegistration = undefined; + } + } +} diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts new file mode 100644 index 0000000000..87b2804aaa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts @@ -0,0 +1,80 @@ +import type { Params } from 'router-slot'; +import { v4 as uuidv4 } from 'uuid'; +import { UmbModalHandler } from './modal-handler'; +import { UmbModalConfig, UmbModalContext } from './modal.context'; +import { UmbModalToken } from './token/modal-token'; + +export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string; + +export type UmbModalRouteOptions = { + path: string; + config?: UmbModalConfig; + onSetup?: (routingInfo: Params) => UmbModalTokenData | false; + onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike; + onReject?: () => void; + getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void; +}; + +export class UmbModalRouteRegistration { + #key; + #modalAlias: UmbModalToken | string; + #options: UmbModalRouteOptions; + + #modalHandler: UmbModalHandler | undefined; + + // Notice i removed the key in the transferring to this class. + constructor(modalAlias: UmbModalToken | string, options: UmbModalRouteOptions) { + this.#key = options.config?.key || uuidv4(); + this.#modalAlias = modalAlias; + this.#options = options; + } + + public get key() { + return this.#key; + } + + public get alias() { + return this.#modalAlias; + } + + public get path() { + return this.#options.path; + } + + public get options() { + return this.#options; + } + + /** + * Returns true if the modal is currently active. + */ + public get active() { + return !!this.#modalHandler; + } + + /** + * Returns the modal handler if the modal is currently active. Otherwise its undefined. + */ + public get modalHandler() { + return this.#modalHandler; + } + + routeSetup(modalContext: UmbModalContext, params: Params) { + const modalData = this.#options.onSetup?.(params); + if (modalData !== false) { + this.#modalHandler = modalContext.open(this.#modalAlias, modalData, { ...this.#options.config, key: this.#key }); + this.#modalHandler.onSubmit().then( + (data) => { + this.#options.onSubmit?.(data); + this.#modalHandler = undefined; + }, + () => { + this.#options.onReject?.(); + this.#modalHandler = undefined; + } + ); + return this.#modalHandler; + } + return null; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts index df34ed48b5..4073831db0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts @@ -5,7 +5,8 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UmbModalRouteBuilder, UmbPropertyEditorModalRegistrationController } from '@umbraco-cms/internal/router'; +import { UmbModalRegistrationController } from 'libs/modal/modal-registration.controller'; +import type { UmbModalRouteBuilder } from 'libs/modal/modal-route-registration'; /** * @element umb-input-multi-url-picker @@ -104,6 +105,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen @state() private _linkPickerURL?: UmbModalRouteBuilder; + private myModalRegistration; + constructor() { super(); this.addValidator( @@ -118,7 +121,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen ); // TODO: Need concept for contextual being aware about the context, as this might not work if input is used outside a property editor. - new UmbPropertyEditorModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, { + this.myModalRegistration = new UmbModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, { path: `:index`, onSetup: (params) => { // Get index: @@ -160,6 +163,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen this._setSelection(submitData.link, submitData.index); }, getUrlBuilder: (urlBuilder) => { + console.log('got link builder', urlBuilder); this._linkPickerURL = urlBuilder; }, }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts index 96d5e3459b..453b373c79 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts @@ -19,7 +19,7 @@ export type WorkspacePropertyData = { config?: DataTypeResponseModel['values']; // This could potentially then come from hardcoded JS object and not the DataType store. }; -export class UmbWorkspacePropertyContext { +export class UmbWorkspacePropertyContext { #host: UmbControllerHostInterface; private _providerController: UmbContextProviderController; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts index be2fdb7366..8939911174 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts @@ -2,12 +2,12 @@ import { html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { IRoute, IRoutingInfo } from 'router-slot'; -import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; -import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor'; -import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbVariantId } from '../../../../shared/variants/variant-id.class'; import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../../shared/components/workspace/workspace-variant/workspace-variant.context'; import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context'; +import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router'; +import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; /** * @element umb-property-editor-ui-block-grid @@ -97,7 +97,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts index 66605ef279..f39539b6a9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts @@ -2,7 +2,10 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; import { UUITextareaElement } from '@umbraco-ui/uui'; -import type { UmbWorkspacePropertyContext } from '../../../../shared/components/workspace-property/workspace-property.context'; +import { + UmbWorkspacePropertyContext, + UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, +} from '../../../../shared/components/workspace-property/workspace-property.context'; import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index 8ff12a5682..811f630616 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -65,6 +65,7 @@ export const data: Array = [ ], }, { + $type: '', alias: 'multiUrlPicker', culture: 'da-dk', segment: null, @@ -286,6 +287,7 @@ export const data: Array = [ updateDate: '2023-02-06T15:31:51.354764', }, { + $type: '', state: ContentStateModel.PUBLISHED, publishDate: '2023-02-06T15:31:51.354764', culture: 'da-dk', diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts index 56b50cb113..8977c05ae9 100644 --- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts +++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts @@ -1,5 +1,4 @@ export * from 'router-slot'; -export * from './property-editor-modal-registration.controller'; export * from './route.interface'; export * from './route.context'; export * from './router-slot.element'; diff --git a/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts deleted file mode 100644 index 0a88f36b09..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - UmbModalRegistrationToken, - UmbModalRouteOptions, - UmbRouteContext, - UMB_ROUTE_CONTEXT_TOKEN, -} from './route.context'; -import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller'; -import { UmbModalToken } from '@umbraco-cms/modal'; - -export class UmbModalRegistrationController extends UmbController { - #modalToken: UmbModalToken | string; - #modalOptions: UmbModalRouteOptions; - #routeContext?: UmbRouteContext; - #modalRegistration?: UmbModalRegistrationToken; - - constructor( - host: UmbControllerHostInterface, - alias: UmbModalToken | string, - options: UmbModalRouteOptions - ) { - super(host); - this.#modalToken = alias; - this.#modalOptions = options; - - new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => { - this.#routeContext = _routeContext; - this._registererModal(); - }); - } - - private _registererModal() { - this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, this.#modalOptions); - } - - hostConnected() { - if (!this.#modalRegistration) { - this._registererModal(); - } - } - hostDisconnected(): void { - if (this.#modalRegistration) { - this.#routeContext?.unregisterModal(this.#modalRegistration); - this.#modalRegistration = undefined; - } - } -} diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts deleted file mode 100644 index b979ae4837..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../backoffice/shared/components/workspace-property/workspace-property.context'; -import { - UmbModalRegistrationToken, - UmbModalRouteOptions, - UmbRouteContext, - UMB_ROUTE_CONTEXT_TOKEN, -} from './route.context'; -import { UmbContextConsumerController } from '@umbraco-cms/context-api'; -import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller'; -import { UmbModalToken } from '@umbraco-cms/modal'; -import { UmbObserverController } from '@umbraco-cms/observable-api'; - -// TODO: Somehow get the modal handler via the controller? aka. va the registration. -export class UmbPropertyEditorModalRegistrationController extends UmbController { - #modalToken: UmbModalToken | string; - #modalOptions: UmbModalRouteOptions; - #routeContext?: UmbRouteContext; - #propertyAlias?: string; - #variantId?: string; - #modalRegistration?: UmbModalRegistrationToken; - - constructor( - host: UmbControllerHostInterface, - alias: UmbModalToken | string, - options: UmbModalRouteOptions, - unique: Map = new Map() - ) { - super(host); - this.#modalToken = alias; - this.#modalOptions = options; - - new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => { - this.#routeContext = _routeContext; - this._registererModal(); - }); - new UmbContextConsumerController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (_routeContext) => { - new UmbObserverController(host, _routeContext.alias, (alias) => { - this.#propertyAlias = alias; - this._registererModal(); - }); - new UmbObserverController(host, _routeContext.variantId, (variantId) => { - this.#variantId = variantId?.toString(); - this._registererModal(); - }); - }); - } - - // "alias" : 'my-property-alias' - // "variant" : 'en_us' - addUniqueIdentifier(identifier: string, value: string) { - this._unique.set(identifier, value); - } - - // TODO: Concept about adding identifiers to the modal registration, which is one or more path-folders. - // To replace the specific implementation of propertyAlias and variantId. - // I think it could be a key value pair, where the key is the identifier so it can be updated/replaced at runtime. - - private _registererModal() { - if (!this.#routeContext || !this.#propertyAlias || !this.#variantId) return; - if (this.#modalRegistration) { - this.#routeContext.unregisterModal(this.#modalRegistration); - } - - const modifiedModalOptions = { - ...this.#modalOptions, - path: `${this.#propertyAlias}/${this.#variantId}/${this.#modalOptions.path}`, - }; - - this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions); - } - - hostConnected() { - if (!this.#modalRegistration) { - this._registererModal(); - } - } - hostDisconnected(): void { - if (this.#modalRegistration) { - this.#routeContext?.unregisterModal(this.#modalRegistration); - this.#modalRegistration = undefined; - } - } -} diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts index 2dd618c754..4b5ce303eb 100644 --- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts +++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts @@ -1,31 +1,16 @@ -import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'router-slot'; -import { v4 as uuidv4 } from 'uuid'; -import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api'; -import { UmbControllerHostInterface } from '@umbraco-cms/controller'; -import { UmbModalConfig, UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { IRoute, IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot'; +import { + UmbContextConsumerController, + UmbContextProviderController, + UmbContextToken, +} from '@umbraco-cms/backoffice/context-api'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; +import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin'; +import { UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal/modal.context'; +import { UmbModalRouteOptions, UmbModalRouteRegistration } from 'libs/modal/modal-route-registration'; const EmptyDiv = document.createElement('div'); -export type UmbModalRouteOptions = { - path: string; - config?: UmbModalConfig; - onSetup?: (routingInfo: Params) => UmbModalTokenData | false; - onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike; - onReject?: () => void; - getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void; -}; - -export type UmbModalRegistrationToken = UmbModalRouteRegistration; - -type UmbModalRouteRegistration = { - key: string; - alias: UmbModalToken | string; - options: UmbModalRouteOptions; - routeSetup: (component: HTMLElement, info: IRoutingInfo) => void; -}; - -export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string; - export class UmbRouteContext { //#host: UmbControllerHostInterface; #modalRegistrations: UmbModalRouteRegistration[] = []; @@ -58,6 +43,7 @@ export class UmbRouteContext { alias: UmbModalToken | string, options: UmbModalRouteOptions ) { + /* const registration = { key: options.config?.key || uuidv4(), alias: alias, @@ -79,6 +65,10 @@ export class UmbRouteContext { } }, }; + */ + const registration = new UmbModalRouteRegistration(alias, options); + + console.log('Route Context Modal Registration', registration); this.#modalRegistrations.push(registration); this.#generateNewUrlBuilder(registration); this.#generateContextRoutes(); @@ -93,14 +83,28 @@ export class UmbRouteContext { } #getModalRoutePath(modalRegistration: UmbModalRouteRegistration) { - return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`; + return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`; } #generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute { return { path: this.#getModalRoutePath(modalRegistration), component: EmptyDiv, - setup: modalRegistration.routeSetup, + //setup: modalRegistration.routeSetup, + setup: (component: HTMLElement, info: IRoutingInfo) => { + if (!this.#modalContext) return; + const modalHandler = modalRegistration.routeSetup(this.#modalContext, info.match.params); + if (modalHandler) { + modalHandler.onSubmit().then( + () => { + this.#removeModalPath(info); + }, + () => { + this.#removeModalPath(info); + } + ); + } + }, }; } @@ -109,6 +113,8 @@ export class UmbRouteContext { return this.#generateRoute(modalRegistration); }); + // Add an empty route, so that we can always have a route to go to for closing the modals. + // TODO: Check if this is nesecary with the _internal_modalRouterChanged present. this.#contextRoutes.push({ path: '', component: EmptyDiv, @@ -123,9 +129,12 @@ export class UmbRouteContext { this.#routerBasePath = routerBasePath; this.#generateNewUrlBuilders(); } + // TODO: what is going on here, We need to make sure if the modals are still relevant then not close them. + // Also notice each registration should now hold its handler when its active. public _internal_modalRouterChanged(activeModalPath: string | undefined) { if (this.#activeModalPath === activeModalPath) return; if (this.#activeModalPath) { + // If if there is a modal using the old path. const activeModal = this.#modalRegistrations.find( (registration) => this.#getModalRoutePath(registration) === this.#activeModalPath ); @@ -144,7 +153,7 @@ export class UmbRouteContext { if (!modalRegistration.options.getUrlBuilder || !this.#routerBasePath) return; const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/'; - const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`; + const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`; const urlBuilder = (params: { [key: string]: string | number }) => { const localRoutePath = stripSlash( @@ -152,9 +161,11 @@ export class UmbRouteContext { return params[args[0]].toString(); }) ); + console.log('urlBuilder', params, localRoutePath); return routeBasePath + localRoutePath; }; + console.log('Provide new url builder', urlBuilder, modalRegistration.options.getUrlBuilder); modalRegistration.options.getUrlBuilder(urlBuilder); }; } 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 f43faafa36..6ceb4aedb5 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,6 +1,6 @@ import type { IRoute } from 'router-slot/model'; import { RouterSlot } from 'router-slot'; -import { css, PropertyValueMap } from 'lit'; +import { css, html, PropertyValueMap } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UmbLitElement } from '../lit-element'; import { UmbRouterSlotInitEvent } from './router-slot-init.event'; diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts index 94983c5ec9..748644267d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts @@ -74,6 +74,6 @@ export class UmbVariantRouterSlotElement extends UmbRouterSlotElement { declare global { interface HTMLElementTagNameMap { - 'umb-router-slot': UmbRouterSlotElement; + 'umb-variant-router-slot': UmbVariantRouterSlotElement; } }