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

Merge pull request #1948 from umbraco/v14/feature/hide-focalpoint-in-image-cropper

Browse Source 
Feature: Hide focalpoint in ImageCropper
This commit is contained in:
Lee Kelleher
2024-05-29 11:26:27 +01:00
committed by GitHub
parent b08e7e08aa b645161b99
commit 91bd1b2f94
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,9 +151,11 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
</umb-image-cropper-focus-setter>
<div id="actions">
<slot name="actions"></slot>
<uui-button
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.#onResetFocalPoint}></uui-button>
${!this.hideFocalPoint
? html`<uui-button
label=${this.localize.term('content_resetFocalPoint')}
@click=${this.#onResetFocalPoint}></uui-button>`
: nothing}
</div>
`;
}

14
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
View File

@@ -34,6 +34,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.updated(_changedProperties);
if (!this.hideFocalPoint) return;
if (_changedProperties.has('focalPoint') && this.focalPointElement) {
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
@@ -59,8 +61,10 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
async #initializeImage() {
await this.updateComplete; // Wait for the @query to be resolved
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
if (!this.hideFocalPoint) {
this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
}
this.imageElement.onload = () => {
if (!this.imageElement || !this.wrapperElement) return;
@@ -79,7 +83,9 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
};
this.#addEventListeners();
if (!this.hideFocalPoint) {
this.#addEventListeners();
}
}
async #addEventListeners() {
@@ -110,6 +116,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
#onSetFocalPoint(event: MouseEvent) {
event.preventDefault();
if (this.hideFocalPoint) return;
if (!this.focalPointElement || !this.imageElement) return;
const image = this.imageElement.getBoundingClientRect();