Skip to content

Commit c18ec50

Browse files
iOvergaardiOvergaard
authored
Merge pull request #2080 from umbraco/v14/bugfix/correct-static-file-value
Bugfix: Correct static file values
2 parents 4c8e8f1 + 589fbe8 commit c18ec50

File tree

78 files changed

+315
-178
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+315
-178
lines changed

‎src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import '../block-grid-entries/index.js';
1212
@customElement('umb-block-grid-areas-container')
1313
export class UmbBlockGridAreasContainerElement extends UmbLitElement {
1414
//
15-
#styleElement?: HTMLLinkElement;
15+
@state()
16+
_styleElement?: HTMLLinkElement;
1617

1718
@state()
1819
_areas?: Array<UmbBlockGridTypeAreaType> = [];
@@ -44,9 +45,11 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
4445
this.observe(
4546
manager.layoutStylesheet,
4647
(stylesheet) => {
47-
this.#styleElement = document.createElement('link');
48-
this.#styleElement.setAttribute('rel', 'stylesheet');
49-
this.#styleElement.setAttribute('href', stylesheet);
48+
// Do not re-render stylesheet if its the same href.
49+
if (!stylesheet || this._styleElement?.href === stylesheet) return;
50+
this._styleElement = document.createElement('link');
51+
this._styleElement.rel = 'stylesheet';
52+
this._styleElement.href = stylesheet;
5053
},
5154
'observeStylesheet',
5255
);
@@ -55,7 +58,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
5558

5659
override render() {
5760
return this._areas && this._areas.length > 0
58-
? html` ${this.#styleElement}
61+
? html` ${this._styleElement}
5962
<div
6063
class="umb-block-grid__area-container"
6164
style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">

‎src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
2-
import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
31
import {
42
getAccumulatedValueOfIndex,
53
getInterpolatedIndexOfPositionInWeightMap,
64
isWithinRect,
75
} from '@umbraco-cms/backoffice/utils';
86
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
9-
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
107
import { html, customElement, state, repeat, css, property, nothing } from '@umbraco-cms/backoffice/external/lit';
118
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
129
import '../block-grid-entry/index.js';
@@ -17,6 +14,9 @@ import {
1714
type UmbFormControlValidatorConfig,
1815
} from '@umbraco-cms/backoffice/validation';
1916
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
17+
import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
18+
import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
19+
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
2020

2121
/**
2222
* Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
@@ -209,10 +209,10 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
209209
this.observe(
210210
manager.layoutStylesheet,
211211
(stylesheet) => {
212-
if (this._styleElement && this._styleElement.href === stylesheet) return;
212+
if (!stylesheet || this._styleElement?.href === stylesheet) return;
213213
this._styleElement = document.createElement('link');
214-
this._styleElement.setAttribute('rel', 'stylesheet');
215-
this._styleElement.setAttribute('href', stylesheet);
214+
this._styleElement.rel = 'stylesheet';
215+
this._styleElement.href = stylesheet;
216216
},
217217
'observeStylesheet',
218218
);

‎src/packages/block/block-grid/context/block-grid-manager.context.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
22
import type { UmbBlockGridWorkspaceData } from '../index.js';
33
import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '@umbraco-cms/backoffice/observable-api';
4+
import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
5+
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
6+
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
7+
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
48
import { type UmbBlockDataType, UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
59
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
610

@@ -13,24 +17,49 @@ export class UmbBlockGridManagerContext<
1317
BlockLayoutType extends UmbBlockGridLayoutModel = UmbBlockGridLayoutModel,
1418
> extends UmbBlockManagerContext<UmbBlockGridTypeModel, UmbBlockGridLayoutModel> {
1519
//
20+
#initAppUrl: Promise<void>;
21+
#appUrl?: string;
1622
#blockGroups = new UmbArrayState(<Array<UmbBlockTypeGroup>>[], (x) => x.key);
1723
public readonly blockGroups = this.#blockGroups.asObservable();
1824

19-
layoutStylesheet = this._editorConfiguration.asObservablePart(
20-
(x) => (x?.getValueByAlias('layoutStylesheet') as string) ?? UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET,
21-
);
25+
layoutStylesheet = this._editorConfiguration.asObservablePart((x) => {
26+
if (!x) return undefined;
27+
const layoutStylesheet = x.getValueByAlias<string>('layoutStylesheet');
28+
if (!layoutStylesheet) return UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET;
29+
30+
if (layoutStylesheet) {
31+
// Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
32+
return this.#appUrl! + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
33+
}
34+
return undefined;
35+
});
2236
gridColumns = this._editorConfiguration.asObservablePart((x) => {
2337
const value = x?.getValueByAlias('gridColumns') as string | undefined;
2438
return parseInt(value && value !== '' ? value : '12');
2539
});
2640

41+
override setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
42+
this.#initAppUrl.then(() => {
43+
// we await initAppUrl, So the appUrl begin here is available when retrieving the layoutStylesheet.
44+
this._editorConfiguration.setValue(configs);
45+
});
46+
}
47+
2748
setBlockGroups(blockGroups: Array<UmbBlockTypeGroup>) {
2849
this.#blockGroups.setValue(blockGroups);
2950
}
3051
getBlockGroups() {
3152
return this.#blockGroups.value;
3253
}
3354

55+
constructor(host: UmbControllerHost) {
56+
super(host);
57+
58+
this.#initAppUrl = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
59+
this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
60+
});
61+
}
62+
3463
create(
3564
contentElementTypeKey: string,
3665
partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>,

‎src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ export const manifests: Array<ManifestTypes> = [
5555
label: 'Layout Stylesheet',
5656
description: 'Override default stylesheet for backoffice layout.',
5757
propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
58+
config: [
59+
{
60+
alias: 'singleItemMode',
61+
value: true,
62+
},
63+
],
5864
},
5965
],
6066
},

‎src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
2-
import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
31
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
42
import { html, customElement, property, state, css, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
53
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
64
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
75
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
8-
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
9-
import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
106
import '../../components/block-grid-entries/index.js';
117
import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
128
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
139
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
10+
import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
11+
import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
12+
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
13+
import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
1414

1515
/**
1616
* @element umb-property-editor-ui-block-grid

‎src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,69 @@
33
import type { UmbInputStaticFileElement } from '@umbraco-cms/backoffice/static-file';
44

55
import '@umbraco-cms/backoffice/static-file';
6-
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
6+
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
77
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
88
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
99
import {
1010
UmbPropertyValueChangeEvent,
1111
type UmbPropertyEditorConfigCollection,
1212
} from '@umbraco-cms/backoffice/property-editor';
1313
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
14+
import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
15+
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
1416

1517
@customElement('umb-property-editor-ui-block-grid-layout-stylesheet')
1618
export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
1719
extends UmbLitElement
1820
implements UmbPropertyEditorUiElement
1921
{
20-
private _value: Array<string> = [];
22+
#pickableFilter = (item: any) => item.unique.endsWith('css');
23+
#singleItemMode = false;
24+
// TODO: get rid of UmbServerFilePathUniqueSerializer in v.15 [NL]
25+
#serverFilePathUniqueSerializer = new UmbServerFilePathUniqueSerializer();
2126

22-
@property({ type: Array })
23-
public set value(value: Array<string>) {
24-
this._value = value || [];
27+
@state()
28+
private _value?: string | Array<string>;
29+
30+
@property({ attribute: false })
31+
public set value(value: string | Array<string> | undefined) {
32+
if (Array.isArray(value)) {
33+
this._value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique));
34+
} else if (value) {
35+
this._value = this.#serverFilePathUniqueSerializer.toUnique(value);
36+
} else {
37+
this._value = undefined;
38+
}
2539
}
26-
public get value(): Array<string> {
27-
return this._value;
40+
public get value(): string | Array<string> | undefined {
41+
if (Array.isArray(this._value)) {
42+
return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique) ?? '');
43+
} else if (this._value) {
44+
return this.#serverFilePathUniqueSerializer.toServerPath(this._value) ?? '';
45+
} else {
46+
return undefined;
47+
}
2848
}
2949

30-
private _pickableFilter = (item: any) => item.unique.endsWith('css');
50+
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
51+
this.#singleItemMode = config?.getValueByAlias<boolean>('singleItemMode') ?? false;
52+
const validationLimit = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
3153

32-
@property({ attribute: false })
33-
public config?: UmbPropertyEditorConfigCollection;
54+
this._limitMin = validationLimit?.min ?? 0;
55+
this._limitMax = this.#singleItemMode ? 1 : validationLimit?.max ?? Infinity;
56+
}
57+
58+
@state()
59+
private _limitMin: number = 0;
60+
@state()
61+
private _limitMax: number = Infinity;
3462

3563
private _onChange(event: CustomEvent) {
36-
this.value = (event.target as UmbInputStaticFileElement).selection;
64+
if (this.#singleItemMode) {
65+
this._value = (event.target as UmbInputStaticFileElement).selection[0];
66+
} else {
67+
this._value = (event.target as UmbInputStaticFileElement).selection;
68+
}
3769
this.dispatchEvent(new UmbPropertyValueChangeEvent());
3870
}
3971

@@ -42,10 +74,10 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
4274
return html`
4375
<umb-input-static-file
4476
@change=${this._onChange}
45-
.pickableFilter=${this._pickableFilter}
46-
.selection=${this._value}
47-
.min=${0}
48-
.max=${1}></umb-input-static-file>
77+
.pickableFilter=${this.#pickableFilter}
78+
.selection=${this._value ? (Array.isArray(this._value) ? this._value : [this._value]) : []}
79+
.min=${this._limitMin}
80+
.max=${this._limitMax}></umb-input-static-file>
4981
<br />
5082
<a href="/umbraco/backoffice/assets/css/umbraco-blockgridlayout.css">Link to default layout stylesheet</a>
5183
`;

‎src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
88
override render() {
99
return html`
1010
<uui-box headline="Advanced">
11-
<umb-property
12-
label="Custom view"
13-
alias="view"
14-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
15-
<umb-property
16-
label="Custom stylesheet"
17-
alias="stylesheet"
18-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
1911
<umb-property
2012
label="Overlay size"
2113
alias="editorSize"
@@ -41,7 +33,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
4133
<umb-property
4234
label="Thumbnail"
4335
alias="thumbnail"
44-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
36+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
37+
.config=${[
38+
{
39+
alias: 'singleItemMode',
40+
value: true,
41+
},
42+
]}></umb-property>
4543
</uui-box>
4644
`;
4745
}

‎src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
1212
label="Label"
1313
alias="label"
1414
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
15-
<!--<umb-property
16-
label="Custom view"
17-
alias="view"
18-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
19-
<umb-property
20-
label="Custom stylesheet"
21-
alias="stylesheet"
22-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>-->
2315
<umb-property
2416
label="Overlay size"
2517
alias="editorSize"
@@ -67,9 +59,15 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
6759
alias="iconColor"
6860
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
6961
<umb-property
70-
label="Custom stylesheet"
71-
alias="stylesheet"
72-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
62+
label="Thumbnail"
63+
alias="thumbnail"
64+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
65+
.config=${[
66+
{
67+
alias: 'singleItemMode',
68+
value: true,
69+
},
70+
]}></umb-property>
7371
</uui-box>
7472
<uui-box headline="Advanced">
7573
<umb-property

‎src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,15 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
6363
alias="iconColor"
6464
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
6565
<umb-property
66-
label="Custom stylesheet"
67-
alias="stylesheet"
68-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
66+
label="Thumbnail"
67+
alias="thumbnail"
68+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
69+
.config=${[
70+
{
71+
alias: 'singleItemMode',
72+
value: true,
73+
},
74+
]}></umb-property>
6975
</uui-box>
7076
`;
7177
}

0 commit comments

Comments
 (0)