From fd06f2e24e2e1cea9e4ae24166a9c1e48d8d3b95 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 28 Apr 2023 15:28:29 +0200
Subject: [PATCH] [player] Add optional backspace key to keypad with custom
preset
---
projects/common/models/elements/element.ts | 3 +++
.../text-field-element-properties.component.ts | 6 ++++++
projects/editor/src/assets/i18n/de.json | 1 +
.../key-input/components/keypad/keypad.component.ts | 3 ++-
projects/player/modules/key-input/configs/key-layout.ts | 9 +++++++--
.../floating-keypad/floating-keypad.component.html | 1 +
.../layouts/player-layout/player-layout.component.html | 3 ++-
7 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/projects/common/models/elements/element.ts b/projects/common/models/elements/element.ts
index aa98e3cba..8d66352c6 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 7644cbc1b..afa65f210 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,12 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e
{{'propertiesPanel.hasArrowKeys' | translate }}
</mat-checkbox>
+ <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset === 'custom'"
+ [checked]="$any(combinedProperties.hasBackspaceKey)"
+ (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 30a73a693..15ee009a7 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 e5a96b6b7..1cfedef01 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 06430e0fb..0b0f1e4eb 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 a02f478bd..87133764f 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 333805192..0186c5402 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>
--
GitLab