[player] Implement keyboard for numbers and numbers and operators

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

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,

projects/player/src/app/components/key/key.component.css

@@ -6,3 +6,8 @@
   color: black;
 }
 
+.big-key{
+  height: 85px;
+  border-radius: 20px;
+}
+

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>

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) { }
 }

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>
 

projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.html

-<p>Noch nicht implementiert!</p>

projects/player/src/app/components/numbers-and-operators-keyboard/numbers-and-operators-keyboard.component.ts

-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 {
-  }
-}

projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css

+.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;
+}
+

projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html

-<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]="'&middot;'"
+             [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>
+

projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts

-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) {}
 }

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);
+  }
 }