From da44b409e3a94b880cf3c280bed6eccd4616a680 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 9 Mar 2023 15:18:30 +0100 Subject: [PATCH] register search modal --- .../libs/modal/modal-handler.ts | 4 ++-- .../libs/modal/modal.context.ts | 11 ++++++----- .../libs/modal/token/modal-token.ts | 4 ++-- .../src/backoffice/search/modals/manifests.ts | 12 ++++++++++++ .../src/backoffice/search/modals/search/index.ts | 3 +++ .../search/modals/search/search-modal.element.ts} | 8 ++++---- 6 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts rename src/Umbraco.Web.UI.Client/{libs/modal/layouts/search/modal-layout-search.element.ts => src/backoffice/search/modals/search/search-modal.element.ts} (97%) 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 742d83c2b1..16384079f3 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -37,8 +37,8 @@ export class UmbModalHandler { this.key = uuidv4(); if (modalAlias instanceof UmbModalToken) { - this.type = modalAlias.getDefaultConfig().type || this.type; - this.size = modalAlias.getDefaultConfig().size || this.size; + this.type = modalAlias.getDefaultConfig()?.type || this.type; + this.size = modalAlias.getDefaultConfig()?.size || this.size; } this.type = config?.type || this.type; 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 ecdc6985b8..70430dff05 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -1,4 +1,4 @@ -import './layouts/search/modal-layout-search.element'; +import '../../src/backoffice/search/modals/search/search-modal.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject } from 'rxjs'; @@ -27,8 +27,9 @@ export class UmbModalContext { this.host = host; } + // TODO: Remove this when the modal system is more flexible public search(): UmbModalHandler { - const modalHandler = new UmbModalHandler('umb-modal-layout-search'); + const modalHandler = new UmbModalHandler(this.host, 'Umb.Modal.Search'); //TODO START: This is a hack to get the search modal layout to look like i want it to. //TODO: Remove from here to END when the modal system is more flexible @@ -48,15 +49,15 @@ export class UmbModalContext { dialog.style.padding = '0'; dialog.style.boxShadow = 'var(--uui-shadow-depth-5)'; dialog.style.borderRadius = '9px'; - const search = document.createElement('umb-modal-layout-search'); + const search = document.createElement('umb-search-modal'); dialog.appendChild(search); requestAnimationFrame(() => { dialog.showModal(); }); - modalHandler.element = dialog as unknown as UUIModalDialogElement; + modalHandler.containerElement = dialog as unknown as UUIModalDialogElement; //TODO END - modalHandler.element.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); + modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); this.#modals.next([...this.#modals.getValue(), modalHandler]); return modalHandler; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts index 784dc5becb..b038ec3fe7 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts @@ -19,7 +19,7 @@ export class UmbModalToken { * used only for debugging purposes, * it should but does not need to be unique */ - constructor(protected alias: string, protected defaultConfig: UmbModalConfig, protected _desc?: string) {} + constructor(protected alias: string, protected defaultConfig?: UmbModalConfig, protected _desc?: string) {} /** * This method must always return the unique alias of the token since that @@ -31,7 +31,7 @@ export class UmbModalToken { return this.alias; } - public getDefaultConfig(): UmbModalConfig { + public getDefaultConfig(): UmbModalConfig | undefined { return this.defaultConfig; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts new file mode 100644 index 0000000000..7765c306fc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts @@ -0,0 +1,12 @@ +import type { ManifestModal } from '@umbraco-cms/extensions-registry'; + +const modals: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.Search', + name: 'Search Modal', + loader: () => import('./search/search-modal.element'), + }, +]; + +export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts new file mode 100644 index 0000000000..bb882569b4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts @@ -0,0 +1,3 @@ +import { UmbModalToken } from 'libs/modal'; + +export const UMB_SEARCH_MODAL_TOKEN = new UmbModalToken('Umb.Modal.Search'); diff --git a/src/Umbraco.Web.UI.Client/libs/modal/layouts/search/modal-layout-search.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts similarity index 97% rename from src/Umbraco.Web.UI.Client/libs/modal/layouts/search/modal-layout-search.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts index df4ef06d2f..b294c49eda 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/layouts/search/modal-layout-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts @@ -14,8 +14,8 @@ export type SearchGroupItem = { name: string; items: Array; }; -@customElement('umb-modal-layout-search') -export class UmbModalLayoutSearchElement extends LitElement { +@customElement('umb-search-modal') +export class UmbSearchModalElement extends LitElement { static styles = [ UUITextStyles, css` @@ -308,10 +308,10 @@ export class UmbModalLayoutSearchElement extends LitElement { ]; } -export default UmbModalLayoutSearchElement; +export default UmbSearchModalElement; declare global { interface HTMLElementTagNameMap { - 'umb-modal-layout-search': UmbModalLayoutSearchElement; + 'umb-search-modal': UmbSearchModalElement; } }