Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Commit 107e9de

Browse files
loivsenloivsen
committed
extend from original element
1 parent 70b4f06 commit 107e9de

File tree

2 files changed

+43
-181
lines changed

2 files changed

+43
-181
lines changed

‎src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
7979
}
8080
}
8181

82-
#onCropClick(crop: any) {
82+
protected onCropClick(crop: any) {
8383
const index = this.crops.findIndex((c) => c.alias === crop.alias);
8484

8585
if (index === -1) return;
@@ -117,19 +117,19 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
117117
this.dispatchEvent(new UmbChangeEvent());
118118
}
119119

120-
#onResetFocalPoint = () => {
120+
protected onResetFocalPoint = () => {
121121
this.focalPoint = { left: 0.5, top: 0.5 };
122122
this.#updateValue();
123123
};
124124

125125
render() {
126126
return html`
127-
<div id="main">${this.#renderMain()}</div>
128-
<div id="side">${this.#renderSide()}</div>
127+
<div id="main">${this.renderMain()}</div>
128+
<div id="side">${this.renderSide()}</div>
129129
`;
130130
}
131131

132-
#renderMain() {
132+
protected renderMain() {
133133
if (this.currentCrop) {
134134
return html`
135135
<umb-image-cropper
@@ -149,28 +149,30 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
149149
?hideFocalPoint=${this.hideFocalPoint}
150150
@change=${this.#onFocalPointChange}>
151151
</umb-image-cropper-focus-setter>
152-
<div id="actions">
153-
<slot name="actions"></slot>
154-
${when(
155-
!this.hideFocalPoint,
156-
() =>
157-
html`<uui-button
158-
label=${this.localize.term('content_resetFocalPoint')}
159-
@click=${this.#onResetFocalPoint}></uui-button>`,
160-
)}
161-
</div>
152+
<div id="actions">${this.renderActions()}</div>
162153
`;
163154
}
164155

165-
#renderSide() {
156+
protected renderActions() {
157+
return html`<slot name="actions"></slot>
158+
${when(
159+
!this.hideFocalPoint,
160+
() =>
161+
html`<uui-button
162+
label=${this.localize.term('content_resetFocalPoint')}
163+
@click=${this.onResetFocalPoint}></uui-button>`,
164+
)} `;
165+
}
166+
167+
protected renderSide() {
166168
if (!this.value || !this.crops) return;
167169

168170
return repeat(
169171
this.crops,
170172
(crop) => crop.alias + JSON.stringify(crop.coordinates),
171173
(crop) =>
172174
html` <umb-image-cropper-preview
173-
@click=${() => this.#onCropClick(crop)}
175+
@click=${() => this.onCropClick(crop)}
174176
.crop=${crop}
175177
.focalPoint=${this.focalPoint}
176178
.src=${this.source}></umb-image-cropper-preview>`,
@@ -184,6 +186,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
184186
gap: var(--uui-size-space-3);
185187
height: 400px;
186188
}
189+
187190
#main {
188191
max-width: 500px;
189192
min-width: 300px;
@@ -193,13 +196,16 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
193196
gap: var(--uui-size-space-1);
194197
flex-direction: column;
195198
}
199+
196200
#actions {
197201
display: flex;
198202
justify-content: space-between;
199203
}
204+
200205
umb-image-cropper-focus-setter {
201206
height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
202207
}
208+
203209
#side {
204210
display: grid;
205211
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

‎src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts‎

Lines changed: 20 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,31 @@
1-
import type {
2-
UmbImageCropperCrop,
3-
UmbImageCropperCrops,
4-
UmbImageCropperFocalPoint,
5-
UmbImageCropperPropertyEditorValue,
6-
} from '../../../components/index.js';
7-
import type { UmbImageCropperElement } from '../../../components/input-image-cropper/image-cropper.element.js';
8-
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
9-
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
10-
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
1+
import { UmbInputImageCropperFieldElement } from '../../../components/input-image-cropper/image-cropper-field.element.js';
2+
import { css, customElement, html, repeat, when } from '@umbraco-cms/backoffice/external/lit';
113

12-
/** TODO Do we want to combine this with the original image-cropper-field element? Element is very similar, but with a few UI changes... */
134
@customElement('umb-image-cropper-editor-field')
14-
export class UmbImageCropperEditorFieldElement extends UmbLitElement {
15-
@property({ attribute: false })
16-
get value() {
17-
return this.#value;
18-
}
19-
set value(value) {
20-
if (!value) {
21-
this.crops = [];
22-
this.focalPoint = { left: 0.5, top: 0.5 };
23-
this.src = '';
24-
this.#value = undefined;
25-
} else {
26-
this.crops = [...value.crops];
27-
// TODO: This is a temporary solution to make sure we have a focal point
28-
this.focalPoint = value.focalPoint || { left: 0.5, top: 0.5 };
29-
this.src = value.src;
30-
this.#value = value;
31-
}
32-
33-
this.requestUpdate();
34-
}
35-
#value?: UmbImageCropperPropertyEditorValue;
36-
37-
@state()
38-
crops: UmbImageCropperCrops = [];
39-
40-
@state()
41-
currentCrop?: UmbImageCropperCrop;
42-
43-
@property({ attribute: false })
44-
file?: File;
45-
46-
@property()
47-
fileDataUrl?: string;
48-
49-
@state()
50-
focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
51-
52-
@property({ type: Boolean })
53-
hideFocalPoint = false;
54-
55-
@state()
56-
src = '';
57-
58-
get source() {
59-
if (this.fileDataUrl) return this.fileDataUrl;
60-
if (this.src) return this.src;
61-
return '';
62-
}
63-
64-
updated(changedProperties: Map<string | number | symbol, unknown>) {
65-
super.updated(changedProperties);
66-
67-
if (changedProperties.has('file')) {
68-
if (this.file) {
69-
const reader = new FileReader();
70-
reader.onload = (event) => {
71-
this.fileDataUrl = event.target?.result as string;
72-
};
73-
reader.readAsDataURL(this.file);
74-
} else {
75-
this.fileDataUrl = undefined;
76-
}
77-
}
78-
}
79-
80-
#onCropClick(crop: any) {
81-
const index = this.crops.findIndex((c) => c.alias === crop.alias);
82-
83-
if (index === -1) return;
84-
85-
this.currentCrop = { ...this.crops[index] };
86-
}
87-
88-
#onCropChange = (event: CustomEvent) => {
89-
const target = event.target as UmbImageCropperElement;
90-
const value = target.value;
91-
92-
if (!value) return;
93-
94-
const index = this.crops.findIndex((crop) => crop.alias === value.alias);
95-
96-
if (index === undefined) return;
97-
98-
this.crops[index] = value;
5+
export class UmbImageCropperEditorFieldElement extends UmbInputImageCropperFieldElement {
6+
#resetCurrentCrop() {
997
this.currentCrop = undefined;
100-
this.#updateValue();
101-
};
102-
103-
#onFocalPointChange = (event: CustomEvent) => {
104-
this.focalPoint = event.detail;
105-
this.#updateValue();
106-
};
107-
108-
#updateValue() {
109-
this.#value = {
110-
crops: [...this.crops],
111-
focalPoint: this.focalPoint,
112-
src: this.src,
113-
};
114-
115-
this.dispatchEvent(new UmbChangeEvent());
116-
}
117-
118-
#onResetFocalPoint = () => {
119-
this.focalPoint = { left: 0.5, top: 0.5 };
120-
this.#updateValue();
121-
};
122-
123-
render() {
124-
return html`
125-
<div id="main">${this.#renderMain()}</div>
126-
<div id="side">${this.#renderSide()}</div>
127-
`;
1288
}
1299

130-
#renderMain() {
131-
if (this.currentCrop) {
132-
return html`
133-
<umb-image-cropper
134-
.focalPoint=${this.focalPoint}
135-
.src=${this.source}
136-
.value=${this.currentCrop}
137-
?hideFocalPoint=${this.hideFocalPoint}
138-
@change=${this.#onCropChange}>
139-
</umb-image-cropper>
140-
`;
141-
}
142-
10+
renderActions() {
14311
return html`
144-
<umb-image-cropper-focus-setter
145-
.focalPoint=${this.focalPoint}
146-
.src=${this.source}
147-
?hideFocalPoint=${this.hideFocalPoint}
148-
@change=${this.#onFocalPointChange}>
149-
</umb-image-cropper-focus-setter>
150-
<div id="actions">
151-
<slot name="actions"></slot>
152-
${when(
153-
!this.hideFocalPoint,
154-
() =>
155-
html`<uui-button
156-
compact
157-
id="reset-focal-point"
158-
label=${this.localize.term('content_resetFocalPoint')}
159-
@click=${this.#onResetFocalPoint}>
160-
<uui-icon name="icon-axis-rotation"></uui-icon>
161-
${this.localize.term('content_resetFocalPoint')}
162-
</uui-button>`,
163-
)}
164-
</div>
12+
<slot name="actions"></slot>
13+
${when(
14+
!this.hideFocalPoint,
15+
() =>
16+
html`<uui-button
17+
compact
18+
id="reset-focal-point"
19+
label=${this.localize.term('content_resetFocalPoint')}
20+
@click=${this.onResetFocalPoint}>
21+
<uui-icon name="icon-axis-rotation"></uui-icon>
22+
${this.localize.term('content_resetFocalPoint')}
23+
</uui-button>`,
24+
)}
16525
`;
16626
}
16727

168-
#renderSide() {
28+
renderSide() {
16929
if (!this.value || !this.crops) return;
17030

17131
return html` <uui-menu-item
@@ -180,17 +40,13 @@ export class UmbImageCropperEditorFieldElement extends UmbLitElement {
18040
(crop) =>
18141
html` <umb-image-cropper-preview
18242
?active=${this.currentCrop?.alias === crop.alias}
183-
@click=${() => this.#onCropClick(crop)}
43+
@click=${() => this.onCropClick(crop)}
18444
.crop=${crop}
18545
.focalPoint=${this.focalPoint}
18646
.src=${this.source}></umb-image-cropper-preview>`,
18747
)}`;
18848
}
18949

190-
#resetCurrentCrop() {
191-
this.currentCrop = undefined;
192-
}
193-
19450
static styles = css`
19551
:host {
19652
display: flex;

0 commit comments

Comments
 (0)