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

extend from original element

Browse Source
This commit is contained in:
Lone Iversen
2024-06-25 10:08:27 +02:00
parent dc670664cb
commit 04132ccf62
2 changed files with 43 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
View File

@@ -79,7 +79,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
}
}
#onCropClick(crop: any) {
protected onCropClick(crop: any) {
const index = this.crops.findIndex((c) => c.alias === crop.alias);
if (index === -1) return;
@@ -117,19 +117,19 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
this.dispatchEvent(new UmbChangeEvent());
}
#onResetFocalPoint = () => {
protected onResetFocalPoint = () => {
this.focalPoint = { left: 0.5, top: 0.5 };
this.#updateValue();
};
render() {
return html`
<div id="main">${this.#renderMain()}</div>
<div id="side">${this.#renderSide()}</div>
<div id="main">${this.renderMain()}</div>
<div id="side">${this.renderSide()}</div>
`;
}
#renderMain() {
protected renderMain() {
if (this.currentCrop) {
return html`
<umb-image-cropper
@@ -149,20 +149,22 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
?hideFocalPoint=${this.hideFocalPoint}
@change=${this.#onFocalPointChange}>
</umb-image-cropper-focus-setter>
<div id="actions">
<slot name="actions"></slot>
${when(
!this.hideFocalPoint,
() =>
html`<uui-button
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.#onResetFocalPoint}></uui-button>`,
)}
</div>
<div id="actions">${this.renderActions()}</div>
`;
}
#renderSide() {
protected renderActions() {
return html`<slot name="actions"></slot>
${when(
!this.hideFocalPoint,
() =>
html`<uui-button
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.onResetFocalPoint}></uui-button>`,
)} `;
}
protected renderSide() {
if (!this.value || !this.crops) return;
return repeat(
@@ -170,7 +172,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
(crop) => crop.alias + JSON.stringify(crop.coordinates),
(crop) =>
html` <umb-image-cropper-preview
@click=${() => this.#onCropClick(crop)}
@click=${() => this.onCropClick(crop)}
.crop=${crop}
.focalPoint=${this.focalPoint}
.src=${this.source}></umb-image-cropper-preview>`,
@@ -184,6 +186,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
gap: var(--uui-size-space-3);
height: 400px;
}
#main {
max-width: 500px;
min-width: 300px;
@@ -193,13 +196,16 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
gap: var(--uui-size-space-1);
flex-direction: column;
}
#actions {
display: flex;
justify-content: space-between;
}
umb-image-cropper-focus-setter {
height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
}
#side {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

184
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts
View File

@@ -1,171 +1,31 @@
import type {
UmbImageCropperCrop,
UmbImageCropperCrops,
UmbImageCropperFocalPoint,
UmbImageCropperPropertyEditorValue,
} from '../../../components/index.js';
import type { UmbImageCropperElement } from '../../../components/input-image-cropper/image-cropper.element.js';
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbInputImageCropperFieldElement } from '../../../components/input-image-cropper/image-cropper-field.element.js';
import { css, customElement, html, repeat, when } from '@umbraco-cms/backoffice/external/lit';
/** TODO Do we want to combine this with the original image-cropper-field element? Element is very similar, but with a few UI changes... */
@customElement('umb-image-cropper-editor-field')
export class UmbImageCropperEditorFieldElement extends UmbLitElement {
@property({ attribute: false })
get value() {
return this.#value;
}
set value(value) {
if (!value) {
this.crops = [];
this.focalPoint = { left: 0.5, top: 0.5 };
this.src = '';
this.#value = undefined;
} else {
this.crops = [...value.crops];
// TODO: This is a temporary solution to make sure we have a focal point
this.focalPoint = value.focalPoint || { left: 0.5, top: 0.5 };
this.src = value.src;
this.#value = value;
}
this.requestUpdate();
}
#value?: UmbImageCropperPropertyEditorValue;
@state()
crops: UmbImageCropperCrops = [];
@state()
currentCrop?: UmbImageCropperCrop;
@property({ attribute: false })
file?: File;
@property()
fileDataUrl?: string;
@state()
focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
@property({ type: Boolean })
hideFocalPoint = false;
@state()
src = '';
get source() {
if (this.fileDataUrl) return this.fileDataUrl;
if (this.src) return this.src;
return '';
}
updated(changedProperties: Map<string | number | symbol, unknown>) {
super.updated(changedProperties);
if (changedProperties.has('file')) {
if (this.file) {
const reader = new FileReader();
reader.onload = (event) => {
this.fileDataUrl = event.target?.result as string;
};
reader.readAsDataURL(this.file);
} else {
this.fileDataUrl = undefined;
}
}
}
#onCropClick(crop: any) {
const index = this.crops.findIndex((c) => c.alias === crop.alias);
if (index === -1) return;
this.currentCrop = { ...this.crops[index] };
}
#onCropChange = (event: CustomEvent) => {
const target = event.target as UmbImageCropperElement;
const value = target.value;
if (!value) return;
const index = this.crops.findIndex((crop) => crop.alias === value.alias);
if (index === undefined) return;
this.crops[index] = value;
export class UmbImageCropperEditorFieldElement extends UmbInputImageCropperFieldElement {
#resetCurrentCrop() {
this.currentCrop = undefined;
this.#updateValue();
};
#onFocalPointChange = (event: CustomEvent) => {
this.focalPoint = event.detail;
this.#updateValue();
};
#updateValue() {
this.#value = {
crops: [...this.crops],
focalPoint: this.focalPoint,
src: this.src,
};
this.dispatchEvent(new UmbChangeEvent());
}
#onResetFocalPoint = () => {
this.focalPoint = { left: 0.5, top: 0.5 };
this.#updateValue();
};
render() {
renderActions() {
return html`
<div id="main">${this.#renderMain()}</div>
<div id="side">${this.#renderSide()}</div>
<slot name="actions"></slot>
${when(
!this.hideFocalPoint,
() =>
html`<uui-button
compact
id="reset-focal-point"
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.onResetFocalPoint}>
<uui-icon name="icon-axis-rotation"></uui-icon>
${this.localize.term('content_resetFocalPoint')}
</uui-button>`,
)}
`;
}
#renderMain() {
if (this.currentCrop) {
return html`
<umb-image-cropper
.focalPoint=${this.focalPoint}
.src=${this.source}
.value=${this.currentCrop}
?hideFocalPoint=${this.hideFocalPoint}
@change=${this.#onCropChange}>
</umb-image-cropper>
`;
}
return html`
<umb-image-cropper-focus-setter
.focalPoint=${this.focalPoint}
.src=${this.source}
?hideFocalPoint=${this.hideFocalPoint}
@change=${this.#onFocalPointChange}>
</umb-image-cropper-focus-setter>
<div id="actions">
<slot name="actions"></slot>
${when(
!this.hideFocalPoint,
() =>
html`<uui-button
compact
id="reset-focal-point"
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.#onResetFocalPoint}>
<uui-icon name="icon-axis-rotation"></uui-icon>
${this.localize.term('content_resetFocalPoint')}
</uui-button>`,
)}
</div>
`;
}
#renderSide() {
renderSide() {
if (!this.value || !this.crops) return;
return html` <uui-menu-item
@@ -180,17 +40,13 @@ export class UmbImageCropperEditorFieldElement extends UmbLitElement {
(crop) =>
html` <umb-image-cropper-preview
?active=${this.currentCrop?.alias === crop.alias}
@click=${() => this.#onCropClick(crop)}
@click=${() => this.onCropClick(crop)}
.crop=${crop}
.focalPoint=${this.focalPoint}
.src=${this.source}></umb-image-cropper-preview>`,
)}`;
}
#resetCurrentCrop() {
this.currentCrop = undefined;
}
static styles = css`
:host {
display: flex;