diff --git a/projects/player/src/app/components/element-container/element-container.component.html b/projects/player/src/app/components/element-container/element-container.component.html
index 9d4673a4b6236994908e15d92b5207261828185a..113959b0a13583908df46788b0a020b88b0a2a17 100644
--- a/projects/player/src/app/components/element-container/element-container.component.html
+++ b/projects/player/src/app/components/element-container/element-container.component.html
@@ -3,14 +3,17 @@
<ng-template #elementComponentContainer></ng-template>
</div>
-<ng-template *ngIf="keyboardLayout !== 'none' &&
+<ng-template *ngIf="keyboardService.preset !== 'none' &&
(elementModel.type === 'text-area' || elementModel.type === 'text-field')"
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="overlayOrigin"
- [cdkConnectedOverlayOpen]="isKeyboardOpen">
+ [cdkConnectedOverlayOpen]="isKeyboardOpen && keyboardService.position === 'floating'">
<app-keyboard cdkDrag
- [inputComponent]="focussedInputElement"
[positionOffset]="elementModel.type === 'text-field' ? 20 : 0"
- [preset]="keyboardLayout">
+ [inputElement]="keyboardService.inputElement"
+ [position]="keyboardService.position"
+ [preset]="keyboardService.preset"
+ (deleteCharacter)="keyboardService.deleterCharacters()"
+ (enterKey)="keyboardService.enterKey($event)">
</app-keyboard>
</ng-template>
diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts
index f602877589127e889fd1f6047a35fd61a99adea9..b50d81f86489fa5b2d7e79ed3cb1b168c52bbd53 100644
--- a/projects/player/src/app/components/element-container/element-container.component.ts
+++ b/projects/player/src/app/components/element-container/element-container.component.ts
@@ -42,8 +42,6 @@ export class ElementContainerComponent implements OnInit {
@Input() pageIndex!: number;
isKeyboardOpen!: boolean;
- keyboardLayout!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
- focussedInputElement!: HTMLTextAreaElement | HTMLInputElement;
private ngUnsubscribe = new Subject<void>();
@@ -277,13 +275,15 @@ export class ElementContainerComponent implements OnInit {
if (elementComponent.onFocusChanged) {
elementComponent.onFocusChanged
.pipe(takeUntil(this.ngUnsubscribe))
- .subscribe((focussedInputControl: HTMLElement | null): void => {
- if (focussedInputControl) {
- this.focussedInputElement = this.elementModel.type === 'text-area' ?
- focussedInputControl as HTMLTextAreaElement :
- focussedInputControl as HTMLInputElement;
- this.keyboardLayout = (this.elementModel as TextFieldElement).inputAssistancePreset;
- this.isKeyboardOpen = this.keyboardService.openKeyboard(this.focussedInputElement, elementComponent);
+ .subscribe((focussedElement: HTMLElement | null): void => {
+ if (focussedElement) {
+ const focussedInputElement = this.elementModel.type === 'text-area' ?
+ focussedElement as HTMLTextAreaElement :
+ focussedElement as HTMLInputElement;
+ const preset = (this.elementModel as TextFieldElement).inputAssistancePreset;
+ const position = (this.elementModel as TextFieldElement).inputAssistancePosition;
+ this.isKeyboardOpen = this.keyboardService
+ .openKeyboard(focussedInputElement, preset, position, elementComponent);
} else {
this.isKeyboardOpen = this.keyboardService.closeKeyboard();
}
diff --git a/projects/player/src/app/components/french-keyboard/french-keyboard.component.css b/projects/player/src/app/components/french-keyboard/french-keyboard.component.css
index a80246a51c7b007f857c848fd816ca21a371b006..37a2899f3417370a2f1e81102e6a0902bfc5810f 100644
--- a/projects/player/src/app/components/french-keyboard/french-keyboard.component.css
+++ b/projects/player/src/app/components/french-keyboard/french-keyboard.component.css
@@ -1,8 +1,18 @@
-.keyboard-row{
- max-width: 280px;
- overflow-wrap: break-word;
+.fixed-row-container{
+ width: 280px;
+ margin: auto;
}
-.keyboard_capslock{
+
+.fixed-keyboard-key{
+ width: 65px;
+ height: 65px;
+}
+
+.keyboard-capslock{
background-color: dimgray;
}
+.keyboard-capslock-container{
+ margin-right: 100%;
+}
+
diff --git a/projects/player/src/app/components/french-keyboard/french-keyboard.component.html b/projects/player/src/app/components/french-keyboard/french-keyboard.component.html
index 9560fdf3f635377583bd3b13f5d048638990dc1b..d8d45cb2d8c567cf368cb9986c4a0b8a4fe11f92 100644
--- a/projects/player/src/app/components/french-keyboard/french-keyboard.component.html
+++ b/projects/player/src/app/components/french-keyboard/french-keyboard.component.html
@@ -1,12 +1,23 @@
-<div class="keypad-row" *ngFor="let row of rows">
- <ng-container *ngFor="let key of row" >
- <app-key [key]="key"></app-key>
- </ng-container>
+<div [class.fixed-row-container]="position === 'right'">
+ <div *ngFor="let row of rows">
+ <ng-container *ngFor="let key of row, let lastRowKey = last">
+ <app-key
+ [key]="key"
+ [position]="position"
+ [last]="lastRowKey"
+ (enterKey)="enterKey.emit($event)">
+ </app-key>
+ </ng-container>
+ </div>
+ <div class="keyboard-capslock-container">
+ <button
+ type="button"
+ class="keyboard-capslock"
+ mat-mini-fab
+ [class.fixed-keyboard-key]="position === 'right'"
+ (click)="toggleCharacterCase()">
+ <mat-icon *ngIf="lowerCharacters">keyboard_arrow_up</mat-icon>
+ <mat-icon *ngIf="!lowerCharacters">keyboard_capslock</mat-icon>
+ </button>
+ </div>
</div>
-<button
- type="button"
- class="keyboard_capslock"
- mat-mini-fab (click)="toggleCharacterCase()">
- <mat-icon *ngIf="lowerCharacters">keyboard_arrow_up</mat-icon>
- <mat-icon *ngIf="!lowerCharacters">keyboard_capslock</mat-icon>
-</button>
diff --git a/projects/player/src/app/components/french-keyboard/french-keyboard.component.ts b/projects/player/src/app/components/french-keyboard/french-keyboard.component.ts
index ff549625e101194f6aa17c1be5807e1f1a7fe9e1..452af6ebc63c178396e28bc2e24cfe0d856a8aa2 100644
--- a/projects/player/src/app/components/french-keyboard/french-keyboard.component.ts
+++ b/projects/player/src/app/components/french-keyboard/french-keyboard.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {
+ Component, EventEmitter, Input, OnInit, Output
+} from '@angular/core';
@Component({
selector: 'app-french-keyboard',
@@ -6,8 +8,12 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./french-keyboard.component.css']
})
export class FrenchKeyboardComponent implements OnInit {
+ @Input() position!: 'floating' | 'right';
+ @Output() enterKey = new EventEmitter<string>();
+
rows!: string[][];
lowerCharacters!: boolean;
+
private readonly upperCharacterRows: string[][] = [
['Â', 'À', 'Æ', 'Ê', 'È', 'É', 'Ë', 'Î'],
['Ã', 'Ô', 'Ã’', 'Å’', 'Û', 'Ù', 'Ãœ', 'Ç']
diff --git a/projects/player/src/app/components/key/key.component.css b/projects/player/src/app/components/key/key.component.css
index 72d14b34cdbda4c1eb73da34ab6923634ee416b1..c9ed988daddb2f82378e5a3ee81b4cd29eae129b 100644
--- a/projects/player/src/app/components/key/key.component.css
+++ b/projects/player/src/app/components/key/key.component.css
@@ -2,12 +2,25 @@
background-color: white;
font-size: x-large;
margin-bottom: 5px;
- margin-right: 5px;
color: black;
}
-.big-key{
+.fixed-keyboard-key{
+ width: 65px;
+ height: 65px;
+}
+
+.not-last-key{
+ margin-right: 5px;
+}
+
+.big-floating-keyboard-key{
height: 85px;
border-radius: 20px;
}
+.big-fixed-keyboard-key{
+ height: 135px;
+ border-radius: 65px;
+}
+
diff --git a/projects/player/src/app/components/key/key.component.html b/projects/player/src/app/components/key/key.component.html
index 7a1a4eb316b40eece43d5707ef0dac47ecd64565..2e89000b0185a0fa3c706e5c8949f829a8c22fb4 100644
--- a/projects/player/src/app/components/key/key.component.html
+++ b/projects/player/src/app/components/key/key.component.html
@@ -2,6 +2,9 @@
type="button"
mat-mini-fab
class="key"
- [class.big-key]="big"
- (click)="keyboardService.enterKey(key);">{{key}}
+ [class.fixed-keyboard-key]="position === 'right'"
+ [class.not-last-key]="!last"
+ [class.big-floating-keyboard-key]="big && position === 'floating'"
+ [class.big-fixed-keyboard-key]="big && position === 'right'"
+ (click)="enterKey.emit(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 3d7143e51fa3ecda3d05d99bfa3858279c58d4b0..f2530e57172b321daf03de1f7dfefcf6f3640ef2 100644
--- a/projects/player/src/app/components/key/key.component.ts
+++ b/projects/player/src/app/components/key/key.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
-import { KeyboardService } from '../../services/keyboard.service';
+import {
+ Component, EventEmitter, Input, Output
+} from '@angular/core';
@Component({
selector: 'app-key',
@@ -9,6 +10,8 @@ import { KeyboardService } from '../../services/keyboard.service';
export class KeyComponent {
@Input() key!: string;
@Input() big!: boolean;
+ @Input() position!: 'floating' | 'right';
+ @Input() last!: boolean;
- constructor(public keyboardService: KeyboardService) { }
+ @Output() enterKey = new EventEmitter<string>();
}
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.css b/projects/player/src/app/components/keyboard/keyboard.component.css
index 223457a2428eb65565b21a4e392d1efa25231f90..8c5d0588b821a2128b692fc09f503f7d2a5baebd 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.css
+++ b/projects/player/src/app/components/keyboard/keyboard.component.css
@@ -1,4 +1,4 @@
-.keyboard-container{
+.floating-keyboard-container{
margin-top: 20px;
background-color: white;
border: lightgray solid 1px;
@@ -6,6 +6,15 @@
overflow-wrap: break-word;
}
+.fixed-keyboard-container{
+ height: 100vh;
+ min-width: 300px;
+ width: 25vw;
+ background-color: lightgray;
+ overflow-wrap: break-word;
+ overflow-y: auto;
+}
+
.keyboard-header{
cursor: move;
height: 40px;
@@ -16,6 +25,11 @@
.keyboard-inner-container{
padding: 10px;
+ text-align: center;
+}
+
+.fixed-keyboard-inner-container{
+ padding-top: 10vh;
}
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.html b/projects/player/src/app/components/keyboard/keyboard.component.html
index 85b56c422901f1dcb8a7c6d46b5ff27b36ac1b01..0ff4ebe1f50f88cbda2a3e57aa85bae5303f3a6b 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.html
+++ b/projects/player/src/app/components/keyboard/keyboard.component.html
@@ -1,24 +1,24 @@
-<div class="keyboard-container"
- [style.margin-bottom.px]="inputComponent.clientHeight + positionOffset"
+<div [class]="position === 'floating' ? 'floating-keyboard-container' : 'fixed-keyboard-container'"
+ [style.margin-bottom.px]="inputElement.clientHeight + positionOffset"
(mousedown)="onMouseDown($event, false)">
- <div class="keyboard-header"></div>
+ <div *ngIf="position === 'floating'"
+ class="keyboard-header">
+ </div>
<div class="keyboard-inner-container"
+ [class.fixed-keyboard-inner-container]="position === 'right'"
(mousedown)="onMouseDown($event, true)">
- <app-french-keyboard *ngIf="preset === 'french'"></app-french-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-french-keyboard
+ *ngIf="preset === 'french'"
+ [position]="position"
+ (enterKey)="enterKey.emit($event)">
+ </app-french-keyboard>
<app-math-keyboard
- *ngIf="preset === 'comparisonOperators'"
- [inputComponent]="inputComponent"
- [preset]="preset">
+ *ngIf="preset !== 'french'"
+ [inputElement]="inputElement"
+ [preset]="preset"
+ [position]="position"
+ (deleteCharacter)="deleteCharacter.emit()"
+ (enterKey)="enterKey.emit($event)">
</app-math-keyboard>
</div>
</div>
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.ts b/projects/player/src/app/components/keyboard/keyboard.component.ts
index 58696969081736a1c1fea9c8e28137559f93abb7..4d37ea747248c47e7eafc1dabe68649128cc77c7 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.ts
+++ b/projects/player/src/app/components/keyboard/keyboard.component.ts
@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import {
+ Component, EventEmitter, Input, Output
+} from '@angular/core';
@Component({
selector: 'app-keyboard',
@@ -7,9 +9,13 @@ import { Component, Input } from '@angular/core';
})
export class KeyboardComponent {
@Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
- @Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
+ @Input() position!: 'floating' | 'right';
+ @Input() inputElement!: HTMLTextAreaElement | HTMLInputElement;
@Input() positionOffset!: number;
+ @Output() deleteCharacter = new EventEmitter();
+ @Output() enterKey = new EventEmitter<string>();
+
onMouseDown = (event: MouseEvent, stopPropagation: boolean): void => {
event.preventDefault();
if (stopPropagation) {
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index beac5e49713810c26fd254a2c8cc72eaa5da6c58..8665105bd36d51e4be7babced2a81b4bda62badd 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -10,6 +10,14 @@
scrollPagesView"></ng-container>
</div>
</div>
+ <app-keyboard *ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
+ [positionOffset]="0"
+ [inputElement]="keyboardService.inputElement"
+ [position]="keyboardService.position"
+ [preset]="keyboardService.preset"
+ (deleteCharacter)="keyboardService.deleterCharacters()"
+ (enterKey)="keyboardService.enterKey($event)">
+ </app-keyboard>
</div>
<ng-template #alwaysVisiblePageView>
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index 93988dec865858e0b0434cb4f9d4a782086f2065..c00487d47ca1be53fb1d2e0644abebcff652691a 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -6,6 +6,7 @@ import { FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
+import { KeyboardService } from '../../services/keyboard.service';
import { NativeEventService } from '../../services/native-event.service';
import { PlayerConfig } from '../../models/verona';
import { Page } from '../../../../../common/models/page';
@@ -49,9 +50,12 @@ export class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
containerMaxWidth: { alwaysVisiblePage: string, scrollPages: string } =
{ alwaysVisiblePage: '0px', scrollPages: '0px' };
- constructor(private translateService: TranslateService,
- private nativeEventService: NativeEventService,
- private changeDetectorRef: ChangeDetectorRef) {
+ constructor(
+ public keyboardService: KeyboardService,
+ private translateService: TranslateService,
+ private nativeEventService: NativeEventService,
+ private changeDetectorRef: ChangeDetectorRef
+ ) {
}
ngOnInit(): void {
diff --git a/projects/player/src/app/components/math-keyboard/math-keyboard.component.css b/projects/player/src/app/components/math-keyboard/math-keyboard.component.css
index 54bc9d454748d601dba983d27de101e22f2d4a52..a125b68e39a3434032033889b59d8c5c0d433241 100644
--- a/projects/player/src/app/components/math-keyboard/math-keyboard.component.css
+++ b/projects/player/src/app/components/math-keyboard/math-keyboard.component.css
@@ -1,4 +1,4 @@
-.delete-characters{
+.delete-characters-floating-keyboard{
font-size: x-large;
width: 85px;
height: 40px;
@@ -7,14 +7,41 @@
color: #fff;
}
-.clear-button-container{
+.delete-characters-fixed-keyboard{
+ font-size: x-large;
+ width: 135px;
+ height: 65px;
+ border-radius: 65px;
+ background-color: dimgray;
+ color: #fff;
+}
+
+.fixed-keyboard-key{
+ width: 65px;
+ height: 65px;
+}
+
+.clear-button-container-floating-keyboard{
margin-left: 45px;
}
-.grid-layout {
+.clear-button-container-fixed-keyboard{
+ margin-left: 70px;
+}
+
+.floating-grid-layout {
margin-top: 15px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
+
+.fixed-grid-layout {
+ justify-content: center;
+ margin-top: 15px;
+ display: grid;
+ grid-template-columns: 70px 70px 65px;
+ grid-template-rows: 70px 70px;
+}
+
diff --git a/projects/player/src/app/components/math-keyboard/math-keyboard.component.html b/projects/player/src/app/components/math-keyboard/math-keyboard.component.html
index c85f4d9e8acc5f99c9210ee3bff775bb8a026686..c3316828a90eb93b8a9af618247b1e3246e5447b 100644
--- a/projects/player/src/app/components/math-keyboard/math-keyboard.component.html
+++ b/projects/player/src/app/components/math-keyboard/math-keyboard.component.html
@@ -6,14 +6,18 @@
<ng-template #comparisonOperatorsTemplate>
<div *ngFor="let row of comparisonOperators">
<ng-container *ngFor="let key of row">
- <app-key [key]="key"></app-key>
+ <app-key
+ [position]="position"
+ [key]="key"
+ (enterKey)="enterKey.emit($event)">
+ </app-key>
</ng-container>
</div>
- <div class="clear-button-container">
+ <div [class]="position === 'floating' ? 'clear-button-container-floating-keyboard' : 'clear-button-container-fixed-keyboard'">
<button type="button"
mat-mini-fab
- class="delete-characters"
- (click)="keyboardService.deleterCharacters()">
+ [class]="position === 'floating' ? 'delete-characters-floating-keyboard' : 'delete-characters-fixed-keyboard'"
+ (click)="deleteCharacter.emit()">
<mat-icon>keyboard_backspace</mat-icon>
</button>
</div>
@@ -21,36 +25,46 @@
<ng-template #numbersTemplate>
<div *ngFor="let row of numbers; let last = last">
- <ng-container *ngFor="let key of row">
- <app-key [key]="key"></app-key>
+ <ng-container *ngFor="let key of row; let lastRowKey = last">
+ <app-key
+ [key]="key"
+ [last]="!last && lastRowKey"
+ [position]="position"
+ (enterKey)="enterKey.emit($event)">
+ </app-key>
<button *ngIf="last"
type="button"
mat-mini-fab
- class="delete-characters"
- (click)="keyboardService.deleterCharacters()">
+ [class]="position === 'floating' ? 'delete-characters-floating-keyboard' : 'delete-characters-fixed-keyboard'"
+ (click)="deleteCharacter.emit()">
<mat-icon>keyboard_backspace</mat-icon>
</button>
</ng-container>
</div>
</ng-template>
-<div *ngIf="preset === 'numbersAndOperators'" class="grid-layout">
+<div *ngIf="preset === 'numbersAndOperators'"
+ [class]="position === 'floating' ? 'floating-grid-layout' : 'fixed-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 !== '='"
[key]="key"
+ [position]="position"
[style.grid-column-start]="columnIndex+1"
[style.grid-column-end]="columnIndex+2"
[style.grid-row-start]="rowIndex + 1"
- [style.grid-row-end]="rowIndex + 2">
+ [style.grid-row-end]="rowIndex + 2"
+ (enterKey)="enterKey.emit($event)">
</app-key>
<app-key *ngIf="key === '='"
[key]="key"
+ [position]="position"
[big]="true"
[style.grid-column-start]="3"
[style.grid-column-end]="3"
[style.grid-row-start]="1"
- [style.grid-row-end]="3">
+ [style.grid-row-end]="3"
+ (enterKey)="enterKey.emit($event)">
</app-key>
</ng-container>
</ng-container>
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
index 5495e301ee25c0e03469ca9236be45a6876b8417..b5b7a653a095b0ea9e7a726dae64a78108cdd4b8 100644
--- a/projects/player/src/app/components/math-keyboard/math-keyboard.component.ts
+++ b/projects/player/src/app/components/math-keyboard/math-keyboard.component.ts
@@ -1,15 +1,21 @@
-import { AfterViewInit, Component, Input } from '@angular/core';
-import { KeyboardService } from '../../services/keyboard.service';
+import {
+ AfterViewInit, Component, EventEmitter, Input, OnInit, Output
+} from '@angular/core';
@Component({
selector: 'app-math-keyboard',
templateUrl: './math-keyboard.component.html',
styleUrls: ['./math-keyboard.component.css']
})
-export class MathKeyboardComponent implements AfterViewInit {
+export class MathKeyboardComponent implements OnInit, AfterViewInit {
@Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
- @Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
- allowedKeys!: string[];
+ @Input() position!: 'floating' | 'right';
+ @Input() inputElement!: HTMLTextAreaElement | HTMLInputElement;
+
+ @Output() deleteCharacter = new EventEmitter();
+ @Output() enterKey = new EventEmitter<string>();
+
+ private allowedKeys!: string[];
readonly comparisonOperators: string[][] = [
['<', '=', '>']
@@ -28,10 +34,7 @@ export class MathKeyboardComponent implements AfterViewInit {
['=']
];
- constructor(public keyboardService: KeyboardService) {
- }
-
- ngAfterViewInit(): void {
+ ngOnInit(): void {
if (this.preset === 'comparisonOperators') {
this.allowedKeys = this.getAllowedKeys(this.comparisonOperators);
} else {
@@ -39,8 +42,11 @@ export class MathKeyboardComponent implements AfterViewInit {
this.getAllowedKeys(this.operators).concat(this.getAllowedKeys(this.numbers)) :
this.getAllowedKeys(this.numbers);
}
- if (this.inputComponent) {
- this.inputComponent.addEventListener('keydown', this.restrict.bind(this));
+ }
+
+ ngAfterViewInit(): void {
+ if (this.inputElement) {
+ this.inputElement.addEventListener('keydown', this.restrict.bind(this));
}
}
diff --git a/projects/player/src/app/services/keyboard.service.ts b/projects/player/src/app/services/keyboard.service.ts
index 07d601025e3bda1f1b6e62ce701f3ad824023863..875c9f36f9b9018ab9f3d2bab618a0a17d7cf2b6 100644
--- a/projects/player/src/app/services/keyboard.service.ts
+++ b/projects/player/src/app/services/keyboard.service.ts
@@ -1,12 +1,16 @@
import { Injectable } from '@angular/core';
-import { FormElementComponent } from '../../../../common/directives/form-element-component.directive';
+import { TextFieldComponent } from '../../../../common/ui-elements/text-field/text-field.component';
+import { TextAreaComponent } from '../../../../common/ui-elements/text-area/text-area.component';
@Injectable({
providedIn: 'root'
})
export class KeyboardService {
- private inputElement!: HTMLTextAreaElement | HTMLInputElement;
- private elementComponent!: FormElementComponent;
+ isOpen!: boolean;
+ preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
+ position!: 'floating' | 'right';
+ inputElement!: HTMLTextAreaElement | HTMLInputElement;
+ elementComponent!: TextFieldComponent | TextAreaComponent;
enterKey = (key: string): void => {
const selectionStart = this.inputElement.selectionStart || 0;
@@ -27,13 +31,21 @@ export class KeyboardService {
}
openKeyboard(inputElement: HTMLTextAreaElement | HTMLInputElement,
- elementComponent: FormElementComponent): boolean {
+ preset: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none',
+ position: 'floating' | 'right',
+ elementComponent: TextFieldComponent | TextAreaComponent): boolean {
this.inputElement = inputElement;
+ this.preset = preset;
+ this.position = position;
this.elementComponent = elementComponent;
+ this.isOpen = true;
return true;
}
- closeKeyboard = (): boolean => false;
+ closeKeyboard(): boolean {
+ this.isOpen = false;
+ return false;
+ }
private insert(selectionStart: number, selectionEnd: number, newSelection: number, key: string) {
const startText = this.inputElement.value.substring(0, selectionStart);