diff --git a/projects/player/src/app/components/element-compound-group/element-compound-group.component.html b/projects/player/src/app/components/element-compound-group/element-compound-group.component.html
index 7c8b896eba999c320f466938c472e0ad594d271f..7418c31652abc00410a64fc64eeef9ff42a78f21 100644
--- a/projects/player/src/app/components/element-compound-group/element-compound-group.component.html
+++ b/projects/player/src/app/components/element-compound-group/element-compound-group.component.html
@@ -17,13 +17,5 @@
</form>
<aspect-floating-keyboard
- *ngIf="keyboardService.preset !== 'none'"
- [isKeyboardOpen]="isKeyboardOpen && keyboardService.position === 'floating'"
- [overlayOrigin]="keyboardService.elementComponent"
- [inputElement]="keyboardService.inputElement"
- [position]="keyboardService.position"
- [preset]="keyboardService.preset"
- [positionOffset]="0"
- (deleteCharacter)="keyboardService.deleterCharacters()"
- (enterKey)="keyboardService.enterKey($event)">
+ [isKeyboardOpen]="isKeyboardOpen && keyboardService.position === 'floating'">
</aspect-floating-keyboard>
diff --git a/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts b/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
index e842bd0d6c35a7e8a4ab26bcf6e6b788b77bdffc..c563ba79789afa5c798f8a3e52539e026ba9b616 100644
--- a/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
+++ b/projects/player/src/app/components/element-compound-group/element-compound-group.component.ts
@@ -1,19 +1,18 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import {
- ClozeElement, InputElement, LikertElement, TextFieldElement
+ ClozeElement, InputElement, LikertElement
} from '../../../../../common/interfaces/elements';
import { ClozeUtils } from '../../../../../common/util/cloze';
import { UnitStateService } from '../../services/unit-state.service';
import { ElementComponent } from '../../../../../common/directives/element-component.directive';
import { UnitStateElementMapperService } from '../../services/unit-state-element-mapper.service';
-import { ElementFormGroupDirective } from '../../directives/element-form-group.directive';
import { MessageService } from '../../../../../common/services/message.service';
import { VeronaSubscriptionService } from '../../services/verona-subscription.service';
import { ValidatorService } from '../../services/validator.service';
import { KeyboardService } from '../../services/keyboard.service';
-import { TextAreaComponent } from '../../../../../common/components/ui-elements/text-area.component';
import { TextFieldComponent } from '../../../../../common/components/ui-elements/text-field.component';
+import { ElementFormGroupDirective } from '../../directives/element-form-group.directive';
@Component({
selector: 'aspect-element-compound-group',
@@ -22,10 +21,11 @@ import { TextFieldComponent } from '../../../../../common/components/ui-elements
})
export class ElementCompoundGroupComponent extends ElementFormGroupDirective implements OnInit {
@ViewChild('elementComponent') elementComponent!: ElementComponent;
- isKeyboardOpen!: boolean;
ClozeElement!: ClozeElement;
LikertElement!: LikertElement;
+ isKeyboardOpen!: boolean;
+
constructor(
public keyboardService: KeyboardService,
public unitStateService: UnitStateService,
@@ -51,22 +51,10 @@ export class ElementCompoundGroupComponent extends ElementFormGroupDirective imp
this.registerAtUnitStateService(childModel.id, childModel.value, child, this.pageIndex);
if (childModel.type === 'text-field') {
(child as TextFieldComponent)
- .onFocusChanged.subscribe(element => this.onFocusChanged(element, child as TextFieldComponent));
+ .onFocusChanged.subscribe(element => {
+ this.isKeyboardOpen = this.keyboardService.toggleKeyboard(element, child as TextFieldComponent);
+ });
}
});
}
-
- onFocusChanged(focussedElement: HTMLElement | null, elementComponent: TextAreaComponent | TextFieldComponent): void {
- if (focussedElement) {
- const focussedInputElement = this.elementModel.type === 'text-area' ?
- focussedElement as HTMLTextAreaElement :
- focussedElement as HTMLInputElement;
- const preset = (elementComponent.elementModel as TextFieldElement).inputAssistancePreset;
- const position = (elementComponent.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/element-text-input-group/element-text-input-group.component.html b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.html
index f79fb974fdc6e56344889a819e61216d78a90b74..0200f6f8eafd77e9927de87190847d7c7b0528c7 100644
--- a/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.html
+++ b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.html
@@ -5,26 +5,18 @@
#elementComponent
[parentForm]="form"
[elementModel]="elementModel | cast: TextAreaElement"
- (onFocusChanged)="onFocusChanged($event, elementComponent)">
+ (onFocusChanged)="this.isKeyboardOpen = keyboardService.toggleKeyboard($event, elementComponent)">
</aspect-text-area>
<aspect-text-field
*ngIf="elementModel.type === 'text-field'"
#elementComponent
[parentForm]="form"
[elementModel]="elementModel | cast: TextFieldElement"
- (onFocusChanged)="onFocusChanged($event, elementComponent)">
+ (onFocusChanged)="this.isKeyboardOpen = keyboardService.toggleKeyboard($event, elementComponent)">
</aspect-text-field>
</form>
<aspect-floating-keyboard
- *ngIf="keyboardService.preset !== 'none'"
- [isKeyboardOpen]="isKeyboardOpen && keyboardService.position === 'floating'"
- [overlayOrigin]="elementComponent"
- [inputElement]="keyboardService.inputElement"
- [position]="keyboardService.position"
- [preset]="keyboardService.preset"
- [positionOffset]="elementModel.type === 'text-field' ? 20 : 0"
- (deleteCharacter)="keyboardService.deleterCharacters()"
- (enterKey)="keyboardService.enterKey($event)">
+ [isKeyboardOpen]="isKeyboardOpen && keyboardService.position === 'floating'">
</aspect-floating-keyboard>
diff --git a/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
index b317e767338ca12538eed4cee3c9ce0c76897ab4..7e0f537ce1b23855d7b97c6e34112418d7c988fc 100644
--- a/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
+++ b/projects/player/src/app/components/element-text-input-group/element-text-input-group.component.ts
@@ -6,15 +6,13 @@ import { KeyboardService } from '../../services/keyboard.service';
import {
InputElement, TextAreaElement, TextFieldElement
} from '../../../../../common/interfaces/elements';
-import { TextFieldComponent } from '../../../../../common/components/ui-elements/text-field.component';
-import { TextAreaComponent } from '../../../../../common/components/ui-elements/text-area.component';
import { UnitStateService } from '../../services/unit-state.service';
import { UnitStateElementMapperService } from '../../services/unit-state-element-mapper.service';
-import { ElementFormGroupDirective } from '../../directives/element-form-group.directive';
import { MessageService } from '../../../../../common/services/message.service';
import { VeronaSubscriptionService } from '../../services/verona-subscription.service';
import { ElementComponent } from '../../../../../common/directives/element-component.directive';
import { ValidatorService } from '../../services/validator.service';
+import { ElementFormGroupDirective } from '../../directives/element-form-group.directive';
@Component({
selector: 'aspect-element-text-input-group',
@@ -23,10 +21,11 @@ import { ValidatorService } from '../../services/validator.service';
})
export class ElementTextInputGroupComponent extends ElementFormGroupDirective implements OnInit, AfterViewInit {
@ViewChild('elementComponent') elementComponent!: ElementComponent;
- isKeyboardOpen!: boolean;
TextAreaElement!: TextAreaElement;
TextFieldElement!: TextFieldElement;
+ isKeyboardOpen!: boolean;
+
constructor(
public keyboardService: KeyboardService,
public unitStateService: UnitStateService,
@@ -48,18 +47,4 @@ export class ElementTextInputGroupComponent extends ElementFormGroupDirective im
this.elementModel.id, (this.elementModel as InputElement).value, this.elementComponent, this.pageIndex
);
}
-
- onFocusChanged(focussedElement: HTMLElement | null, elementComponent: TextAreaComponent | TextFieldComponent) : 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/floating-keyboard/floating-keyboard.component.html b/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.html
index 99b2c3d183a540ced77e9fd3b058dae839934332..1b2ad3572d4bf9064ff76e51b48e7444e915c4de 100644
--- a/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.html
+++ b/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.html
@@ -1,14 +1,15 @@
<ng-template
+ *ngIf="keyboardService.preset !== 'none'"
cdkConnectedOverlay
- [cdkConnectedOverlayOrigin]="overlayOrigin"
- [cdkConnectedOverlayOpen]="isKeyboardOpen">
+ [cdkConnectedOverlayOrigin]="keyboardService.elementComponent"
+ [cdkConnectedOverlayOpen]="isKeyboardOpen && keyboardService.position === 'floating'">
<aspect-keyboard
cdkDrag
- [positionOffset]="positionOffset"
- [inputElement]="inputElement"
- [position]="position"
- [preset]="preset"
- (deleteCharacter)="deleteCharacter.emit($event)"
- (enterKey)="enterKey.emit($event)">
+ [positionOffset]="keyboardService.elementComponent.elementModel.type === 'text-field' ? 20 : 0"
+ [inputElement]="keyboardService.inputElement"
+ [position]="keyboardService.position"
+ [preset]="keyboardService.preset"
+ (deleteCharacter)="keyboardService.deleterCharacters()"
+ (enterKey)="keyboardService.enterKey($event)">
</aspect-keyboard>
</ng-template>
diff --git a/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.ts b/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.ts
index 6a9164843d221d2062822216d1848961a29a1bff..0be4161dfc5b59790934f99d486ec7b394c569ab 100644
--- a/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.ts
+++ b/projects/player/src/app/components/floating-keyboard/floating-keyboard.component.ts
@@ -1,8 +1,7 @@
import {
- Component, EventEmitter, Input, Output
+ Component, Input
} from '@angular/core';
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { InputAssistancePreset } from '../../../../../common/interfaces/elements';
+import { KeyboardService } from '../../services/keyboard.service';
@Component({
selector: 'aspect-floating-keyboard',
@@ -10,13 +9,7 @@ import { InputAssistancePreset } from '../../../../../common/interfaces/elements
styleUrls: ['./floating-keyboard.component.scss']
})
export class FloatingKeyboardComponent {
- @Input() preset!: InputAssistancePreset;
- @Input() position!: 'floating' | 'right';
- @Input() inputElement!: HTMLTextAreaElement | HTMLInputElement;
- @Input() positionOffset!: number;
@Input() isKeyboardOpen!: boolean;
- @Input() overlayOrigin!: CdkOverlayOrigin;
- @Output() deleteCharacter = new EventEmitter();
- @Output() enterKey = new EventEmitter<string>();
+ 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 b99bcbf34ca4a45b8b51128de4936439ed4ec1d8..e7801581778efb60083b8bc4f9284c698b2a30ee 100644
--- a/projects/player/src/app/services/keyboard.service.ts
+++ b/projects/player/src/app/services/keyboard.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { TextFieldComponent } from '../../../../common/components/ui-elements/text-field.component';
import { TextAreaComponent } from '../../../../common/components/ui-elements/text-area.component';
-import { InputAssistancePreset } from '../../../../common/interfaces/elements';
+import { InputAssistancePreset, TextFieldElement } from '../../../../common/interfaces/elements';
@Injectable({
providedIn: 'root'
@@ -13,6 +13,21 @@ export class KeyboardService {
inputElement!: HTMLTextAreaElement | HTMLInputElement;
elementComponent!: TextFieldComponent | TextAreaComponent;
+ toggleKeyboard(focussedElement: HTMLElement | null,
+ elementComponent: TextAreaComponent | TextFieldComponent): boolean {
+ if (focussedElement) {
+ const focussedInputElement = elementComponent.elementModel.type === 'text-area' ?
+ focussedElement as HTMLTextAreaElement :
+ focussedElement as HTMLInputElement;
+ const preset = (elementComponent.elementModel as TextFieldElement).inputAssistancePreset;
+ const position = (elementComponent.elementModel as TextFieldElement).inputAssistancePosition;
+ this.openKeyboard(focussedInputElement, preset, position, elementComponent);
+ } else {
+ this.closeKeyboard();
+ }
+ return this.isOpen;
+ }
+
enterKey = (key: string): void => {
const selectionStart = this.inputElement.selectionStart || 0;
const selectionEnd = this.inputElement.selectionEnd || 0;
@@ -20,7 +35,7 @@ export class KeyboardService {
this.insert(selectionStart, selectionEnd, newSelection, key);
};
- deleterCharacters():void {
+ deleterCharacters(): void {
let selectionStart = this.inputElement.selectionStart || 0;
const selectionEnd = this.inputElement.selectionEnd || 0;
if (selectionEnd > 0) {
@@ -31,10 +46,10 @@ export class KeyboardService {
}
}
- openKeyboard(inputElement: HTMLTextAreaElement | HTMLInputElement,
- preset: InputAssistancePreset,
- position: 'floating' | 'right',
- elementComponent: TextFieldComponent | TextAreaComponent): boolean {
+ private openKeyboard(inputElement: HTMLTextAreaElement | HTMLInputElement,
+ preset: InputAssistancePreset,
+ position: 'floating' | 'right',
+ elementComponent: TextFieldComponent | TextAreaComponent): boolean {
this.inputElement = inputElement;
this.preset = preset;
this.position = position;
@@ -43,7 +58,7 @@ export class KeyboardService {
return true;
}
- closeKeyboard(): boolean {
+ private closeKeyboard(): boolean {
this.isOpen = false;
return false;
}