diff --git a/projects/common/components/compound-child-overlay.component.ts b/projects/common/components/compound-child-overlay.component.ts
index b134b6ac32d4e441e1a4df3db9c7d48e434b48d1..06cc319fd5ba4d94318172aab76b4d3213d924d2 100644
--- a/projects/common/components/compound-child-overlay.component.ts
+++ b/projects/common/components/compound-child-overlay.component.ts
@@ -5,7 +5,7 @@ import { FormGroup } from '@angular/forms';
import { ElementComponent } from '../directives/element-component.directive';
import {
DropListSimpleElement,
- TextFieldSimpleElement,
+ TextFieldElement,
ToggleButtonElement,
ValueChangeElement
} from '../interfaces/elements';
@@ -17,31 +17,31 @@ import {
[style.border-radius.px]="3"
(click)="elementSelected.emit(this); $event.stopPropagation();">
<aspect-toggle-button *ngIf="element.type === 'toggle-button'" #childComponent
- [style.pointer-events]="editorMode ? 'none' : 'auto'"
- [parentForm]="parentForm"
- [style.display]="'inline-block'"
- [style.vertical-align]="'middle'"
- [elementModel]="$any(element)"
- >
- </aspect-toggle-button>
- <aspect-text-field-simple *ngIf="element.type === 'text-field'" #childComponent
- [style.pointer-events]="editorMode ? 'none' : 'auto'"
- [parentForm]="parentForm"
- [style.display]="'inline-block'"
- [elementModel]="$any(element)">
- </aspect-text-field-simple>
- <aspect-drop-list-simple *ngIf="element.type === 'drop-list'" #childComponent
[style.pointer-events]="editorMode ? 'none' : 'auto'"
[parentForm]="parentForm"
[style.display]="'inline-block'"
[style.vertical-align]="'middle'"
[elementModel]="$any(element)">
+ </aspect-toggle-button>
+ <aspect-text-field *ngIf="element.type === 'text-field'" #childComponent
+ [isClozeChild]="true"
+ [style.pointer-events]="editorMode ? 'none' : 'auto'"
+ [parentForm]="parentForm"
+ [style.display]="'inline-block'"
+ [elementModel]="$any(element)">
+ </aspect-text-field>
+ <aspect-drop-list-simple *ngIf="element.type === 'drop-list'" #childComponent
+ [style.pointer-events]="editorMode ? 'none' : 'auto'"
+ [parentForm]="parentForm"
+ [style.display]="'inline-block'"
+ [style.vertical-align]="'middle'"
+ [elementModel]="$any(element)">
</aspect-drop-list-simple>
</div>
`
})
export class CompoundChildOverlayComponent {
- @Input() element!: ToggleButtonElement | TextFieldSimpleElement | DropListSimpleElement;
+ @Input() element!: ToggleButtonElement | TextFieldElement | DropListSimpleElement;
@Input() parentForm!: FormGroup;
@Input() editorMode: boolean = false;
@Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
diff --git a/projects/common/components/ui-elements/text-field-simple.component.ts b/projects/common/components/ui-elements/text-field-simple.component.ts
deleted file mode 100644
index 6cd951dbb46b051f2a6abe7504c312c7fbbddfe7..0000000000000000000000000000000000000000
--- a/projects/common/components/ui-elements/text-field-simple.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
- Component, EventEmitter, Input, Output
-} from '@angular/core';
-import { FormElementComponent } from '../../directives/form-element-component.directive';
-import { TextFieldSimpleElement } from '../../interfaces/elements';
-
-@Component({
- selector: 'aspect-text-field-simple',
- template: `
- <input #input type="text"
- autocomplete="off"
- autocapitalize="none"
- autocorrect="off"
- spellcheck="false"
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
- [style.line-height.px]="elementModel.styling.fontSize"
- [style.color]="elementModel.styling.fontColor"
- [style.font-family]="elementModel.styling.font"
- [style.font-size.px]="elementModel.styling.fontSize"
- [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
- [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
- [readonly]="elementModel.readOnly"
- [formControl]="elementFormControl"
- [value]="elementModel.value"
- (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
- (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
- `,
- styles: [
- 'input {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}'
- ]
-})
-export class TextFieldSimpleComponent extends FormElementComponent {
- @Input() elementModel!: TextFieldSimpleElement;
- @Output() onFocusChanged = new EventEmitter<HTMLElement | null>();
-}
diff --git a/projects/common/components/ui-elements/text-field.component.ts b/projects/common/components/ui-elements/text-field.component.ts
index 717ea2e5c48aa465896e07ed24a5c41fc083f437..6987ab1fb21a76133d228b4c4f64ca8bcceaf448 100644
--- a/projects/common/components/ui-elements/text-field.component.ts
+++ b/projects/common/components/ui-elements/text-field.component.ts
@@ -7,7 +7,8 @@ import { TextFieldElement } from '../../interfaces/elements';
@Component({
selector: 'aspect-text-field',
template: `
- <mat-form-field [class.small-input]="elementModel.label === ''"
+ <mat-form-field *ngIf="!isClozeChild"
+ [class.small-input]="elementModel.label === ''"
[style.width.%]="100"
[style.height.%]="100"
[style.line-height.%]="elementModel.styling.lineHeight"
@@ -41,13 +42,37 @@ import { TextFieldElement } from '../../interfaces/elements';
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</mat-form-field>
+ <input *ngIf="isClozeChild"
+ #input type="text"
+ class="clozeChild"
+ autocomplete="off"
+ autocapitalize="none"
+ autocorrect="off"
+ spellcheck="false"
+ [style.width.px]="elementModel.width"
+ [style.height.px]="elementModel.height"
+ [style.line-height.%]="elementModel.styling.lineHeight"
+ [style.color]="elementModel.styling.fontColor"
+ [style.font-family]="elementModel.styling.font"
+ [style.font-size.px]="elementModel.styling.fontSize"
+ [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+ [readonly]="elementModel.readOnly"
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
+ (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+ (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
`,
styles: [
':host ::ng-deep .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}',
- ':host ::ng-deep .small-input .mat-form-field-outline-gap {display: none; }'
+ ':host ::ng-deep .small-input .mat-form-field-outline-gap {display: none; }',
+ '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}'
]
})
export class TextFieldComponent extends FormElementComponent {
@Input() elementModel!: TextFieldElement;
+ @Input() isClozeChild!: boolean;
+
@Output() onFocusChanged = new EventEmitter<HTMLElement | null>();
}
diff --git a/projects/common/interfaces/elements.ts b/projects/common/interfaces/elements.ts
index f706e3364e0dddf368cfe5a1b737253321626541..7afedb7688e7c3e84f3ec6782c83da72a4d38ac5 100644
--- a/projects/common/interfaces/elements.ts
+++ b/projects/common/interfaces/elements.ts
@@ -4,7 +4,7 @@ import { LikertColumn } from './likert';
export type InputElementValue = string[] | string | number | boolean | DragNDropValueObject[] | null;
export type UIElementType = 'text' | 'button' | 'text-field' | 'text-area' | 'checkbox'
| 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert-row' | 'radio-group-images'
-| 'drop-list' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button' | 'text-field-simple';
+| 'drop-list' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button';
export type InputAssistancePreset = 'none' | 'french' | 'numbers' | 'numbersAndOperators' | 'numbersAndBasicOperators'
| 'comparisonOperators' | 'squareDashDot' | 'placeValue';
export type DragNDropValueObject = {
@@ -266,7 +266,9 @@ export interface TextFieldElement extends InputElement {
inputAssistancePosition: 'floating' | 'right';
clearable: boolean;
position: PositionProperties;
- styling: BasicStyles;
+ styling: BasicStyles & {
+ lineHeight: number;
+ };
}
export interface TextAreaElement extends InputElement {
@@ -282,13 +284,6 @@ export interface TextAreaElement extends InputElement {
};
}
-export interface TextFieldSimpleElement extends InputElement {
- type: 'text-field';
- inputAssistancePreset: InputAssistancePreset;
- inputAssistancePosition: 'floating' | 'right';
- styling: BasicStyles; // TODO okay? bg-color?
-}
-
export interface TextElement extends UIElement {
type: 'text';
text: string;
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index c00e133165b16a8731dadaacd6f8da095ce4d281..4a8d02fdfdfdabc029b8d198a30d2e916e4ff711 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -43,7 +43,6 @@ import { Magnifier } from './components/magnifier.component';
import { RadioGroupImagesComponent } from './components/ui-elements/radio-group-images.component';
import { DropListComponent } from './components/ui-elements/drop-list.component';
import { ClozeComponent } from './components/ui-elements/cloze.component';
-import { TextFieldSimpleComponent } from './components/ui-elements/text-field-simple.component';
import { SliderComponent } from './components/ui-elements/slider.component';
import { SpellCorrectComponent } from './components/ui-elements/spell-correct.component';
import { DropListSimpleComponent } from './components/ui-elements/drop-list-simple.component';
@@ -97,11 +96,9 @@ import { CompoundChildOverlayComponent } from './components/compound-child-overl
RadioGroupImagesComponent,
DropListComponent,
ClozeComponent,
- TextFieldSimpleComponent,
DropListSimpleComponent,
SliderComponent,
SpellCorrectComponent,
- TextFieldSimpleComponent,
FrameComponent,
ToggleButtonComponent,
MarkingBarComponent,
@@ -128,7 +125,6 @@ import { CompoundChildOverlayComponent } from './components/compound-child-overl
ToggleButtonComponent,
TextFieldComponent,
DropListSimpleComponent,
- TextFieldSimpleComponent,
TextAreaComponent,
AudioComponent,
VideoComponent,
diff --git a/projects/common/tiptap-editor-extensions/text-field.ts b/projects/common/tiptap-editor-extensions/text-field.ts
index 599c04e35ea4b9b7469e55fbf61a05a39f0fadd5..59e1b65ab0e523ac9989bb3e26e4e9e9faaafa14 100644
--- a/projects/common/tiptap-editor-extensions/text-field.ts
+++ b/projects/common/tiptap-editor-extensions/text-field.ts
@@ -10,7 +10,7 @@ const TextFieldExtension =
addAttributes() {
return {
model: {
- default: ElementFactory.createElement({ type: 'text-field-simple' })
+ default: ElementFactory.createElement({ type: 'text-field' })
}
};
},
diff --git a/projects/common/util/element.factory.ts b/projects/common/util/element.factory.ts
index 2d1d2fc606f3e9cfcda59546275443a0260021ed..8b8990b441cb51471f586afcd7bc3540d29eb773 100644
--- a/projects/common/util/element.factory.ts
+++ b/projects/common/util/element.factory.ts
@@ -32,7 +32,7 @@ import {
RadioButtonGroupElement, SliderElement, SpellCorrectElement,
TextAreaElement,
TextElement,
- TextFieldElement, TextFieldSimpleElement, ToggleButtonElement,
+ TextFieldElement, ToggleButtonElement,
UIElement, UIElementType, UIElementValue,
VideoElement
} from '../interfaces/elements';
@@ -47,8 +47,6 @@ export abstract class ElementFactory {
return ElementFactory.createButtonElement(element as Partial<ButtonElement>);
case 'text-field':
return ElementFactory.createTextFieldElement(element as Partial<TextFieldElement>);
- // case 'text-field-simple':
- // return ElementFactory.createTextFieldSimpleElement(element as Partial<TextFieldSimpleElement>);
case 'text-area':
return ElementFactory.createTextAreaElement(element as Partial<TextAreaElement>);
case 'checkbox':
@@ -465,18 +463,6 @@ export abstract class ElementFactory {
};
}
- private static createTextFieldSimpleElement(element: Partial<TextFieldSimpleElement>): TextFieldSimpleElement {
- return {
- ...ElementFactory.initInputElement({ height: 25, ...element }),
- type: 'text-field',
- label: element.label !== undefined ? element.label : undefined,
- inputAssistancePreset: element.inputAssistancePreset !== undefined ? element.inputAssistancePreset : 'none',
- inputAssistancePosition: element.inputAssistancePosition !== undefined ?
- element.inputAssistancePosition : 'floating',
- styling: ElementFactory.initBasicStyles(element.styling)
- };
- }
-
private static createToggleButtonElement(element: Partial<ToggleButtonElement>): ToggleButtonElement {
return {
...ElementFactory.initInputElement({ height: 25, ...element }),
diff --git a/projects/editor/src/app/text-editor/angular-node-views/text-field-component-extension.ts b/projects/editor/src/app/text-editor/angular-node-views/text-field-component-extension.ts
index f3a8bda4133305be6c6ae55a057e72ba67d02964..cf32d13e170f5d29d7e4ae3b42d0ef7082e1a720 100644
--- a/projects/editor/src/app/text-editor/angular-node-views/text-field-component-extension.ts
+++ b/projects/editor/src/app/text-editor/angular-node-views/text-field-component-extension.ts
@@ -13,7 +13,7 @@ const TextFieldComponentExtension = (injector: Injector): Node => {
addAttributes() {
return {
model: {
- default: ElementFactory.createElement({ type: 'text-field-simple', height: 25, width: 100 })
+ default: ElementFactory.createElement({ type: 'text-field', height: 25, width: 100 })
}
};
},
diff --git a/projects/editor/src/app/text-editor/angular-node-views/text-field-nodeview.component.ts b/projects/editor/src/app/text-editor/angular-node-views/text-field-nodeview.component.ts
index e5ebe02127a8ba9bd1768cef9c893f6d57e559a5..381c63a0d7d2ebb1d3a0cb42c5a48dc5e9706689 100644
--- a/projects/editor/src/app/text-editor/angular-node-views/text-field-nodeview.component.ts
+++ b/projects/editor/src/app/text-editor/angular-node-views/text-field-nodeview.component.ts
@@ -4,10 +4,12 @@ import { AngularNodeViewComponent } from 'ngx-tiptap';
@Component({
selector: 'aspect-nodeview-text-field',
template: `
- <aspect-text-field-simple [style.display]="'inline-block'"
- [elementModel]="node.attrs.model"
- [matTooltip]="'ID: ' + node.attrs.model.id">
- </aspect-text-field-simple>
+ <aspect-text-field [style.display]="'inline-block'"
+ [isClozeChild]="true"
+ [elementModel]="node.attrs.model"
+ [matTooltip]="'ID: ' + node.attrs.model.id">
+ </aspect-text-field>
`
})
-export class TextFieldNodeviewComponent extends AngularNodeViewComponent { }
+export class TextFieldNodeviewComponent extends AngularNodeViewComponent {
+}
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 8a24bbb027ceab5b51a5e4600231ccfd29de1ca8..e842bd0d6c35a7e8a4ab26bcf6e6b788b77bdffc 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
@@ -14,7 +14,6 @@ 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 { TextFieldSimpleComponent } from '../../../../../common/components/ui-elements/text-field-simple.component';
@Component({
selector: 'aspect-element-compound-group',
@@ -51,7 +50,7 @@ export class ElementCompoundGroupComponent extends ElementFormGroupDirective imp
const childModel = child.elementModel as InputElement;
this.registerAtUnitStateService(childModel.id, childModel.value, child, this.pageIndex);
if (childModel.type === 'text-field') {
- (child as TextFieldSimpleComponent)
+ (child as TextFieldComponent)
.onFocusChanged.subscribe(element => this.onFocusChanged(element, child as TextFieldComponent));
}
});