From 940d9958791c8a8e7366cd2d56e4f45404f233a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Feb 2024 09:59:28 +0100 Subject: [PATCH] area grid columns + more bindings --- .../block-grid-areas-container.element.ts | 14 ++++++- .../block-grid-entry.element.ts | 18 +++++---- .../context/block-grid-entries.context.ts | 38 +++++++++++++++++-- .../context/block-grid-entry.context.ts | 6 +++ ...-grid-type-workspace-view-areas.element.ts | 4 +- 5 files changed, 66 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts index b0d28229d1..ddff32632d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts @@ -15,6 +15,9 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement { @state() _areas?: Array = []; + @state() + _areaGridColumns?: number; + constructor() { super(); @@ -26,6 +29,13 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement { }, 'observeAreas', ); + this.observe( + context.areaGridColumns, + (areaGridColumns) => { + this._areaGridColumns = areaGridColumns; + }, + 'observeAreaGridColumns', + ); }); this.consumeContext(UMB_BLOCK_GRID_MANAGER_CONTEXT, (manager) => { this.observe( @@ -43,7 +53,9 @@ export class UmbBlockGridAreaContainerElement extends UmbLitElement { render() { return this._areas ? html` ${this.#styleElement} -
+
${repeat( this._areas, (area) => area.key, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index f040cc9f37..929e62e846 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -1,6 +1,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js'; -import { html, css, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import '../ref-grid-block/index.js'; import type { UmbBlockGridLayoutModel, UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block'; @@ -67,11 +67,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper constructor() { super(); - this.observe(this.#context.createPath, (createPath) => { - const oldValue = this._createPath; - this._createPath = createPath; - this.requestUpdate('_createPath', oldValue); - }); + // Misc: this.observe(this.#context.showContentEdit, (showContentEdit) => { this._showContentEdit = showContentEdit; }); @@ -82,7 +78,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper this._blockViewProps.label = label; this._label = label; }); - // Data props: + + // Data: this.observe(this.#context.layout, (layout) => { this._blockViewProps.layout = layout; }); @@ -92,6 +89,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper this.observe(this.#context.settings, (settings) => { this._blockViewProps.settings = settings; }); + + // Paths: + this.observe(this.#context.createPath, (createPath) => { + const oldValue = this._createPath; + this._createPath = createPath; + this.requestUpdate('_createPath', oldValue); + }); this.observe(this.#context.workspaceEditContentPath, (path) => { this._workspaceEditContentPath = path; this._blockViewProps.urls.editContent = path; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts index 92542b506b..b86190ead8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts @@ -40,7 +40,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< this.#retrieveParentEntry = this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (blockGridEntry) => { this.#parentEntry = blockGridEntry; - //this.#gotBlockParentEntry();// is not used at this point. + this.#gotBlockParentEntry(); // is not used at this point. }).asPromise(); this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL) @@ -89,7 +89,12 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< if (!this.#parentEntry) return; }*/ - async #gotAreaKey() { + #gotAreaKey() { + if (this.#areaKey === undefined) return; + this.#gotBlockParentEntry(); + } + + async #gotBlockParentEntry() { if (this.#areaKey === undefined) return; if (this.#areaKey === null) { @@ -112,9 +117,19 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< }, 'observeThisLayouts', ); + + this.removeControllerByAlias('observeAreaType'); + + const hostEl = this.getHostElement() as HTMLElement | undefined; + if (hostEl) { + hostEl.removeAttribute('data-area-alias'); + hostEl.removeAttribute('data-area-col-span'); + hostEl.removeAttribute('data-area-row-span'); + hostEl.style.removeProperty('--umb-block-grid--grid-columns'); + hostEl.style.removeProperty('--umb-block-grid--area-column-span'); + hostEl.style.removeProperty('--umb-block-grid--area-row-span'); + } } else { - // entries of a area: - await this.#retrieveParentEntry; if (!this.#parentEntry) return; this.observe( @@ -141,6 +156,21 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext< }, 'observeThisLayouts', ); + + this.observe( + this.#parentEntry.areaType(this.#areaKey), + (areaType) => { + const hostEl = this.getHostElement() as HTMLElement | undefined; + if (!hostEl) return; + hostEl.setAttribute('data-area-alias', areaType?.alias ?? ''); + hostEl.setAttribute('data-area-col-span', areaType?.colSpan ?? ''); + hostEl.setAttribute('data-area-row-span', areaType?.rowSpan ?? ''); + hostEl.style.setProperty('--umb-block-grid--grid-columns', areaType?.colSpan ?? ''); + hostEl.style.setProperty('--umb-block-grid--area-column-span', areaType?.colSpan ?? ''); + hostEl.style.setProperty('--umb-block-grid--area-row-span', areaType?.rowSpan ?? ''); + }, + 'observeAreaType', + ); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts index 0047122f29..c19e223930 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts @@ -18,6 +18,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext< // columnSpan = this._layout.asObservablePart((x) => x?.columnSpan); rowSpan = this._layout.asObservablePart((x) => x?.rowSpan ?? 1); + areaGridColumns = this._blockType.asObservablePart((x) => x?.areaGridColumns ?? ''); areas = this._layout.asObservablePart((x) => x?.areas ?? []); readonly showContentEdit = this._blockType.asObservablePart((x) => !x?.forceHideContentEditorInOverlay); @@ -30,6 +31,11 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext< return this._layout.asObservablePart((x) => x?.areas.find((x) => x.key === areaKey)?.items ?? []); } + areaType(areaKey: string) { + console.log('areaKey', areaKey); + return this._blockType.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey)); + } + setLayoutsOfArea(areaKey: string, layouts: UmbBlockGridLayoutModel[]) { const frozenValue = this._layout.value; if (!frozenValue) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts index fece05839f..b421574817 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts @@ -1,6 +1,6 @@ +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-block-grid-type-workspace-view-areas') @@ -10,7 +10,7 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp