diff --git a/projects/common/models/elements/element.ts b/projects/common/models/elements/element.ts index aa98e3cba5fa4afe35f3295e5745c6e2684ca0c1..8d66352c62b0c6fd7d06ca553b81a6d5d48780f6 100644 --- a/projects/common/models/elements/element.ts +++ b/projects/common/models/elements/element.ts @@ -55,6 +55,7 @@ export abstract class UIElement { (this.player as PlayerProperties)[property] = value; } + // eslint-disable-next-line class-methods-use-this getChildElements(): UIElement[] { return []; } @@ -140,6 +141,7 @@ export abstract class TextInputElement extends InputElement { inputAssistanceFloatingStartPosition: 'startBottom' | 'endCenter' = 'startBottom'; restrictedToInputAssistanceChars: boolean = true; hasArrowKeys: boolean = false; + hasBackspaceKey: boolean = false; showSoftwareKeyboard: boolean = false; softwareKeyboardShowFrench: boolean = false; protected constructor(element: Partial<TextInputElement>) { @@ -156,6 +158,7 @@ export abstract class TextInputElement extends InputElement { this.restrictedToInputAssistanceChars = element.restrictedToInputAssistanceChars; } if (element.hasArrowKeys) this.hasArrowKeys = element.hasArrowKeys; + if (element.hasBackspaceKey) this.hasBackspaceKey = element.hasBackspaceKey; if (element.showSoftwareKeyboard) this.showSoftwareKeyboard = element.showSoftwareKeyboard; if (element.softwareKeyboardShowFrench) this.softwareKeyboardShowFrench = element.softwareKeyboardShowFrench; } diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts index 7644cbc1b0d2bfdef0c13987c232553f2cc4b542..31f04a3ebf00db7f63582a193a8fdc5090b4ab0b 100644 --- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts +++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts @@ -165,6 +165,16 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e {{'propertiesPanel.hasArrowKeys' | translate }} </mat-checkbox> + <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null && + combinedProperties.hasBackspaceKey !== undefined" + [disabled]="combinedProperties.inputAssistancePreset !== 'custom'" + [checked]="combinedProperties.inputAssistancePreset === 'custom' ? + $any(combinedProperties.hasBackspaceKey) : + combinedProperties.inputAssistancePreset !== 'french'" + (change)="updateModel.emit({ property: 'hasBackspaceKey', value: $event.checked })"> + {{'propertiesPanel.hasBackspaceKey' | translate }} + </mat-checkbox> + <mat-checkbox *ngIf="combinedProperties.type === 'text-area' && combinedProperties.inputAssistancePreset !== null && combinedProperties.hasReturnKey !== undefined" [checked]="$any(combinedProperties.hasReturnKey)" diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json index 30a73a6935ad0faf2dbcb3ac382054e5d81fc914..15ee009a7c8aa707d1911bc2408c8b27a54d1178 100644 --- a/projects/editor/src/assets/i18n/de.json +++ b/projects/editor/src/assets/i18n/de.json @@ -125,6 +125,7 @@ "inputAssistance": "Eingabehilfe", "restrictedToInputAssistanceChars": "Bearbeitung anderer Zeichen verhindern", "hasReturnKey": "Eingabetaste hinzufügen", + "hasBackspaceKey": "Löschtaste hinzufügen", "hasArrowKeys": "Pfeiltasten hinzufügen", "none": "keine", "french": "Französische Sonderzeichen", diff --git a/projects/player/modules/key-input/components/keypad/keypad.component.ts b/projects/player/modules/key-input/components/keypad/keypad.component.ts index e5a96b6b7a203d16d00a8b14a6afbfeed5fa7faa..1cfedef015563fd490560ccbbd042305da1ba782 100644 --- a/projects/player/modules/key-input/components/keypad/keypad.component.ts +++ b/projects/player/modules/key-input/components/keypad/keypad.component.ts @@ -17,6 +17,7 @@ export class KeypadComponent implements OnInit { @Input() restrictToAllowedKeys!: boolean; @Input() hasArrowKeys!: boolean; @Input() hasReturnKey!: boolean; + @Input() hasBackspaceKey!: boolean; @Output() backSpaceClicked = new EventEmitter(); @Output() keyClicked = new EventEmitter<string>(); @@ -25,7 +26,7 @@ export class KeypadComponent implements OnInit { layout: KeyInputLayout = { default: [], shift: [], additional: [] }; ngOnInit(): void { - this.layout = KeyLayout.get(this.preset, this.customKeys); + this.layout = KeyLayout.get(this.preset, this.customKeys, this.hasBackspaceKey); } evaluateClickedKeyValue(key: string): void { diff --git a/projects/player/modules/key-input/configs/key-layout.ts b/projects/player/modules/key-input/configs/key-layout.ts index 06430e0fb43b6569d970820c1f28a6319d6cdda4..0b0f1e4ebf5750091b7a252ef7b0944e2b4732c2 100644 --- a/projects/player/modules/key-input/configs/key-layout.ts +++ b/projects/player/modules/key-input/configs/key-layout.ts @@ -7,7 +7,11 @@ export interface KeyInputLayout { } export class KeyLayout { - static get = (preset: InputAssistancePreset | 'keyboard', customKeys: string = ''): KeyInputLayout => { + static get = ( + preset: InputAssistancePreset | 'keyboard', + customKeys: string = '', + hasBackspaceKey: boolean = false + ): KeyInputLayout => { switch (preset) { case 'french': { return { @@ -134,9 +138,10 @@ export class KeyLayout { }; } default: { // custom + const keys = hasBackspaceKey ? customKeys.split('').concat('Backspace') : customKeys.split(''); return { default: [ - customKeys.split('') + keys ], shift: [[]], additional: [[]] diff --git a/projects/player/src/app/components/floating-keypad/floating-keypad.component.html b/projects/player/src/app/components/floating-keypad/floating-keypad.component.html index a02f478bdbbd3c96128c987e377864b554ff06bb..87133764f4df38c864551410a8d441a5a8705ce1 100644 --- a/projects/player/src/app/components/floating-keypad/floating-keypad.component.html +++ b/projects/player/src/app/components/floating-keypad/floating-keypad.component.html @@ -15,6 +15,7 @@ [customKeys]="keypadService.elementComponent.elementModel.inputAssistanceCustomKeys" [restrictToAllowedKeys]="keypadService.elementComponent.elementModel.restrictedToInputAssistanceChars" [hasArrowKeys]="keypadService.elementComponent.elementModel.hasArrowKeys" + [hasBackspaceKey]="keypadService.elementComponent.elementModel.hasBackspaceKey" [hasReturnKey]="keypadService.elementComponent.elementModel | hasReturnKey" (backSpaceClicked)="keypadService.deleteCharacters(true)" (keyClicked)="keypadService.enterKey($event)"> diff --git a/projects/player/src/app/components/layouts/player-layout/player-layout.component.html b/projects/player/src/app/components/layouts/player-layout/player-layout.component.html index 333805192e489e21a9a4ef36beb4735addb911b6..0186c5402ad503924c0a1b3863fcf665a7903719 100644 --- a/projects/player/src/app/components/layouts/player-layout/player-layout.component.html +++ b/projects/player/src/app/components/layouts/player-layout/player-layout.component.html @@ -14,7 +14,8 @@ [customKeys]="keypadService.elementComponent.elementModel.inputAssistanceCustomKeys" [restrictToAllowedKeys]="keypadService.elementComponent.elementModel.restrictedToInputAssistanceChars" [hasArrowKeys]="keypadService.elementComponent.elementModel.hasArrowKeys" - [hasReturnKey]="!!keypadService.elementComponent.elementModel.hasReturnKey" + [hasBackspaceKey]="keypadService.elementComponent.elementModel.hasBackspaceKey" + [hasReturnKey]="keypadService.elementComponent.elementModel | hasReturnKey" (backSpaceClicked)="keypadService.deleteCharacters(true)" (keyClicked)="keypadService.enterKey($event)"> </aspect-keypad>