From 751a65fee1bdfeab2ac474f2493e59c8c4a86174 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 25 Nov 2021 17:52:23 +0100
Subject: [PATCH] Add new element TextFieldSimple
This is a native input element which is used in cloze elements. Here
(sub)elements need to be positioned inline, which is hard to do with
material components.
Also add a method to all form elements to set their form value, which is
now only used by the simple text field but may be useful for other
elements, which don't integrate in material form fields.
---
.../compound-elements/cloze.component.ts | 4 ++--
.../text-field-simple.component.ts | 17 +++++++++++++++++
.../common/form-element-component.directive.ts | 4 ++++
.../models/compound-elements/cloze-element.ts | 3 ++-
.../common/models/text-field-simple-element.ts | 8 ++++++++
projects/common/shared.module.ts | 4 +++-
6 files changed, 36 insertions(+), 4 deletions(-)
create mode 100644 projects/common/element-components/text-field-simple.component.ts
create mode 100644 projects/common/models/text-field-simple-element.ts
diff --git a/projects/common/element-components/compound-elements/cloze.component.ts b/projects/common/element-components/compound-elements/cloze.component.ts
index 5063ae977..74219b106 100644
--- a/projects/common/element-components/compound-elements/cloze.component.ts
+++ b/projects/common/element-components/compound-elements/cloze.component.ts
@@ -53,13 +53,13 @@ import { FormElementComponent } from '../../form-element-component.directive';
[elementModel]="$any(part.value)"
(elementValueChanged)="elementValueChanged.emit($event)">
</app-dropdown>
- <app-text-field *ngIf="part.type === 'text-field'" #textfieldComponent
+ <app-text-field-simple *ngIf="part.type === 'text-field'" #textfieldComponent
[parentForm]="parentForm"
[style.display]="'inline-block'"
[style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
[elementModel]="$any(part.value)"
(elementValueChanged)="elementValueChanged.emit($event)">
- </app-text-field>
+ </app-text-field-simple>
<div *ngIf="part.type === 'drop-list'"
[style.display]="'inline-block'"
[style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
diff --git a/projects/common/element-components/text-field-simple.component.ts b/projects/common/element-components/text-field-simple.component.ts
new file mode 100644
index 000000000..6b668e640
--- /dev/null
+++ b/projects/common/element-components/text-field-simple.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { FormElementComponent } from '../form-element-component.directive';
+import { TextFieldSimpleElement } from '../models/text-field-simple-element';
+
+@Component({
+ selector: 'app-text-field-simple',
+ template: `
+ <input type="text" form="parentForm"
+ [style.width.px]="elementModel.width"
+ [style.height.px]="elementModel.height"
+ value="{{elementModel.value}}"
+ (input)="setFormValue($any($event.target).value)">
+ `
+})
+export class TextFieldSimpleComponent extends FormElementComponent {
+ @Input() elementModel!: TextFieldSimpleElement;
+}
diff --git a/projects/common/form-element-component.directive.ts b/projects/common/form-element-component.directive.ts
index c9589c187..012578d96 100644
--- a/projects/common/form-element-component.directive.ts
+++ b/projects/common/form-element-component.directive.ts
@@ -48,6 +48,10 @@ export abstract class FormElementComponent extends ElementComponent implements O
new FormControl({});
}
+ setFormValue(value: InputElementValue): void {
+ this.elementFormControl.setValue(value);
+ }
+
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
diff --git a/projects/common/models/compound-elements/cloze-element.ts b/projects/common/models/compound-elements/cloze-element.ts
index 3d07b92f7..4132d926b 100644
--- a/projects/common/models/compound-elements/cloze-element.ts
+++ b/projects/common/models/compound-elements/cloze-element.ts
@@ -10,6 +10,7 @@ import { CheckboxElement } from '../checkbox-element';
import { DropdownElement } from '../dropdown-element';
import { DropListElement } from './drop-list';
import { initFontElement } from '../../util/unit-interface-initializer';
+import { TextFieldSimpleElement } from '../text-field-simple-element';
// TODO styles like em dont continue after inserted components
@@ -115,7 +116,7 @@ export class ClozeElement extends CompoundElement implements FontElement {
let newElement: InputElement;
switch (elementModel.type) {
case 'text-field':
- newElement = new TextFieldElement(elementModel);
+ newElement = new TextFieldSimpleElement(elementModel);
(newElement as TextFieldElement).label = '';
break;
case 'text-area':
diff --git a/projects/common/models/text-field-simple-element.ts b/projects/common/models/text-field-simple-element.ts
new file mode 100644
index 000000000..6eb9edff2
--- /dev/null
+++ b/projects/common/models/text-field-simple-element.ts
@@ -0,0 +1,8 @@
+import { InputElement, UIElement } from './uI-element';
+
+export class TextFieldSimpleElement extends InputElement {
+ constructor(serializedElement: UIElement) {
+ super(serializedElement);
+ Object.assign(this, serializedElement);
+ }
+}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 9d08873a1..464646b9d 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -44,6 +44,7 @@ import { Magnifier } from './element-components/magnifier.component';
import { RadioGroupImagesComponent } from './element-components/compound-elements/radio-group-images.component';
import { DropListComponent } from './element-components/compound-elements/drop-list.component';
import { ClozeComponent } from './element-components/compound-elements/cloze.component';
+import { TextFieldSimpleComponent } from './element-components/text-field-simple.component';
@NgModule({
imports: [
@@ -85,7 +86,8 @@ import { ClozeComponent } from './element-components/compound-elements/cloze.com
Magnifier,
RadioGroupImagesComponent,
DropListComponent,
- ClozeComponent
+ ClozeComponent,
+ TextFieldSimpleComponent
],
exports: [
CommonModule,
--
GitLab