diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index a6468f4f6c..a212371ec1 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -820,6 +820,7 @@ export default { logout: 'Logout', macro: 'Macro', mandatory: 'Mandatory', + manifest: 'Manifest', media: 'Media', message: 'Message', move: 'Move', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index f1b6833566..95c5df5eee 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -831,6 +831,7 @@ export default { logout: 'Logout', macro: 'Macro', mandatory: 'Mandatory', + manifest: 'Manifest', message: 'Message', move: 'Move', name: 'Name', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts index 4fe1db856c..b41533ef53 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts @@ -1,10 +1,15 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { html, customElement, state, property, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; -import { umbExtensionsRegistry, type ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry'; +import { + UMB_MANIFEST_VIEWER_MODAL, + umbExtensionsRegistry, + type ManifestBlockEditorCustomView, +} from '@umbraco-cms/backoffice/extension-registry'; import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api'; import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; @customElement('umb-block-type-custom-view-guide') export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement { @@ -77,13 +82,20 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement { return true; }; + async #viewManifest(manifest: ManifestBlockEditorCustomView) { + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest }); + } + override render() { return this._manifests && this._manifests.length > 0 ? html`
${repeat( this._manifests, (x) => x.alias, - (x) => html` `, + (x) => html` + this.#viewManifest(x)} .manifest=${x}> + `, )}
` : html`No custom view matches the current block editor type and content type.`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/index.ts index 653c14e841..9a964efe55 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/index.ts @@ -1,2 +1 @@ -export * from './composition-picker-modal.element.js'; export * from './composition-picker-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/manifest.ts new file mode 100644 index 0000000000..e743da34a9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/composition-picker/manifest.ts @@ -0,0 +1,8 @@ +import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestModal = { + type: 'modal', + alias: 'Umb.Modal.CompositionPicker', + name: 'ContentType Composition Picker Modal', + element: () => import('./composition-picker-modal.element.js'), +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts index 516bbb553f..a0372901b3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts @@ -1,12 +1,3 @@ -import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; +import { manifest } from './composition-picker/manifest.js'; -const modals: Array = [ - { - type: 'modal', - alias: 'Umb.Modal.CompositionPicker', - name: 'ContentType Composition Picker Modal', - element: () => import('./composition-picker/composition-picker-modal.element.js'), - }, -]; - -export const manifests = modals; +export const manifests = [manifest]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts index 017d4122e2..4987fe24c9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts @@ -1,5 +1,6 @@ export * from './conditions/index.js'; export * from './initializers/index.js'; +export * from './modals/manifest-viewer/index.js'; export * from './registry.js'; export * from './utils/index.js'; export type * from './interfaces/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/manifests.ts index dd1a2d6e84..7025355d5b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/manifests.ts @@ -3,6 +3,7 @@ import { manifests as menuItemManifests } from './menu-item/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; import { manifests as collectionManifests } from './collection/manifests.js'; import { manifests as entityActionManifests } from './entity-actions/manifests.js'; +import { manifest as modalManifest } from './modals/manifest-viewer/manifest.js'; import type { ManifestTypes } from './models/index.js'; export const manifests: Array = [ @@ -11,4 +12,5 @@ export const manifests: Array = [ ...workspaceManifests, ...collectionManifests, ...entityActionManifests, + modalManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/index.ts new file mode 100644 index 0000000000..89988a329e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/index.ts @@ -0,0 +1,2 @@ +export * from './manifest-viewer-modal.token.js'; +export * from './manifest.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.element.ts new file mode 100644 index 0000000000..47100de84a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.element.ts @@ -0,0 +1,35 @@ +import type { UmbManifestViewerModalData, UmbManifestViewerModalValue } from './manifest-viewer-modal.token.js'; +import { css, html, customElement, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; + +@customElement('umb-manifest-viewer-modal') +export class UmbManifestViewerModalElement extends UmbModalBaseElement< + UmbManifestViewerModalData, + UmbManifestViewerModalValue +> { + override render() { + console.log('data', this.data); + return html` + + ${this.data + ? html`${JSON.stringify(this.data, null, 2)}` + : nothing} +
+ +
+ + `; + } + + static override styles = [css``]; +} + +export default UmbManifestViewerModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-manifest-viewer-modal': UmbManifestViewerModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.token.ts new file mode 100644 index 0000000000..96fb68b015 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest-viewer-modal.token.ts @@ -0,0 +1,16 @@ +import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api'; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbManifestViewerModalData extends ManifestBase {} + +export type UmbManifestViewerModalValue = undefined; + +export const UMB_MANIFEST_VIEWER_MODAL = new UmbModalToken( + 'Umb.Modal.ManifestViewer', + { + modal: { + type: 'sidebar', + size: 'medium', + }, + }, +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest.ts new file mode 100644 index 0000000000..db4ef7f807 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/modals/manifest-viewer/manifest.ts @@ -0,0 +1,8 @@ +import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifest: ManifestModal = { + type: 'modal', + alias: 'Umb.Modal.ManifestViewer', + name: 'Manifest Viewer Modal', + element: () => import('./manifest-viewer-modal.element.js'), +};