diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 78aa04451812afe2686852180b5a6756c590c9d2..f6d5499398ea031587025532e587124498b96252 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -6,6 +6,7 @@ Player
- Fix style and scroll behavior of marking buttons
- Fix problem with truncated text in text components when using large font sizes
- Hide audio and video control bar when no control is marked for display
+ - Add the floating variant of the virtual keyboard for numbers and numbers + operators
1.5.0
- Show the magnifier only when the mouse is over the image
diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index cc91da4563d3df3f901b10f8adf802d1ef135456..586c2b0ebd6c88076ba15caefbae1564cfa9b1f1 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -22,8 +22,6 @@ import { KeyboardComponent } from './components/keyboard/keyboard.component';
import { KeyComponent } from './components/key/key.component';
import { FrenchKeyboardComponent } from './components/french-keyboard/french-keyboard.component';
import { NumbersKeyboardComponent } from './components/numbers-keyboard/numbers-keyboard.component';
-import { NumbersAndOperatorsKeyboardComponent }
- from './components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component';
@NgModule({
declarations: [
@@ -41,8 +39,7 @@ import { NumbersAndOperatorsKeyboardComponent }
KeyboardComponent,
KeyComponent,
FrenchKeyboardComponent,
- NumbersKeyboardComponent,
- NumbersAndOperatorsKeyboardComponent
+ NumbersKeyboardComponent
],
imports: [
BrowserModule,
diff --git a/projects/player/src/app/components/key/key.component.css b/projects/player/src/app/components/key/key.component.css
index e37899a6bccd371fd741043575a82beb3f481f46..72d14b34cdbda4c1eb73da34ab6923634ee416b1 100644
--- a/projects/player/src/app/components/key/key.component.css
+++ b/projects/player/src/app/components/key/key.component.css
@@ -6,3 +6,8 @@
color: black;
}
+.big-key{
+ height: 85px;
+ border-radius: 20px;
+}
+
diff --git a/projects/player/src/app/components/key/key.component.html b/projects/player/src/app/components/key/key.component.html
index ccac06710db264560ab530d218cccf019a43fb1b..7a1a4eb316b40eece43d5707ef0dac47ecd64565 100644
--- a/projects/player/src/app/components/key/key.component.html
+++ b/projects/player/src/app/components/key/key.component.html
@@ -2,5 +2,6 @@
type="button"
mat-mini-fab
class="key"
+ [class.big-key]="big"
(click)="keyboardService.enterKey(key);">{{key}}
</button>
diff --git a/projects/player/src/app/components/key/key.component.ts b/projects/player/src/app/components/key/key.component.ts
index c8eb95a4adeb2882eb158a5460acd89225fe3917..3d7143e51fa3ecda3d05d99bfa3858279c58d4b0 100644
--- a/projects/player/src/app/components/key/key.component.ts
+++ b/projects/player/src/app/components/key/key.component.ts
@@ -8,6 +8,7 @@ import { KeyboardService } from '../../services/keyboard.service';
})
export class KeyComponent {
@Input() key!: string;
+ @Input() big!: boolean;
constructor(public keyboardService: KeyboardService) { }
}
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.html b/projects/player/src/app/components/keyboard/keyboard.component.html
index 0607356dded23ba140f3484e924cce230f2c1ea6..cb2b6dcdf20470245d6b81a1ba4a8a44f1444a57 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.html
+++ b/projects/player/src/app/components/keyboard/keyboard.component.html
@@ -4,8 +4,8 @@
<div class="keyboard-inner-container"
(mousedown)="onMouseDown($event, true)">
<app-french-keyboard *ngIf="preset === 'french'"></app-french-keyboard>
- <app-numbers-keyboard *ngIf="preset === 'numbers'"></app-numbers-keyboard>
- <app-numbers-and-operators-keyboard *ngIf="preset === 'numbersAndOperators'"></app-numbers-and-operators-keyboard>
+ <app-numbers-keyboard *ngIf="preset === 'numbers'" [operators]="false"></app-numbers-keyboard>
+ <app-numbers-keyboard *ngIf="preset === 'numbersAndOperators'" [operators]="true"></app-numbers-keyboard>
</div>
</div>
diff --git a/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.css b/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.html b/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.html
deleted file mode 100644
index 4aeef19842ca745fc19bcd15fd8b6f4d4f21b3cb..0000000000000000000000000000000000000000
--- a/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>Noch nicht implementiert!</p>
diff --git a/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.ts b/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.ts
deleted file mode 100644
index 05a8b51c8e31f4e7d55b0a8d52eb1a265bf73af4..0000000000000000000000000000000000000000
--- a/projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-numbers-and-operators-keyboard',
- templateUrl: './numbers-and-operators-keyboard.component.html',
- styleUrls: ['./numbers-and-operators-keyboard.component.css']
-})
-export class NumbersAndOperatorsKeyboardComponent implements OnInit {
- ngOnInit(): void {
- }
-}
diff --git a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..78dad79e6020d875902eec671e6294609aa3fa10 100644
--- a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css
+++ b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css
@@ -0,0 +1,16 @@
+.delete-characters{
+ font-size: x-large;
+ width: 85px;
+ height: 40px;
+ border-radius: 20px;
+ background-color: dimgray;
+ color: #fff;
+}
+
+.grid-layout {
+ margin-top: 15px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+}
+
diff --git a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html
index 4aeef19842ca745fc19bcd15fd8b6f4d4f21b3cb..52ebf1e3e794e6b2332e9d35f38ac41f5fe0b2a7 100644
--- a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html
+++ b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html
@@ -1 +1,58 @@
-<p>Noch nicht implementiert!</p>
+<div>
+ <app-key [key]="'7'"></app-key>
+ <app-key [key]="'8'"></app-key>
+ <app-key [key]="'9'"></app-key>
+</div>
+<div>
+ <app-key [key]="'4'"></app-key>
+ <app-key [key]="'5'"></app-key>
+ <app-key [key]="'6'"></app-key>
+</div>
+<div>
+ <app-key [key]="'1'"></app-key>
+ <app-key [key]="'2'"></app-key>
+ <app-key [key]="'3'"></app-key>
+</div>
+<div>
+ <app-key [key]="'0'"></app-key>
+ <button
+ type="button"
+ mat-mini-fab
+ class="delete-characters"
+ (click)="keyboardService.deleterCharacters()">
+ <mat-icon>keyboard_backspace</mat-icon>
+ </button>
+</div>
+<ng-container *ngIf="operators">
+ <div class="grid-layout">
+ <app-key [key]="'+'"
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="2"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="2"></app-key>
+ <app-key [key]="'-'"
+ [style.grid-column-start]="2"
+ [style.grid-column-end]="3"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="2"></app-key>
+ <app-key [key]="'·'"
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="2"
+ [style.grid-row-start]="2"
+ [style.grid-row-end]="3"></app-key>
+ <app-key [key]="':'"
+ [style.grid-column-start]="2"
+ [style.grid-column-end]="3"
+ [style.grid-row-start]="2"
+ [style.grid-row-end]="3"></app-key>
+ <app-key
+ [key]="'='"
+ [big]="true"
+ [style.grid-column-start]="3"
+ [style.grid-column-end]="3"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="3">
+ </app-key>
+ </div>
+</ng-container>
+
diff --git a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts
index 73c06ba8e52b781b8bf87bc93a64690c90b4ca33..28a1047642673cd62cbdabc5ad85ecc42be23081 100644
--- a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts
+++ b/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts
@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { KeyboardService } from '../../services/keyboard.service';
@Component({
selector: 'app-numbers-keyboard',
templateUrl: './numbers-keyboard.component.html',
styleUrls: ['./numbers-keyboard.component.css']
})
-export class NumbersKeyboardComponent implements OnInit {
- ngOnInit(): void {
- }
+export class NumbersKeyboardComponent {
+ @Input() operators!: boolean;
+
+ constructor(public keyboardService: KeyboardService) {}
}
diff --git a/projects/player/src/app/services/keyboard.service.ts b/projects/player/src/app/services/keyboard.service.ts
index 6ea32c4ba02a151e65ae8c1707bbfbea798e6b99..cd49bbc16da35b4fe96322573b5844c32a3285f6 100644
--- a/projects/player/src/app/services/keyboard.service.ts
+++ b/projects/player/src/app/services/keyboard.service.ts
@@ -10,14 +10,22 @@ export class KeyboardService {
enterKey = (key: string): void => {
const selectionStart = this.inputElement.selectionStart || 0;
- const selectionEnd = this.inputElement.selectionEnd || this.inputElement.value.length;
- const startText = this.inputElement.value.substring(0, selectionStart);
- const endText = this.inputElement.value.substring(selectionEnd);
- this.elementComponent.elementFormControl.setValue(startText + key + endText);
- const selection = selectionStart ? selectionStart + 1 : 1;
- this.inputElement.setSelectionRange(selection, selection);
+ const selectionEnd = this.inputElement.selectionEnd || 0;
+ const newSelection = selectionStart ? selectionStart + 1 : 1;
+ this.insert(selectionStart, selectionEnd, newSelection, key);
};
+ deleterCharacters():void {
+ let selectionStart = this.inputElement.selectionStart || 0;
+ const selectionEnd = this.inputElement.selectionEnd || 0;
+ if (selectionEnd > 0) {
+ if (selectionStart === selectionEnd) {
+ selectionStart -= 1;
+ }
+ this.insert(selectionStart, selectionEnd, selectionStart, '');
+ }
+ }
+
openKeyboard(inputElement: HTMLTextAreaElement | HTMLInputElement,
elementComponent: FormElementComponent): boolean {
this.inputElement = inputElement;
@@ -26,4 +34,11 @@ export class KeyboardService {
}
closeKeyboard = (): boolean => false;
+
+ private insert(selectionStart: number, selectionEnd: number, newSelection: number, key: string) {
+ const startText = this.inputElement.value.substring(0, selectionStart);
+ const endText = this.inputElement.value.substring(selectionEnd);
+ this.elementComponent.elementFormControl.setValue(startText + key + endText);
+ this.inputElement.setSelectionRange(newSelection, newSelection);
+ }
}