From fb8cf4c4f16f278119cb7038b6ab3eb1ea206cf9 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 14 May 2024 18:03:18 +0200 Subject: [PATCH 1/3] autofill alias from label --- ...or-ui-image-crops-configuration.element.ts | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index bbccbeac1f..87f87c3d95 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -26,6 +26,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement @state() editCropAlias = ''; + #oldInputValue = ''; + #onRemove(alias: string) { this.value = [...this.value.filter((item) => item.alias !== alias)]; this.dispatchEvent(new UmbPropertyValueChangeEvent()); @@ -101,6 +103,24 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement : html``; } + #onLabelInput(event: Event) { + const value = (event.target as HTMLInputElement)?.value ?? ''; + + const aliasValue = value.toLowerCase().replace(/[^a-z0-9]/g, '-'); + + const alias = this.shadowRoot?.querySelector('#alias') as HTMLInputElement; + + if (!alias) return; + + const oldAliasValue = this.#oldInputValue.toLocaleLowerCase().replace(/[^a-z0-9]/g, '-'); + + if (alias.value === oldAliasValue || !alias.value) { + alias.value = aliasValue; + } + + this.#oldInputValue = value; + } + render() { if (!this.value) this.value = []; @@ -109,7 +129,14 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
Label - +
Alias From 024f7bd35f7363739d240a805fd4b5ed8d5d44df Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 14 May 2024 18:07:59 +0200 Subject: [PATCH 2/3] focus label after adding a crop --- ...erty-editor-ui-image-crops-configuration.element.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index 87f87c3d95..4c6bc54590 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -1,4 +1,4 @@ -import { html, customElement, property, css, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, css, repeat, state, query } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -19,6 +19,9 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { + @query('#label') + private _labelInput!: HTMLInputElement; + //TODO MAKE TYPE @property({ attribute: false }) value: UmbCrop[] = []; @@ -94,6 +97,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement this.dispatchEvent(new UmbPropertyValueChangeEvent()); form.reset(); + this._labelInput.focus(); } #renderActions() { @@ -103,8 +107,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement : html``; } - #onLabelInput(event: Event) { - const value = (event.target as HTMLInputElement)?.value ?? ''; + #onLabelInput() { + const value = this._labelInput.value ?? ''; const aliasValue = value.toLowerCase().replace(/[^a-z0-9]/g, '-'); From a0e5aa82529fbe536445de2768776d7f9fb93cec Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 20 May 2024 16:12:36 +0200 Subject: [PATCH 3/3] use generateAlias util --- .../property-editor-ui-image-crops-configuration.element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts index 4c6bc54590..524f90c410 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts @@ -3,6 +3,7 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; +import { generateAlias } from '@umbraco-cms/backoffice/utils'; export type UmbCrop = { label: string; @@ -110,13 +111,13 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement #onLabelInput() { const value = this._labelInput.value ?? ''; - const aliasValue = value.toLowerCase().replace(/[^a-z0-9]/g, '-'); + const aliasValue = generateAlias(value); const alias = this.shadowRoot?.querySelector('#alias') as HTMLInputElement; if (!alias) return; - const oldAliasValue = this.#oldInputValue.toLocaleLowerCase().replace(/[^a-z0-9]/g, '-'); + const oldAliasValue = generateAlias(this.#oldInputValue); if (alias.value === oldAliasValue || !alias.value) { alias.value = aliasValue;