yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

props update approach

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-13 15:30:21 +01:00
parent 18dfa72fe0
commit c47263429c
3 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
View File

@@ -15,7 +15,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
return modelEntry.contentUdi; return modelEntry.contentUdi;
}, },
identifier: 'block-grid-editor', identifier: 'block-grid-editor',
itemSelector: '.umb-block-grid__layout-item', itemSelector: 'umb-block-grid-entry',
//ignorerSelector: '', // No ignorerSelector, as we want to ignore nothing. //ignorerSelector: '', // No ignorerSelector, as we want to ignore nothing.
//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT', //containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
}; };

19
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
View File

@@ -64,6 +64,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
@state() @state()
_blockViewProps: UmbBlockViewPropsType<UmbBlockGridLayoutModel> = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render. _blockViewProps: UmbBlockViewPropsType<UmbBlockGridLayoutModel> = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
#updateBlockViewProps(incoming: Partial<UmbBlockViewPropsType<UmbBlockGridLayoutModel>>) {
this._blockViewProps = { ...this._blockViewProps, ...incoming };
this.requestUpdate('_blockViewProps');
}
constructor() { constructor() {
super(); super();
@@ -75,19 +80,19 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
this._hasSettings = !!settingsElementTypeKey; this._hasSettings = !!settingsElementTypeKey;
}); });
this.observe(this.#context.label, (label) => { this.observe(this.#context.label, (label) => {
this._blockViewProps.label = label; this.#updateBlockViewProps({ label });
this._label = label; this._label = label;
}); });
// Data: // Data:
this.observe(this.#context.layout, (layout) => { this.observe(this.#context.layout, (layout) => {
this._blockViewProps.layout = layout; this.#updateBlockViewProps({ layout });
}); });
this.observe(this.#context.content, (content) => { this.observe(this.#context.content, (content) => {
this._blockViewProps.content = content; this.#updateBlockViewProps({ content });
}); });
this.observe(this.#context.settings, (settings) => { this.observe(this.#context.settings, (settings) => {
this._blockViewProps.settings = settings; this.#updateBlockViewProps({ settings });
}); });
// Paths: // Paths:
@@ -98,13 +103,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
}); });
this.observe(this.#context.workspaceEditContentPath, (path) => { this.observe(this.#context.workspaceEditContentPath, (path) => {
this._workspaceEditContentPath = path; this._workspaceEditContentPath = path;
this._blockViewProps.urls.editContent = path; this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editContent: path } });
this.requestUpdate('_blockViewProps');
}); });
this.observe(this.#context.workspaceEditSettingsPath, (path) => { this.observe(this.#context.workspaceEditSettingsPath, (path) => {
this._workspaceEditSettingsPath = path; this._workspaceEditSettingsPath = path;
this._blockViewProps.urls.editSettings = path; this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editSettings: path } });
this.requestUpdate('_blockViewProps');
}); });
} }

7
src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
View File

@@ -51,7 +51,8 @@ function destroyIgnorerElements(element: HTMLElement, ignorerSelectors: string)
}); });
} }
function setupPreventEvent(element: Element) { function setupPreventEvent(element: Element) {
(element as HTMLElement).draggable = false; //(element as HTMLElement).draggable = false;
(element as HTMLElement).setAttribute('draggable', 'false');
} }
function destroyPreventEvent(element: Element) { function destroyPreventEvent(element: Element) {
element.removeAttribute('draggable'); element.removeAttribute('draggable');
@@ -277,7 +278,9 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
} }
if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) { if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
element.draggable = true; console.log('— setup', element);
//element.draggable = true;
(element as HTMLElement).setAttribute('draggable', 'true');
element.addEventListener('dragstart', this.#handleDragStart); element.addEventListener('dragstart', this.#handleDragStart);
element.addEventListener('dragend', this.#handleDragEnd); element.addEventListener('dragend', this.#handleDragEnd);
} }