From 786cb835f719b01dcc2704a96023f6ac5284e521 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 13 Dec 2021 13:57:07 +0100
Subject: [PATCH] [player] Refactor MathKeyboardComponent
- Rename NumbersKeyboardComponent to MathKeyboardComponent
- Decrease the number of input properties
- Split source code into private methods
---
projects/player/src/app/app.module.ts | 4 +-
.../keyboard/keyboard.component.html | 27 ++++----
.../math-keyboard.component.css} | 0
.../math-keyboard.component.html} | 7 ++-
.../math-keyboard/math-keyboard.component.ts | 58 +++++++++++++++++
.../numbers-keyboard.component.ts | 62 -------------------
6 files changed, 80 insertions(+), 78 deletions(-)
rename projects/player/src/app/components/{numbers-keyboard/numbers-keyboard.component.css => math-keyboard/math-keyboard.component.css} (100%)
rename projects/player/src/app/components/{numbers-keyboard/numbers-keyboard.component.html => math-keyboard/math-keyboard.component.html} (89%)
create mode 100644 projects/player/src/app/components/math-keyboard/math-keyboard.component.ts
delete mode 100644 projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts
diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index 586c2b0eb..0bc0d7711 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -21,7 +21,7 @@ import { IntersectionDetectionDirective } from './directives/intersection-detect
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 { MathKeyboardComponent } from './components/math-keyboard/math-keyboard.component';
@NgModule({
declarations: [
@@ -39,7 +39,7 @@ import { NumbersKeyboardComponent } from './components/numbers-keyboard/numbers-
KeyboardComponent,
KeyComponent,
FrenchKeyboardComponent,
- NumbersKeyboardComponent
+ MathKeyboardComponent
],
imports: [
BrowserModule,
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.html b/projects/player/src/app/components/keyboard/keyboard.component.html
index 08fa22cf9..c462d94e9 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.html
+++ b/projects/player/src/app/components/keyboard/keyboard.component.html
@@ -6,18 +6,21 @@
<div class="keyboard-inner-container"
(mousedown)="onMouseDown($event, true)">
<app-french-keyboard *ngIf="preset === 'french'"></app-french-keyboard>
- <app-numbers-keyboard *ngIf="preset === 'numbers'"
- [inputComponent]="inputComponent"
- [useComparisonOperators]="false"
- [showNumbersWithOperators]="false"></app-numbers-keyboard>
- <app-numbers-keyboard *ngIf="preset === 'numbersAndOperators'"
- [inputComponent]="inputComponent"
- [useComparisonOperators]="false"
- [showNumbersWithOperators]="true"></app-numbers-keyboard>
- <app-numbers-keyboard *ngIf="preset === 'comparisonOperators'"
- [inputComponent]="inputComponent"
- [useComparisonOperators]="true"
- [showNumbersWithOperators]="false"></app-numbers-keyboard>
+ <app-math-keyboard
+ *ngIf="preset === 'numbers'"
+ [inputComponent]="inputComponent"
+ [preset]="preset">
+ </app-math-keyboard>
+ <app-math-keyboard
+ *ngIf="preset === 'numbersAndOperators'"
+ [inputComponent]="inputComponent"
+ [preset]="preset">
+ </app-math-keyboard>
+ <app-math-keyboard
+ *ngIf="preset === 'comparisonOperators'"
+ [inputComponent]="inputComponent"
+ [preset]="preset">
+ </app-math-keyboard>
</div>
</div>
diff --git a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css b/projects/player/src/app/components/math-keyboard/math-keyboard.component.css
similarity index 100%
rename from projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.css
rename to projects/player/src/app/components/math-keyboard/math-keyboard.component.css
diff --git a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html b/projects/player/src/app/components/math-keyboard/math-keyboard.component.html
similarity index 89%
rename from projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html
rename to projects/player/src/app/components/math-keyboard/math-keyboard.component.html
index 7327dd9ac..c85f4d9e8 100644
--- a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html
+++ b/projects/player/src/app/components/math-keyboard/math-keyboard.component.html
@@ -1,4 +1,7 @@
-<ng-container *ngTemplateOutlet="useComparisonOperators ? comparisonOperatorsTemplate : numbersTemplate"></ng-container>
+<ng-container *ngTemplateOutlet="preset === 'comparisonOperators' ?
+ comparisonOperatorsTemplate :
+ numbersTemplate">
+</ng-container>
<ng-template #comparisonOperatorsTemplate>
<div *ngFor="let row of comparisonOperators">
@@ -31,7 +34,7 @@
</div>
</ng-template>
-<div *ngIf="showNumbersWithOperators" class="grid-layout">
+<div *ngIf="preset === 'numbersAndOperators'" class="grid-layout">
<ng-container *ngFor="let row of operators; let rowIndex = index ">
<ng-container *ngFor="let key of row; let columnIndex = index">
<app-key *ngIf="key !== '='"
diff --git a/projects/player/src/app/components/math-keyboard/math-keyboard.component.ts b/projects/player/src/app/components/math-keyboard/math-keyboard.component.ts
new file mode 100644
index 000000000..5495e301e
--- /dev/null
+++ b/projects/player/src/app/components/math-keyboard/math-keyboard.component.ts
@@ -0,0 +1,58 @@
+import { AfterViewInit, Component, Input } from '@angular/core';
+import { KeyboardService } from '../../services/keyboard.service';
+
+@Component({
+ selector: 'app-math-keyboard',
+ templateUrl: './math-keyboard.component.html',
+ styleUrls: ['./math-keyboard.component.css']
+})
+export class MathKeyboardComponent implements AfterViewInit {
+ @Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
+ @Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
+ allowedKeys!: string[];
+
+ readonly comparisonOperators: string[][] = [
+ ['<', '=', '>']
+ ];
+
+ readonly numbers: string[][] = [
+ ['7', '8', '9'],
+ ['4', '5', '6'],
+ ['1', '2', '3'],
+ ['0']
+ ];
+
+ readonly operators: string[][] = [
+ ['+', '-'],
+ ['·', ':'],
+ ['=']
+ ];
+
+ constructor(public keyboardService: KeyboardService) {
+ }
+
+ ngAfterViewInit(): void {
+ if (this.preset === 'comparisonOperators') {
+ this.allowedKeys = this.getAllowedKeys(this.comparisonOperators);
+ } else {
+ this.allowedKeys = this.preset === 'numbersAndOperators' ?
+ this.getAllowedKeys(this.operators).concat(this.getAllowedKeys(this.numbers)) :
+ this.getAllowedKeys(this.numbers);
+ }
+ if (this.inputComponent) {
+ this.inputComponent.addEventListener('keydown', this.restrict.bind(this));
+ }
+ }
+
+ private restrict(event: Event): void {
+ const keyboardEvent: KeyboardEvent = event as KeyboardEvent;
+ if (!keyboardEvent ||
+ (!this.allowedKeys.includes(keyboardEvent.key) && keyboardEvent.key !== 'Backspace')) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ private getAllowedKeys = (keys: string[][]): string[] => keys
+ .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
+}
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
deleted file mode 100644
index 4bfe98b0b..000000000
--- a/projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { AfterViewInit, 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 AfterViewInit {
- @Input() useComparisonOperators!: boolean;
- @Input() showNumbersWithOperators!: boolean;
- @Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
- allowedKeys!: string[];
-
- readonly comparisonOperators: string[][] = [
- ['<', '=', '>']
- ];
-
- readonly numbers: string[][] = [
- ['7', '8', '9'],
- ['4', '5', '6'],
- ['1', '2', '3'],
- ['0']
- ];
-
- readonly operators: string[][] = [
- ['+', '-'],
- ['·', ':'],
- ['=']
- ];
-
- constructor(public keyboardService: KeyboardService) {
- }
-
- ngAfterViewInit(): void {
- if (this.useComparisonOperators) {
- this.allowedKeys = this.comparisonOperators
- .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
- } else {
- this.allowedKeys = this.showNumbersWithOperators ?
- this.operators
- .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue)).concat(
- this.numbers
- .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue))
- ) :
- this.numbers
- .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
- if (this.inputComponent) {
- this.inputComponent.addEventListener('keydown', this.restrict.bind(this));
- }
- }
- }
-
- restrict(event: Event): void {
- const keyboardEvent: KeyboardEvent = event as KeyboardEvent;
- if (!keyboardEvent ||
- (!this.allowedKeys.includes(keyboardEvent.key) && keyboardEvent.key !== 'Backspace')) {
- event.preventDefault();
- event.stopPropagation();
- }
- }
-}
--
GitLab