diff --git a/docs/unit_definition_changelog.txt b/docs/unit_definition_changelog.txt
index c7320369c99cf85f82983feee558e47a54fa486e..62db90b94fba41ac50e7cade84d167835b14304c 100644
--- a/docs/unit_definition_changelog.txt
+++ b/docs/unit_definition_changelog.txt
@@ -53,4 +53,4 @@ iqb-aspect-definition@1.0.0
+hasKeyboardIcon: boolean;
- TextFieldElement: +hasKeyboardIcon: boolean;
- TextFieldElement/TextFieldSimpleElement/SpellCorrectElement/TextAreaElement: InputAssistancePreset +'custom'
- +inputAssistanceCustomKeys: string;
+- Remove drop-list-simple as cloze child; is now a drop-list
diff --git a/example_data/droplist/dnd1.json b/example_data/droplist/dnd1.json
new file mode 100644
index 0000000000000000000000000000000000000000..075844082e5ab4c2a516415083329a32590d8da4
--- /dev/null
+++ b/example_data/droplist/dnd1.json
@@ -0,0 +1 @@
+{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Normale Liste</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_3"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":false,"connectedTo":["drop-list_2","drop-list_3","drop-list_4"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Liste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_4"},{"text":"eee","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"fff","imgSrc":null,"imgPosition":"above","id":"value_6"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1","drop-list_3"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_3","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Leere Liste</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_3","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1","drop-list_2"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":200,"type":"cloze","id":"cloze_1","document":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left","indent":null,"indentSize":20,"hangingIndent":false,"margin":0},"content":[{"type":"text","text":"Lorem Ipsum"},{"type":"ToggleButton","attrs":{"model":{"width":100,"height":25,"type":"toggle-button","id":"toggle-button_1","label":"Beschriftung","value":null,"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"options":[],"strikeOtherOptions":false,"strikeSelectedOption":false,"verticalOrientation":false,"dynamicWidth":true,"styling":{"lineHeight":135,"selectionColor":"#c7f3d0","backgroundColor":"transparent","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}},{"type":"DropList","attrs":{"model":{"width":150,"height":30,"type":"drop-list","id":"drop-list_4","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}}]}]},"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"lineHeight":150,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd2.json b/example_data/droplist/dnd2.json
new file mode 100644
index 0000000000000000000000000000000000000000..c740cdceb525e53f17f2fbd372562c9a42259868
--- /dev/null
+++ b/example_data/droplist/dnd2.json
@@ -0,0 +1 @@
+{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Sortierliste 1</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_6"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_7"},{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_8"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Sortierliste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":865,"height":367,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[{"text":"eee","imgSrc":null,"id":"value_1"},{"text":"fff","imgSrc":null,"id":"value_2"},{"text":"ggg","imgSrc":null,"id":"value_3"},{"text":"hhh","imgSrc":null,"id":"value_4"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":false,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd3.json b/example_data/droplist/dnd3.json
new file mode 100644
index 0000000000000000000000000000000000000000..ce6a8b62eb2235f0e3a31551680ec301e1c09baf
--- /dev/null
+++ b/example_data/droplist/dnd3.json
@@ -0,0 +1 @@
+{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Sortierliste 1</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_6"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_7"},{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_8"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Sortierliste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":865,"height":367,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":false,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd4.json b/example_data/droplist/dnd4.json
new file mode 100644
index 0000000000000000000000000000000000000000..0c20918be47a6b1a22de725536037ee7004e30d3
--- /dev/null
+++ b/example_data/droplist/dnd4.json
@@ -0,0 +1 @@
+{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_3"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":false,"connectedTo":["drop-list_2"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":200,"type":"cloze","id":"cloze_1","document":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left","indent":null,"indentSize":20,"hangingIndent":false,"margin":0},"content":[{"type":"text","text":"Lorem Ipsum"},{"type":"DropList","attrs":{"model":{"width":150,"height":30,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}}]}]},"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"lineHeight":150,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
deleted file mode 100644
index d1f4440cec42c116ad2145d2f445fd006e8993c8..0000000000000000000000000000000000000000
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CdkDragDrop, CdkDragEnter, CdkDragStart } from '@angular/cdk/drag-drop/drag-events';
-import {
- CdkDrag, CdkDropList, moveItemInArray, transferArrayItem
-} from '@angular/cdk/drag-drop';
-import { FormElementComponent } from 'common/directives/form-element-component.directive';
-import { DropListSimpleElement } from
- 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
-import { DragNDropValueObject } from 'common/models/elements/element';
-import { DropListComponent } from 'common/components/input-elements/drop-list.component';
-
-@Component({
- selector: 'aspect-drop-list-simple',
- template: `
- <div class="list-container">
- <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving class style.-->
- <div class="list"
- [class.errors]="elementFormControl.errors && elementFormControl.touched"
- [class.dropList-highlight]="elementModel.highlightReceivingDropList"
- [style.min-height.px]="elementModel.height"
- [style.border-color]="elementModel.highlightReceivingDropListColor"
- [style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
- [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' : ''"
- [style.backgroundColor]="elementModel.styling.backgroundColor"
- [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
- (elementFormControl.errors | errorTransform: elementModel) : ''"
- [matTooltipClass]="'error-tooltip'"
- cdkDropList
- [id]="elementModel.id"
- [cdkDropListData]="this"
- [cdkDropListConnectedTo]="elementModel.connectedTo"
- [cdkDropListEnterPredicate]="onlyOneItemPredicate"
- tabindex="0"
- (focusout)="elementFormControl.markAsTouched()"
- (cdkDropListDropped)="drop($event)">
- <ng-container *ngIf="!parentForm">
- <ng-container *ngFor="let dropListValueElement of $any(elementModel.value)">
- <ng-container [ngTemplateOutlet]="dropObject"
- [ngTemplateOutletContext]="{ $implicit: dropListValueElement }">
- </ng-container>
- </ng-container>
- </ng-container>
-
- <ng-container *ngIf="parentForm">
- <ng-container *ngFor="let value of elementFormControl.value">
- <ng-container [ngTemplateOutlet]="dropObject" [ngTemplateOutletContext]="{ $implicit: value }">
- </ng-container>
- </ng-container>
- </ng-container>
-
- <ng-template #dropObject let-value>
- <div class="item"
- [style.background-color]="elementModel.styling.itemBackgroundColor"
- cdkDrag [cdkDragData]="{ element: value }"
- (cdkDragStarted)="dragStart($event)" (cdkDragEnded)="dragEnd()" (cdkDragEntered)="dragEnter($event)">
- <div *cdkDragPreview
- [style.font-size.px]="elementModel.styling.fontSize"
- [style.background-color]="elementModel.styling.itemBackgroundColor">
- {{value.text}}
- </div>
- <div class="drag-placeholder" *cdkDragPlaceholder
- [class.drag-placeholder-border]="placeholderDimensions.width !== '0px'"
- [style.height]="placeholderDimensions.height"
- [style.width]="placeholderDimensions.width">
- </div>
- {{value.text}}
- </div>
- </ng-template>
- </div>
- </div>
- `,
- styles: [
- '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
- '.list {width: 100%; height: 100%; border-radius: 5px; overflow: hidden}',
- '.item {border-radius: 5px; padding: 0 5px; height: 100%; text-align: center;}',
- '.item:not(:last-child) {margin-bottom: 5px;}',
- '.item:active {cursor: grabbing}',
- '.errors {box-sizing: border-box; border: 2px solid #f44336 !important;}',
- '.error-message {font-size: 75%; margin-top: 10px;}',
- '.cdk-drag-preview {padding: 8px 20px; border-radius: 5px; box-shadow: 2px 2px 5px black;}',
- '.drag-placeholder {background-color: lightgrey; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
- '.drag-placeholder-border {box-sizing: border-box; border: solid 3px #999; border-radius: 5px}',
- '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
-
- '.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
- '.dropList-highlight.cdk-drop-list-dragging {border: solid;}'
- ]
-})
-export class DropListSimpleComponent extends FormElementComponent {
- @Input() elementModel!: DropListSimpleElement;
- placeholderDimensions: { width: string, height: string } = { width: '1px', height: '1px' };
-
- bodyElement: HTMLElement = document.body;
-
- dragStart(event: CdkDragStart<DropListSimpleComponent>): void {
- this.setPlaceholderDimensions(
- event.source.dropContainer.data.elementFormControl.value.length - 1,
- event.source.dropContainer.data.elementModel.orientation
- );
- this.bodyElement.classList.add('inheritCursors');
- this.bodyElement.style.cursor = 'grabbing';
- }
-
- dragEnd(): void {
- this.bodyElement.classList.remove('inheritCursors');
- this.bodyElement.style.cursor = 'unset';
- }
-
- drop(event: CdkDragDrop<DropListSimpleComponent>): void {
- if (!this.elementModel.readOnly) {
- if (event.previousContainer === event.container) {
- moveItemInArray(event.container.data.elementFormControl.value as unknown as DragNDropValueObject[],
- event.previousIndex,
- event.currentIndex);
- this.elementFormControl.setValue(
- (event.container.data.elementFormControl.value as DragNDropValueObject[])
- );
- } else {
- transferArrayItem(
- event.previousContainer.data.elementFormControl.value as unknown as DragNDropValueObject[],
- event.container.data.elementFormControl.value as unknown as DragNDropValueObject[],
- event.previousIndex,
- event.currentIndex
- );
- event.previousContainer.data.elementFormControl.setValue(
- (event.previousContainer.data.elementFormControl.value as DragNDropValueObject[])
- );
- }
- this.elementFormControl.setValue(
- (event.container.data.elementFormControl.value as DragNDropValueObject[])
- );
- }
- }
-
- dragEnter(event: CdkDragEnter<DropListSimpleComponent | DropListComponent, { element: DragNDropValueObject }>) {
- const presentValueIDs = event.container.data.elementFormControl.value
- .map((value: DragNDropValueObject) => value.id);
- const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
- this.setPlaceholderDimensions(
- presentValueIDs.length - itemCountOffset,
- event.container.data.elementModel.orientation);
- }
-
- setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
- switch (orientation) {
- case 'vertical': {
- this.placeholderDimensions.width = '100%';
- this.placeholderDimensions.height = itemsCount ? '1px' : '100%';
- break;
- }
- case 'horizontal': {
- this.placeholderDimensions.width = itemsCount ? '1px' : '100%';
- this.placeholderDimensions.height = '100%';
- break;
- }
- default: { // 'flex'
- this.placeholderDimensions.width = itemsCount ? '0px' : '100%';
- this.placeholderDimensions.height = itemsCount ? '0px' : '100%';
- }
- }
- }
-
- onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
- drop.data.elementFormControl.value.length < 1
- );
-}
diff --git a/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts b/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
index f411394687589f7e80eccd4bcd5ca69631c4a688..4dd7a4f3a8f293864f803bf87a2a769dc2dea6dd 100644
--- a/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
+++ b/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
@@ -6,7 +6,6 @@ import { FormGroup } from '@angular/forms';
import { ElementComponent } from '../../../directives/element-component.directive';
import { ToggleButtonElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button';
import { TextFieldSimpleElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/text-field-simple';
-import { DropListSimpleElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
import { ValueChangeElement } from 'common/models/elements/element';
@Component({
@@ -21,13 +20,14 @@ import { ValueChangeElement } from 'common/models/elements/element';
[style.width.px]="element.width"
[style.height.px]="element.height">
</aspect-text-field-simple>
- <aspect-drop-list-simple *ngIf="element.type === 'drop-list-simple'" #childComponent
+ <aspect-drop-list *ngIf="element.type === 'drop-list'" #childComponent
+ [clozeContext]="true"
[style.pointer-events]="editorMode ? 'none' : 'auto'"
[parentForm]="parentForm"
[elementModel]="$any(element)"
[style.width.px]="element.width"
[style.height.px]="element.height">
- </aspect-drop-list-simple>
+ </aspect-drop-list>
<aspect-toggle-button *ngIf="element.type === 'toggle-button'" #childComponent
[style.pointer-events]="editorMode ? 'none' : 'auto'"
[parentForm]="parentForm"
@@ -47,12 +47,12 @@ import { ValueChangeElement } from 'common/models/elements/element';
':host {vertical-align: middle;}',
':host > div {border-radius: 3px;}',
':host div > * {display: inline-block; padding-bottom: 2px; box-sizing: border-box;}',
- 'aspect-drop-list-simple, aspect-text-field-simple {width: 100%; height: 100%;}',
- 'aspect-drop-list-simple {line-height: unset; vertical-align: top;}'
+ 'aspect-drop-list, aspect-text-field-simple {width: 100%; height: 100%;}',
+ 'aspect-drop-list {line-height: unset; vertical-align: top;}'
]
})
export class CompoundChildOverlayComponent { // TODO rename to ClozeChildOverlay
- @Input() element!: ToggleButtonElement | TextFieldSimpleElement | DropListSimpleElement;
+ @Input() element!: ToggleButtonElement | TextFieldSimpleElement;
@Input() parentForm!: FormGroup;
@Input() editorMode: boolean = false;
@Input() lineHeight!: number;
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index ffb1cbc74001c4f36c6132b8eb9eaadcd9803928..ff617599c91f66c24378d5881d90a6c81ec71d01 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -1,31 +1,22 @@
-import { Component, Input } from '@angular/core';
+// eslint-disable-next-line max-classes-per-file
import {
- CdkDragDrop, CdkDragEnter, CdkDragStart
-} from '@angular/cdk/drag-drop/drag-events';
-import {
- CdkDrag, CdkDropList, moveItemInArray
-} from '@angular/cdk/drag-drop';
+ AfterViewInit,
+ Component, ElementRef, Input, OnDestroy, OnInit, Pipe, PipeTransform, ViewChild
+} from '@angular/core';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
import { DragNDropValueObject } from 'common/models/elements/element';
-import {
- DropListSimpleComponent
-} from 'common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
import { FormElementComponent } from '../../directives/form-element-component.directive';
@Component({
selector: 'aspect-drop-list',
template: `
- <div class="list-container" fxLayout="column">
- <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
- <!-- class style.-->
- <!-- min-height for the following div is important for iOS 14!
- iOS 14 is not able to determine the height of the flex container-->
- <div class="list"
- [ngClass]="{ 'align-flex' : elementModel.orientation === 'flex', 'copyOnDrop': elementModel.copyOnDrop }"
- [class.errors]="elementFormControl.errors && elementFormControl.touched"
- [style.min-height.px]="elementModel.position.useMinHeight ? elementModel.height - 6 : null"
- [class.dropList-highlight]="elementModel.highlightReceivingDropList"
- [style.outline-color]="elementModel.highlightReceivingDropListColor"
+ <div class="list" [id]="elementModel.id"
+ [fxLayout]="elementModel.orientation | droplistLayout"
+ [fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign"
+ [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
+ 'horizontal-orientation' : elementModel.orientation === 'horizontal',
+ 'clozeContext': clozeContext}"
+ [style.min-height.px]="elementModel.position?.useMinHeight ? elementModel.height : undefined"
[style.color]="elementModel.styling.fontColor"
[style.font-family]="elementModel.styling.font"
[style.font-size.px]="elementModel.styling.fontSize"
@@ -33,193 +24,238 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.font-style]="elementModel.styling.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
[style.backgroundColor]="elementModel.styling.backgroundColor"
- [style.display]="elementModel.orientation === 'horizontal' ? 'flex' : ''"
- [style.flex-direction]="elementModel.orientation === 'horizontal' ? 'row' : ''"
- cdkDropList
- [id]="elementModel.id"
- [cdkDropListData]="this"
- [cdkDropListConnectedTo]="elementModel.connectedTo"
- [cdkDropListOrientation]="elementModel.orientation !== 'flex' ? $any(elementModel.orientation) : ''"
- [cdkDropListEnterPredicate]="onlyOneItemPredicate"
+ [class.errors]="elementFormControl.errors && elementFormControl.touched"
+ [style.outline-color]="elementModel.highlightReceivingDropListColor"
+ [class.highlight-valid-drop]="highlightValidDrop"
+ [class.highlight-as-receiver]="highlightAsReceiver"
tabindex="0"
(focusout)="elementFormControl.markAsTouched()"
- (cdkDropListDropped)="drop($event)">
-
- <ng-container *ngIf="!parentForm">
- <ng-container *ngFor="let dropListValueElement of $any(elementModel.value); let index = index;">
- <ng-container [ngTemplateOutlet]="dropObject"
- [ngTemplateOutletContext]="{ $implicit: dropListValueElement, index: index }">
- </ng-container>
- </ng-container>
- </ng-container>
-
- <ng-container *ngIf="parentForm">
- <ng-container *ngFor="let dropListValueElement of elementFormControl.value; let index = index;">
- <ng-container [ngTemplateOutlet]="dropObject"
- [ngTemplateOutletContext]="{ $implicit: dropListValueElement, index: index }">
- </ng-container>
- </ng-container>
- </ng-container>
- <!--Leave template within the dom to ensure dragNdrop-->
- <ng-template #dropObject let-dropListValueElement let-index="index">
- <div class="item text-item" *ngIf="!dropListValueElement.imgSrc"
- [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
- 'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
- [style.background-color]="elementModel.styling.itemBackgroundColor"
- cdkDrag
- [cdkDragData]="{ element: dropListValueElement, index: index }"
- (cdkDragStarted)="dragStart(index, $event)" (cdkDragEnded)="dragEnd()" (cdkDragEntered)="dragEnter($event)">
- <div *cdkDragPreview
- [style.font-size.px]="elementModel.styling.fontSize"
- [style.background-color]="elementModel.styling.itemBackgroundColor">
- {{dropListValueElement.text}}
- </div>
- <div class="drag-placeholder" *cdkDragPlaceholder
- [class.drag-placeholder-border]="placeholderDimensions.width !== '0px'"
- [style.padding]="0"
- [style.margin]="0"
- [style.height]="placeholderDimensions.height"
- [style.width]="placeholderDimensions.width">
- </div>
- {{dropListValueElement.text}}
- </div>
-
- <!-- actual placeholder when item is being dragged from copy-list -->
- <div *ngIf="elementModel.copyOnDrop && draggedItemIndex === index" class="item text-item"
- [style.font-size.px]="elementModel.styling.fontSize"
- [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
- 'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
+ (drop)="drop($event)" (dragenter)="dragEnterList($event)" (dragleave)="dragLeaveList($event)"
+ (dragover)="$event.preventDefault()">
+ <ng-container *ngFor="let dropListValueElement of viewModel let index = index;">
+ <div class="list-item"
+ draggable="true"
+ (dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)"
+ (dragenter)="dragEnterItem($event)"
+ [class.show-as-placeholder]="showAsPlaceholder && placeHolderIndex === index"
+ [class.show-as-hidden]="hidePlaceholder && placeHolderIndex === index"
+ [style.pointer-events]="dragging && elementModel.isSortList === false ? 'none' : ''"
[style.background-color]="elementModel.styling.itemBackgroundColor">
- {{dropListValueElement.text}}
+ <span>{{dropListValueElement.text}}</span>
</div>
-
<img *ngIf="dropListValueElement.imgSrc"
+ class="list-item"
[src]="dropListValueElement.imgSrc | safeResourceUrl" alt="Image Placeholder"
- [style.display]="elementModel.orientation === 'flex' ? '' : 'block'"
- class="item"
- [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
- 'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
- cdkDrag [cdkDragData]="{ element: dropListValueElement, index: index }"
- (cdkDragStarted)="dragStart(index, $event)" (cdkDragEnded)="dragEnd()"
+ draggable="true" [id]="dropListValueElement.id"
+ (dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)"
[style.object-fit]="'scale-down'">
- <img *ngIf="elementModel.copyOnDrop && draggedItemIndex === index && dropListValueElement.imgSrc"
- [src]="dropListValueElement.imgSrc | safeResourceUrl" alt="Image Placeholder"
- [style.display]="elementModel.orientation === 'flex' ? '' : 'block'"
- class="item"
- [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
- 'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
- [style.object-fit]="'scale-down'">
- </ng-template>
+ </ng-container>
</div>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
class="error-message">
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
- </div>
`,
styles: [
- '.list-container {width: 100%; height: 100%;}',
- '.list {border-radius: 5px; width: calc(100% - 6px); overflow: hidden}',
- '.list {height: calc(100% - 6px); margin-top: 3px; margin-left: 3px;}',
- '.text-item {border-radius: 5px; padding: 10px;}',
- '.item {cursor: grab}',
- '.item:active {cursor: grabbing}',
- '.copyOnDrop .item {transform: none !important}',
- '.vertical-orientation.item:not(:last-child) {margin-bottom: 5px;}',
- '.horizontal-orientation.item:not(:last-child) {margin-right: 5px}',
- '.errors {outline: 2px solid #f44336 !important;}',
- '.error-message {font-size: 75%; margin-top: 10px;}',
- '.cdk-drag-preview {padding: 8px 20px; border-radius: 5px; z-index: 5; box-shadow: 2px 2px 5px black;}',
- '.drag-placeholder-border {box-sizing: border-box; border: solid 3px #999; border-radius: 5px}',
- '.drag-placeholder {background-color: lightgrey; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
- '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
- '.dropList-highlight.cdk-drop-list-receiving {outline: solid;}',
- '.dropList-highlight.cdk-drop-list-dragging {outline: solid;}',
- '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}',
- ':host .copyOnDrop .cdk-drag-placeholder {position: relative; visibility: hidden;}',
- ':host .copyOnDrop .cdk-drag-placeholder {height: 0 !important; min-height: 0 !important;}',
- ':host .copyOnDrop .cdk-drag-placeholder {margin: 0 !important; padding: 0 !important; border: 0;}'
+ '.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); padding: 3px;}',
+ ':not(.clozeContext) .list-item {border-radius: 5px; padding: 10px;}',
+ '.vertical-orientation .list-item:not(:last-child) {margin-bottom: 5px;}',
+ '.horizontal-orientation .list-item:not(:last-child) {margin-right: 5px;}',
+ '.errors {border: 2px solid #f44336;}',
+ '.error-message {font-size: 75%; margin-top: 10px; margin-left: 3px;}',
+ '.error-message {position: absolute; bottom: 3px; pointer-events: none;}',
+ '.list-item {cursor: grab;}',
+ '.list-item:active {cursor: grabbing}',
+ '.show-as-placeholder {opacity: 0.5 !important; pointer-events: none;}',
+ '.highlight-valid-drop {background-color: lightblue !important;}',
+ '.highlight-as-receiver {border: 2px solid;}',
+ '.show-as-hidden {visibility: hidden;}'
]
})
-export class DropListComponent extends FormElementComponent {
+export class DropListComponent extends FormElementComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() elementModel!: DropListElement;
+ @Input() clozeContext: boolean = false;
+ @ViewChild('placeholder') placeholder!: ElementRef<HTMLElement>;
+ static dragAndDropComponents: { [id: string]: DropListComponent } = {};
- bodyElement: HTMLElement = document.body;
- draggedItemIndex: number | null = null;
- placeholderDimensions: { width: string, height: string } = { width: '1px', height: '1px' };
-
- dragStart(itemIndex: number, event: CdkDragStart<DropListComponent>): void {
- this.setPlaceholderDimensions(
- event.source.dropContainer.data.elementFormControl.value.length - 1,
- event.source.dropContainer.data.elementModel.orientation
- );
- this.draggedItemIndex = itemIndex;
- this.bodyElement.classList.add('inheritCursors');
- this.bodyElement.style.cursor = 'grabbing';
+ viewModel: DragNDropValueObject[] = [];
+ placeHolderIndex?: number;
+ highlightAsReceiver = false;
+
+ dragging = false;
+
+ showAsPlaceholder = false;
+ hidePlaceholder = false;
+ highlightValidDrop = false;
+
+ static draggedElement?: DragNDropValueObject;
+ static sourceList?: DropListComponent;
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.viewModel = [...this.elementFormControl.value];
}
- dragEnd(): void {
- this.draggedItemIndex = null;
- this.bodyElement.classList.remove('inheritCursors');
- this.bodyElement.style.cursor = 'unset';
+ ngAfterViewInit() {
+ DropListComponent.dragAndDropComponents[this.elementModel.id] = this;
}
- drop(event: CdkDragDrop<DropListComponent>): void {
- if (event.previousContainer === event.container && !event.container.data.elementModel.copyOnDrop) {
- moveItemInArray(
- event.container.data.elementFormControl.value as unknown as DragNDropValueObject[],
- event.previousIndex,
- event.currentIndex
- );
- this.elementFormControl.setValue(
- (event.container.data.elementFormControl.value as DragNDropValueObject[])
- );
- } else {
- const presentValueIDs = event.container.data.elementFormControl.value
- .map((value2: DragNDropValueObject) => value2.id);
- if (!presentValueIDs.includes(event.item.data.element.id)) {
- event.container.data.elementFormControl.value.splice(event.currentIndex, 0, event.item.data.element);
- event.container.data.elementFormControl
- .setValue(event.container.data.elementFormControl.value);
+ dragStart(dragEvent: DragEvent,
+ dropListValueElement: DragNDropValueObject,
+ sourceListIndex: number) {
+ if (dragEvent.dataTransfer) {
+ dragEvent.dataTransfer.effectAllowed = 'copyMove';
+ dragEvent.dataTransfer.setDragImage(
+ DropListComponent.createDragImage(dragEvent.target as Node, dropListValueElement.id), 0, 0);
+ }
+
+ // Sadly timeout is necessary for Chrome, which does not allow DOM manipulation on dragstart
+ setTimeout(() => {
+ DropListComponent.draggedElement = dropListValueElement;
+ DropListComponent.sourceList = this;
+ this.placeHolderIndex = sourceListIndex;
+ if (this.elementModel.isSortList) {
+ this.showAsPlaceholder = true;
+ } else {
+ this.hidePlaceholder = true;
+ this.highlightValidDrop = true;
}
- if (!event.previousContainer.data.elementModel.copyOnDrop) {
- event.previousContainer.data.elementFormControl.value.splice(event.item.data.index, 1);
- event.previousContainer.data.elementFormControl.setValue(
- (event.previousContainer.data.elementFormControl.value as DragNDropValueObject[])
- );
+
+ Object.entries(DropListComponent.dragAndDropComponents)
+ .forEach(([, value]) => {
+ value.dragging = true;
+ });
+
+ if (this.elementModel.highlightReceivingDropList) {
+ this.highlightAsReceiver = true;
+ this.elementModel.connectedTo.forEach(connectedDropListID => {
+ DropListComponent.dragAndDropComponents[connectedDropListID].highlightAsReceiver = true;
+ });
}
+ });
+ }
+
+ static createDragImage(baseElement: Node, baseID: string): HTMLElement {
+ const dragImage: HTMLElement = baseElement.cloneNode(true) as HTMLElement;
+ dragImage.id = `${baseID}-dragimage`;
+ dragImage.style.display = 'inline-block';
+ document.body.appendChild(dragImage);
+ return dragImage;
+ }
+
+ dragEnterItem(event: DragEvent) {
+ event.preventDefault();
+
+ if (this.elementModel.isSortList && DropListComponent.sourceList === this) {
+ const sourceIndex: number = this.placeHolderIndex as number;
+ const targetIndex: number = Array.from((event.target as any).parentNode.children).indexOf(event.target);
+ const removedElement = this.viewModel.splice(sourceIndex, 1)[0];
+ this.viewModel.splice(targetIndex, 0, removedElement);
+ this.placeHolderIndex = targetIndex;
}
}
- dragEnter(event: CdkDragEnter<DropListSimpleComponent | DropListComponent, { element: DragNDropValueObject }>) {
- const presentValueIDs = event.container.data.elementFormControl.value
- .map((value: DragNDropValueObject) => value.id);
- const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
- this.setPlaceholderDimensions(
- presentValueIDs.length - itemCountOffset,
- event.container.data.elementModel.orientation);
+ dragEnterList(event: DragEvent) {
+ event.preventDefault();
+
+ if (!this.elementModel.isSortList) {
+ this.highlightValidDrop = true;
+ } else if (DropListComponent.sourceList !== this) {
+ this.viewModel.push(DropListComponent.draggedElement as DragNDropValueObject);
+ const sourceList = DropListComponent.sourceList as DropListComponent;
+ sourceList.viewModel.splice(sourceList.placeHolderIndex as number, 1);
+ sourceList.elementFormControl.setValue(sourceList.viewModel);
+ sourceList.placeHolderIndex = undefined;
+ DropListComponent.sourceList = this;
+ this.placeHolderIndex = this.viewModel.length > 0 ? this.viewModel.length - 1 : 0;
+ }
}
- setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
- switch (orientation) {
- case 'vertical': {
- this.placeholderDimensions.width = '100%';
- this.placeholderDimensions.height = itemsCount ? '1px' : '100%';
- break;
- }
- case 'horizontal': {
- this.placeholderDimensions.width = itemsCount ? '1px' : '100%';
- this.placeholderDimensions.height = '100%';
- break;
- }
- default: { // 'flex'
- this.placeholderDimensions.width = itemsCount ? '0px' : '100%';
- this.placeholderDimensions.height = itemsCount ? '0px' : '100%';
+ dragLeaveList(event: DragEvent) {
+ event.preventDefault();
+ this.highlightValidDrop = false;
+ }
+
+ drop(event: DragEvent) {
+ event.preventDefault();
+
+ if (DropListComponent.sourceList === this && this.elementModel.isSortList) {
+ this.elementFormControl.setValue(this.viewModel);
+ } else if (this.isDropAllowed((DropListComponent.sourceList as DropListComponent).elementModel.connectedTo)) {
+ const presentValueIDs = this.elementFormControl.value
+ .map((valueValue: DragNDropValueObject) => valueValue.id);
+ if (!presentValueIDs.includes(DropListComponent.draggedElement?.id)) {
+ this.viewModel.push(DropListComponent.draggedElement as DragNDropValueObject);
+ this.elementFormControl.setValue(this.viewModel);
+ if (!DropListComponent.sourceList?.elementModel.copyOnDrop) {
+ DropListComponent.sourceList?.viewModel.splice(DropListComponent.sourceList.placeHolderIndex as number, 1);
+ DropListComponent.sourceList?.elementFormControl.setValue(DropListComponent.sourceList.viewModel);
+ }
}
+ } else {
+ console.log('Not an allowed target list');
+ }
+ this.dragEnd();
+ }
+
+ isDropAllowed(connectedDropLists: string[]): boolean {
+ return (connectedDropLists as string[]).includes(this.elementModel.id) &&
+ !(this.elementModel.onlyOneItem && this.elementModel.value.length > 0);
+ // TODO presentValueIDs?
+ }
+
+ dragEnd(event?: DragEvent) {
+ event?.preventDefault();
+
+ Object.entries(DropListComponent.dragAndDropComponents)
+ .forEach(([, value]) => {
+ value.highlightAsReceiver = false;
+ value.dragging = false;
+ value.highlightValidDrop = false;
+ });
+ if (DropListComponent.sourceList) DropListComponent.sourceList.placeHolderIndex = undefined;
+ this.placeHolderIndex = undefined;
+
+ document.getElementById(`${DropListComponent.draggedElement?.id}-dragimage`)?.remove();
+ }
+
+ ngOnDestroy(): void {
+ delete DropListComponent.dragAndDropComponents[this.elementModel.id];
+ }
+}
+
+@Pipe({
+ name: 'droplistLayout'
+})
+export class DropListLayoutPipe implements PipeTransform {
+ transform(orientation: string): string {
+ switch (orientation) {
+ case 'horizontal':
+ return 'row';
+ case 'vertical':
+ return 'column';
+ case 'flex':
+ return 'row wrap';
+ default:
+ throw Error(`droplist orientation invalid: ${orientation}`);
}
}
+}
- onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
- !drop.data.elementModel.onlyOneItem || drop.data.elementFormControl.value.length < 1
- );
+@Pipe({
+ name: 'droplistLayoutAlign'
+})
+export class DropListLayoutAlignPipe implements PipeTransform {
+ transform(orientation: string): string {
+ switch (orientation) {
+ case 'horizontal':
+ return 'start start';
+ case 'vertical':
+ return 'start stretch';
+ case 'flex':
+ return 'space-around center';
+ default:
+ throw Error(`droplist orientation invalid: ${orientation}`);
+ }
+ }
}
diff --git a/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple.ts b/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple.ts
deleted file mode 100644
index 7b7022b7be143b12229009873dd3a414a8643999..0000000000000000000000000000000000000000
--- a/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
- BasicStyles, DragNDropValueObject, InputElement, AnswerScheme,
- AnswerSchemeValue, UIElement
-} from 'common/models/elements/element';
-import { Type } from '@angular/core';
-import { ElementComponent } from 'common/directives/element-component.directive';
-import {
- DropListSimpleComponent
-} from 'common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
-import { DropListElement } from 'common/models/elements/input-elements/drop-list';
-
-export class DropListSimpleElement extends InputElement {
- value: DragNDropValueObject[] = [];
- connectedTo: string[] = [];
- copyOnDrop: boolean = false;
- highlightReceivingDropList: boolean = false;
- highlightReceivingDropListColor: string = '#006064';
- styling: BasicStyles & {
- itemBackgroundColor: string;
- };
-
- constructor(element: Partial<DropListSimpleElement>) {
- super({ width: 150, height: 30, ...element });
- this.value = element.value || [];
- if (element.connectedTo) this.connectedTo = element.connectedTo;
- if (element.copyOnDrop) this.copyOnDrop = element.copyOnDrop;
- if (element.highlightReceivingDropList) this.highlightReceivingDropList = element.highlightReceivingDropList;
- if (element.highlightReceivingDropListColor) {
- this.highlightReceivingDropListColor = element.highlightReceivingDropListColor;
- }
- this.styling = {
- ...UIElement.initStylingProps({
- backgroundColor: '#f4f4f2',
- itemBackgroundColor: '#c9e0e0',
- ...element.styling
- })
- };
- }
-
- hasAnswerScheme(): boolean {
- return Boolean(this.getAnswerScheme);
- }
-
- getAnswerScheme(dropLists: Array<DropListElement | DropListSimpleElement>): AnswerScheme {
- return {
- id: this.id,
- type: 'string',
- format: '',
- multiple: true,
- nullable: false,
- values: this.getAnswerSchemeValues(dropLists),
- valuesComplete: true
- };
- }
-
- getAnswerSchemeValues(dropLists: Array<DropListElement | DropListSimpleElement>): AnswerSchemeValue[] {
- const valueDropLists = dropLists.filter(dropList => dropList.connectedTo.includes(this.id));
- return [this, ...valueDropLists]
- .map(dropList => dropList.value as DragNDropValueObject[])
- .flat()
- .map(option => ({ value: option.id, label: option.text as string }));
- }
-
- getElementComponent(): Type<ElementComponent> {
- return DropListSimpleComponent;
- }
-}
diff --git a/projects/common/models/elements/compound-elements/cloze/cloze.ts b/projects/common/models/elements/compound-elements/cloze/cloze.ts
index fa9bf59ca494ffd2f359f029715be432237f87b6..eaa8a05bc29fa49c67b4937225391c6980648873 100644
--- a/projects/common/models/elements/compound-elements/cloze/cloze.ts
+++ b/projects/common/models/elements/compound-elements/cloze/cloze.ts
@@ -4,7 +4,7 @@ import {
InputElement,
PositionedUIElement,
PositionProperties,
- UIElement, UIElementValue
+ UIElement, UIElementType, UIElementValue
} from 'common/models/elements/element';
import { Type } from '@angular/core';
import { ElementComponent } from 'common/directives/element-component.directive';
@@ -12,11 +12,9 @@ import { ClozeComponent } from 'common/components/compound-elements/cloze/cloze.
import {
TextFieldSimpleElement
} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/text-field-simple';
-import {
- DropListSimpleElement
-} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
import { ToggleButtonElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button';
import { ButtonElement } from 'common/models/elements/button/button';
+import { DropListElement } from 'common/models/elements/input-elements/drop-list';
export class ClozeElement extends CompoundElement implements PositionedUIElement {
document: ClozeDocument = { type: 'doc', content: [] };
@@ -145,8 +143,9 @@ export class ClozeElement extends CompoundElement implements PositionedUIElement
case 'text-field-simple':
newElement = new TextFieldSimpleElement(elementModel as TextFieldSimpleElement);
break;
- case 'drop-list-simple':
- newElement = new DropListSimpleElement(elementModel as DropListSimpleElement);
+ case 'drop-list':
+ case 'drop-list-simple' as UIElementType: // keep here for compatibility
+ newElement = new DropListElement({ ...elementModel as DropListElement, type: 'drop-list' });
break;
case 'toggle-button':
newElement = new ToggleButtonElement(elementModel as ToggleButtonElement);
diff --git a/projects/common/models/elements/compound-elements/cloze/tiptap-editor-extensions/drop-list.ts b/projects/common/models/elements/compound-elements/cloze/tiptap-editor-extensions/drop-list.ts
index 2ca23e9bb0debdd39851d8d329434b1b8f0b6976..f546d6b283135ae2cccea8be55be1df5369cd698 100644
--- a/projects/common/models/elements/compound-elements/cloze/tiptap-editor-extensions/drop-list.ts
+++ b/projects/common/models/elements/compound-elements/cloze/tiptap-editor-extensions/drop-list.ts
@@ -1,7 +1,5 @@
import { Node, mergeAttributes } from '@tiptap/core';
-import {
- DropListSimpleElement
-} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
+import { DropListElement } from 'common/models/elements/input-elements/drop-list';
const DropListExtension =
Node.create({
@@ -12,7 +10,7 @@ const DropListExtension =
addAttributes() {
return {
model: {
- default: new DropListSimpleElement({ type: 'drop-list-simple' })
+ default: new DropListElement({ type: 'drop-list' })
}
};
},
diff --git a/projects/common/models/elements/element.ts b/projects/common/models/elements/element.ts
index 23deb30da5c84bd5f6439f6a021b7b94f7e63745..3ce40b183b9f7fc40c33ff5ffa0aa0c72f2c1cc0 100644
--- a/projects/common/models/elements/element.ts
+++ b/projects/common/models/elements/element.ts
@@ -6,7 +6,7 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
export type UIElementType = 'text' | 'button' | 'text-field' | 'text-field-simple' | 'text-area' | 'checkbox'
| 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert-row' | 'radio-group-images' | 'hotspot-image'
-| 'drop-list' | 'drop-list-simple' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button' | 'geometry';
+| 'drop-list' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button' | 'geometry';
export type UIElementValue = string | number | boolean | undefined | UIElementType | InputElementValue |
TextLabel | TextLabel[] | ClozeDocument | LikertRowElement[] | Hotspot[] |
@@ -34,7 +34,12 @@ export abstract class UIElement {
}
setProperty(property: string, value: UIElementValue): void {
- this[property] = value;
+ if (Array.isArray(this[property])) { // keep array reference intact
+ (this[property] as UIElementValue[])
+ .splice(0, (this[property] as UIElementValue[]).length, ...(value as UIElementValue[]));
+ } else {
+ this[property] = value;
+ }
}
setStyleProperty(property: string, value: UIElementValue): void {
diff --git a/projects/common/models/elements/input-elements/drop-list.ts b/projects/common/models/elements/input-elements/drop-list.ts
index 0c33e50994805f976e4f40c58486bbb0e3494cae..ddde96ada950dd4e413a4302ee48148153580458 100644
--- a/projects/common/models/elements/input-elements/drop-list.ts
+++ b/projects/common/models/elements/input-elements/drop-list.ts
@@ -1,55 +1,56 @@
import { Type } from '@angular/core';
import {
- InputElement, PositionedUIElement,
+ InputElement,
DragNDropValueObject,
BasicStyles, PositionProperties,
AnswerScheme, AnswerSchemeValue, UIElement
} from 'common/models/elements/element';
import { ElementComponent } from 'common/directives/element-component.directive';
import { DropListComponent } from 'common/components/input-elements/drop-list.component';
-import {
- DropListSimpleElement
-} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
-export class DropListElement extends InputElement implements PositionedUIElement {
+export class DropListElement extends InputElement {
value: DragNDropValueObject[];
onlyOneItem: boolean = false;
+ isSortList: boolean = false;
connectedTo: string[] = [];
copyOnDrop: boolean = false;
orientation: 'vertical' | 'horizontal' | 'flex' = 'vertical';
highlightReceivingDropList: boolean = false;
highlightReceivingDropListColor: string = '#006064';
- position: PositionProperties;
+ position: PositionProperties | undefined;
styling: BasicStyles & {
itemBackgroundColor: string;
};
constructor(element: Partial<DropListElement>) {
super({ height: 100, ...element });
- this.value = element.value !== undefined ? [...element.value] : [];
+ this.value = element.value !== undefined ?
+ element.value.map(val => ({ ...val })) :
+ [];
if (element.onlyOneItem) this.onlyOneItem = element.onlyOneItem;
- if (element.connectedTo) this.connectedTo = element.connectedTo;
+ if (element.isSortList) this.isSortList = element.isSortList;
+ if (element.connectedTo) this.connectedTo = [...element.connectedTo];
if (element.copyOnDrop) this.copyOnDrop = element.copyOnDrop;
if (element.orientation) this.orientation = element.orientation;
if (element.highlightReceivingDropList) this.highlightReceivingDropList = element.highlightReceivingDropList;
if (element.highlightReceivingDropListColor) {
this.highlightReceivingDropListColor = element.highlightReceivingDropListColor;
}
- this.position = UIElement.initPositionProps({ useMinHeight: true, ...element.position });
- this.styling = {
- ...UIElement.initStylingProps({
- backgroundColor: '#f4f4f2',
- itemBackgroundColor: '#c9e0e0',
- ...element.styling
- })
- };
+ this.position = element.position ?
+ UIElement.initPositionProps({ useMinHeight: true, ...element.position as Partial<PositionProperties> }) :
+ undefined;
+ this.styling = UIElement.initStylingProps({
+ backgroundColor: '#f4f4f2',
+ itemBackgroundColor: '#c9e0e0',
+ ...element.styling
+ });
}
hasAnswerScheme(): boolean {
return Boolean(this.getAnswerScheme);
}
- getAnswerScheme(options: Array<DropListElement | DropListSimpleElement>): AnswerScheme {
+ getAnswerScheme(options: Array<DropListElement>): AnswerScheme {
return {
id: this.id,
type: 'string',
@@ -61,7 +62,7 @@ export class DropListElement extends InputElement implements PositionedUIElement
};
}
- private getAnswerSchemeValues(dropLists: Array<DropListElement | DropListSimpleElement>): AnswerSchemeValue[] {
+ private getAnswerSchemeValues(dropLists: Array<DropListElement>): AnswerSchemeValue[] {
const valueDropLists = dropLists.filter(dropList => dropList.connectedTo.includes(this.id));
if (valueDropLists.length || this.isSortingList()) {
return [this, ...valueDropLists]
diff --git a/projects/common/models/section.ts b/projects/common/models/section.ts
index a50f7f1804a8b6485bafb2956af64152ed758d19..fffe89e51a0b50c272453e034dcdf0011aad45cb 100644
--- a/projects/common/models/section.ts
+++ b/projects/common/models/section.ts
@@ -27,12 +27,11 @@ export class Section {
if (section?.gridRowSizes !== undefined) this.gridRowSizes = section.gridRowSizes;
if (section?.activeAfterID) this.activeAfterID = section.activeAfterID;
this.elements =
- section?.elements?.map(element => (
- ElementFactory.createElement({
- ...element,
- position: UIElement.initPositionProps(element.position)
- }) as PositionedUIElement)
- ) || [];
+ section?.elements?.map(element => ElementFactory.createElement({
+ ...element,
+ position: UIElement.initPositionProps(element.position)
+ }) as PositionedUIElement) ||
+ [];
}
setProperty(property: string, value: UIElementValue): void {
@@ -58,7 +57,7 @@ export class Section {
getAnswerScheme(dropLists: UIElement[]): AnswerScheme[] {
return this.getAllElements()
.filter(element => element.hasAnswerScheme())
- .map(element => ((element.type === 'drop-list' || element.type === 'drop-list-simple') ?
+ .map(element => ((element.type === 'drop-list') ?
(element as InputElement).getAnswerScheme(dropLists) :
(element as InputElement | PlayerElement | TextElement | ImageElement).getAnswerScheme()));
}
diff --git a/projects/common/models/unit.ts b/projects/common/models/unit.ts
index 0907972d7e4375a785f030aa5a2e0a9ba15c75cb..de374d1c290c0e77789013af546e97397525dec3 100644
--- a/projects/common/models/unit.ts
+++ b/projects/common/models/unit.ts
@@ -18,8 +18,7 @@ export class Unit {
getAnswerScheme(): AnswerScheme[] {
const dropLists = [
- ...this.getAllElements('drop-list'),
- ...this.getAllElements('drop-list-simple')
+ ...this.getAllElements('drop-list')
];
return this.pages.map(page => page.getAnswerScheme(dropLists)).flat();
}
diff --git a/projects/common/services/sanitization.service.spec.ts b/projects/common/services/sanitization.service.spec.ts
index 0b92c22bf906da480def88c9f1f37e14cede4a9c..5b4c2f93986f1d008bb060490ef0520e3a632b7b 100644
--- a/projects/common/services/sanitization.service.spec.ts
+++ b/projects/common/services/sanitization.service.spec.ts
@@ -400,7 +400,7 @@ describe('SanitizationService', () => {
expect(sanatizedClozeChild2)
.toEqual(jasmine.objectContaining({
id: 'drop-list_1',
- type: 'drop-list-simple'
+ type: 'drop-list'
}));
const sanatizedClozeChild3 = (sanitizedUnitDefinition.pages![0].sections[0].elements[0] as ClozeElement)
diff --git a/projects/common/services/sanitization.service.ts b/projects/common/services/sanitization.service.ts
index 617aa16c6c1f6e43297a0034160be148dc54c795..e4af0b49f3a82abdd6736c4df41968766b856dfa 100644
--- a/projects/common/services/sanitization.service.ts
+++ b/projects/common/services/sanitization.service.ts
@@ -311,7 +311,6 @@ export class SanitizationService {
// repair child element types
childElements.forEach(childElement => {
childElement.type = childElement.type === 'text-field' ? 'text-field-simple' : childElement.type;
- childElement.type = childElement.type === 'drop-list' ? 'drop-list-simple' : childElement.type;
});
return {
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 55b0d36f2d7c4efae6b051d90fc1e7e2aff34ee6..ee4a3ce7282b923179324085f8b9f6091794f184 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -51,13 +51,14 @@ import {
} from './components/compound-elements/likert/likert-radio-button-group.component';
import { ImageMagnifierComponent } from './components/media-elements/image-magnifier.component';
import { RadioGroupImagesComponent } from './components/input-elements/radio-group-images.component';
-import { DropListComponent } from './components/input-elements/drop-list.component';
+import {
+ DropListComponent,
+ DropListLayoutAlignPipe,
+ DropListLayoutPipe
+} from './components/input-elements/drop-list.component';
import { ClozeComponent } from './components/compound-elements/cloze/cloze.component';
import { SliderComponent } from './components/input-elements/slider.component';
import { SpellCorrectComponent } from './components/input-elements/spell-correct.component';
-import {
- DropListSimpleComponent
-} from './components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
import { FrameComponent } from './components/frame/frame.component';
import {
ToggleButtonComponent
@@ -122,7 +123,6 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
DropListComponent,
ClozeComponent,
HotspotImageComponent,
- DropListSimpleComponent,
SliderComponent,
SpellCorrectComponent,
FrameComponent,
@@ -138,7 +138,9 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
MathDegreesPipe,
ArrayIncludesPipe,
UpdateTextareaRowsPipe,
- SpinnerComponent
+ SpinnerComponent,
+ DropListLayoutPipe,
+ DropListLayoutAlignPipe
],
exports: [
CommonModule,
@@ -159,7 +161,6 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
ToggleButtonComponent,
TextFieldComponent,
TextFieldSimpleComponent,
- DropListSimpleComponent,
TextAreaComponent,
AudioComponent,
VideoComponent,
diff --git a/projects/common/util/element.factory.ts b/projects/common/util/element.factory.ts
index 73a16146142681288d6421c0a4e65e3432fc875a..68a2589651bb280e2ba26fb51f3fbfdc6ea80756 100644
--- a/projects/common/util/element.factory.ts
+++ b/projects/common/util/element.factory.ts
@@ -16,9 +16,6 @@ import { VideoElement } from 'common/models/elements/media-elements/video';
import { LikertElement } from 'common/models/elements/compound-elements/likert/likert';
import { RadioButtonGroupComplexElement } from 'common/models/elements/input-elements/radio-button-group-complex';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
-import {
- DropListSimpleElement
-} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
import { ClozeElement } from 'common/models/elements/compound-elements/cloze/cloze';
import { SliderElement } from 'common/models/elements/input-elements/slider';
import { SpellCorrectElement } from 'common/models/elements/input-elements/spell-correct';
@@ -43,7 +40,6 @@ export abstract class ElementFactory {
likert: LikertElement,
'radio-group-images': RadioButtonGroupComplexElement,
'drop-list': DropListElement,
- 'drop-list-simple': DropListSimpleElement,
cloze: ClozeElement,
slider: SliderElement,
'spell-correct': SpellCorrectElement,
diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 3da9a00ad5e0d932d53f949f395cae0ed316cc8b..b4ff7245643fe40c09afc263a1ec6c7b56517762 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -81,7 +81,7 @@ import { TextFieldElementPropertiesComponent } from
'./components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component';
import { ScaleAndZoomPropertiesComponent } from
'./components/properties-panel/model-properties-tab/input-groups/scale-and-zoom-properties.component';
-import { DropListPropertiesComponent } from
+import { DropListPropertiesComponent, GetValidDropListsPipe } from
'./components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component';
import { RichTextEditorSimpleComponent } from './text-editor-simple/rich-text-editor-simple.component';
import { RichTextSimpleEditDialogComponent } from './components/dialogs/rich-text-simple-edit-dialog.component';
@@ -94,7 +94,9 @@ import { PresetValuePropertiesComponent } from
import { OptionListPanelComponent } from './components/properties-panel/option-list-panel.component';
import { LikertRowLabelPipe } from './components/properties-panel/likert-row-label.pipe';
import { LabelEditDialogComponent } from './components/dialogs/label-edit-dialog.component';
-import { BorderPropertiesComponent } from './components/properties-panel/model-properties-tab/input-groups/border-properties.component';
+import {
+ BorderPropertiesComponent
+} from './components/properties-panel/model-properties-tab/input-groups/border-properties.component';
import { GeogebraAppDefinitionDialogComponent } from './components/dialogs/geogebra-app-definition-dialog.component';
@NgModule({
@@ -149,7 +151,8 @@ import { GeogebraAppDefinitionDialogComponent } from './components/dialogs/geoge
LikertRowLabelPipe,
LabelEditDialogComponent,
BorderPropertiesComponent,
- GeogebraAppDefinitionDialogComponent
+ GeogebraAppDefinitionDialogComponent,
+ GetValidDropListsPipe
],
imports: [
BrowserModule,
diff --git a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
index 72de29b33f8040372e56d24ed159698e60a127ed..43d861a9b9a6832ccaeff486c993d4ffa9f0870c 100644
--- a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
@@ -9,11 +9,14 @@ import { CompoundElementComponent } from 'common/directives/compound-element.dir
import { ClozeComponent } from 'common/components/compound-elements/cloze/cloze.component';
import { CompoundChildOverlayComponent } from
'common/components/compound-elements/cloze/compound-child-overlay.component';
-import { UIElement } from 'common/models/elements/element';
+import { DragNDropValueObject, UIElement } from 'common/models/elements/element';
import { GeometryComponent } from 'common/components/geometry/geometry.component';
import { GeometryElement } from 'common/models/elements/geometry/geometry';
import { UnitService } from '../../../services/unit.service';
import { SelectionService } from '../../../services/selection.service';
+import { DropListComponent } from 'common/components/input-elements/drop-list.component';
+import { DropListElement } from 'common/models/elements/input-elements/drop-list';
+import { FormElementComponent } from 'common/directives/form-element-component.directive';
@Directive()
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@@ -33,6 +36,14 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
ngOnInit(): void {
this.childComponent = this.elementContainer.createComponent(this.element.getElementComponent());
this.childComponent.instance.elementModel = this.element;
+ this.childComponent.changeDetectorRef.detectChanges(); // this fires onInit, which initializes the FormControl
+ if (this.childComponent.instance instanceof FormElementComponent) {
+ (this.childComponent.instance as FormElementComponent).elementFormControl.setValue(this.element.value);
+ }
+ // DropList keeps a special viewModel variable, which needs to be updated
+ if (this.childComponent.instance instanceof DropListComponent) {
+ (this.childComponent.instance as DropListComponent).viewModel = this.element.value as DragNDropValueObject[];
+ }
// Make children not clickable. This way the only relevant events are managed by the overlay.
this.childComponent.location.nativeElement.style.pointerEvents = 'none';
diff --git a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
index 63b3bfc7300f79e0910457b00b18e4facbdb6914..a435ad880f67c8b73a3152aba11c0fd35431a1fe 100644
--- a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
+++ b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
@@ -54,13 +54,11 @@
</mat-checkbox>
<button mat-raised-button [disabled]="selectedElements.length > 1 ||
combinedProperties.type == 'toggle-button' ||
- combinedProperties.type == 'drop-list-simple' ||
combinedProperties.type == 'text-field-simple'"
(click)="duplicateElement()">
{{'propertiesPanel.duplicateElement' | translate }}
</button>
<button mat-raised-button color="warn" [disabled]="combinedProperties.type == 'toggle-button' ||
- combinedProperties.type == 'drop-list-simple' ||
combinedProperties.type == 'text-field-simple'"
(click)="deleteElement()">
{{'propertiesPanel.deleteElement' | translate }}
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
index eb49caada7b28fbbcbb5cd215674baa3af4a50f6..f4a32ca9d354b53be85ce5fced19c5951e87760b 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
@@ -1,22 +1,21 @@
import {
- Component, EventEmitter, Input, Output
+ Component, EventEmitter, Input, Output, Pipe, PipeTransform
} from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { MessageService } from 'common/services/message.service';
import { DragNDropValueObject, TextImageLabel } from 'common/models/elements/element';
import { CombinedProperties } from 'editor/src/app/components/properties-panel/element-properties-panel.component';
+import { IDService } from 'editor/src/app/services/id.service';
import { UnitService } from '../../../../services/unit.service';
import { SelectionService } from '../../../../services/selection.service';
import { DialogService } from '../../../../services/dialog.service';
-import { IDService } from 'editor/src/app/services/id.service';
@Component({
selector: 'aspect-drop-list-properties',
template: `
- <div *ngIf="combinedProperties.type === 'drop-list' ||
- combinedProperties.type === 'drop-list-simple'"
- fxLayout="column">
+ <div *ngIf="combinedProperties.type === 'drop-list'"
+ fxLayout="column">
<aspect-option-list-panel [title]="'preset'" [textFieldLabel]="'Neue Option'"
[itemList]="$any(combinedProperties.value)"
(addItem)="addOption($event)"
@@ -26,15 +25,14 @@ import { IDService } from 'editor/src/app/services/id.service';
</aspect-option-list-panel>
<mat-form-field *ngIf="combinedProperties.connectedTo !== null"
- class="wide-form-field" appearance="fill"
- (click)="generateValidDropLists()">
+ class="wide-form-field" appearance="fill">
<mat-label>{{'propertiesPanel.connectedDropLists' | translate }}</mat-label>
<mat-select multiple [ngModel]="combinedProperties.connectedTo"
(ngModelChange)="toggleConnectedDropList($event)">
<mat-select-trigger>
{{'propertiesPanel.connectedDropLists' | translate }} ({{$any(combinedProperties.connectedTo).length}})
</mat-select-trigger>
- <mat-option *ngFor="let id of dropListIDs" [value]="id">
+ <mat-option *ngFor="let id of (combinedProperties.idList | getValidDropLists)" [value]="id">
{{id}}
</mat-option>
</mat-select>
@@ -52,6 +50,12 @@ import { IDService } from 'editor/src/app/services/id.service';
</mat-select>
</mat-form-field>
+ <mat-checkbox *ngIf="combinedProperties.isSortList !== undefined"
+ [checked]="$any(combinedProperties.isSortList)"
+ (change)="updateModel.emit({ property: 'isSortList', value: $event.checked })">
+ {{'propertiesPanel.isSortList' | translate }}
+ </mat-checkbox>
+
<mat-checkbox *ngIf="combinedProperties.onlyOneItem !== undefined"
[checked]="$any(combinedProperties.onlyOneItem)"
(change)="updateModel.emit({ property: 'onlyOneItem', value: $event.checked })">
@@ -89,8 +93,6 @@ export class DropListPropertiesComponent {
isInputValid?: boolean | null
}>();
- dropListIDs: string[] = [];
-
constructor(public unitService: UnitService,
private selectionService: SelectionService,
private dialogService: DialogService,
@@ -152,9 +154,17 @@ export class DropListPropertiesComponent {
value: connectedDropListList
});
}
+}
+
+@Pipe({
+ name: 'getValidDropLists'
+})
+export class GetValidDropListsPipe implements PipeTransform {
+ constructor(private unitService: UnitService) {}
- generateValidDropLists() {
- this.dropListIDs = this.unitService.getDropListElementIDs()
- .filter(dropListID => !this.combinedProperties.idList!.includes(dropListID));
+ transform(idList: string[] | undefined): string[] {
+ if (!idList) return [];
+ return this.unitService.getDropListElementIDs()
+ .filter(dropListID => !idList.includes(dropListID));
}
}
diff --git a/projects/editor/src/app/services/id.service.ts b/projects/editor/src/app/services/id.service.ts
index d96646ed78652765a1ebfc4b1ac6a8dda31f3f05..35ded1c1b640a88073e647db4d56240e837b2c6a 100644
--- a/projects/editor/src/app/services/id.service.ts
+++ b/projects/editor/src/app/services/id.service.ts
@@ -28,7 +28,6 @@ export class IDService {
'spell-correct': 0,
'radio-group-images': 0,
'drop-list': 0,
- 'drop-list-simple': 0,
cloze: 0,
frame: 0,
'toggle-button': 0,
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index 716846e984707b7eb6fc30a0f0b44eaf49207483..83b6e3a17c300fcb817a49c1321289d6925a6b45 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -11,7 +11,7 @@ import {
CompoundElement,
DragNDropValueObject, InputElement,
InputElementValue, TextLabel, PlayerElement, PlayerProperties, PositionedUIElement,
- UIElement, UIElementType, UIElementValue, Hotspot
+ UIElement, UIElementType, UIElementValue, Hotspot, PositionProperties
} from 'common/models/elements/element';
import { ClozeDocument, ClozeElement } from 'common/models/elements/compound-elements/cloze/cloze';
import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
@@ -137,17 +137,17 @@ export class UnitService {
}
if (coordinates) {
- newElement.position = UIElement.initPositionProps({
+ newElement.position = {
...(section.dynamicPositioning && { gridColumn: coordinates.x }),
...(section.dynamicPositioning && { gridRow: coordinates.y }),
...(!section.dynamicPositioning && { yPosition: coordinates.y }),
...(!section.dynamicPositioning && { yPosition: coordinates.y })
- });
+ } as PositionProperties;
}
section.addElement(ElementFactory.createElement({
...newElement,
id: this.idService.getAndRegisterNewID(newElement.type),
- position: UIElement.initPositionProps(newElement.position)
+ position: { ...newElement.position } as PositionProperties
}) as PositionedUIElement);
this.veronaApiService.sendVoeDefinitionChangedNotification(this.unit);
}
diff --git a/projects/editor/src/app/text-editor/angular-node-views/drop-list-component-extension.ts b/projects/editor/src/app/text-editor/angular-node-views/drop-list-component-extension.ts
index cf7df19a095ef33d5c97186f0012bccbbde50176..032c6659e0b01efc9ed38c12f2e660653c0d5398 100644
--- a/projects/editor/src/app/text-editor/angular-node-views/drop-list-component-extension.ts
+++ b/projects/editor/src/app/text-editor/angular-node-views/drop-list-component-extension.ts
@@ -2,8 +2,7 @@ import { Injector } from '@angular/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { AngularNodeViewRenderer } from 'ngx-tiptap';
import { DropListNodeviewComponent } from './drop-list-nodeview.component';
-import { DropListSimpleElement }
- from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
+import { DropListElement } from 'common/models/elements/input-elements/drop-list';
const DropListComponentExtension = (injector: Injector): Node => {
return Node.create({
@@ -14,7 +13,13 @@ const DropListComponentExtension = (injector: Injector): Node => {
addAttributes() {
return {
model: {
- default: new DropListSimpleElement({ type: 'drop-list-simple', id: 'cloze-child-id-placeholder' })
+ default: new DropListElement({
+ type: 'drop-list',
+ id: 'cloze-child-id-placeholder',
+ width: 150,
+ height: 30,
+ onlyOneItem: true
+ })
}
};
},
diff --git a/projects/editor/src/app/text-editor/angular-node-views/drop-list-nodeview.component.ts b/projects/editor/src/app/text-editor/angular-node-views/drop-list-nodeview.component.ts
index a2021cf06b3ae5f479b54db21c47f57462234d0d..ab50bfb7c31211801427a8c388c1bb51486ba945 100644
--- a/projects/editor/src/app/text-editor/angular-node-views/drop-list-nodeview.component.ts
+++ b/projects/editor/src/app/text-editor/angular-node-views/drop-list-nodeview.component.ts
@@ -8,9 +8,9 @@ import { AngularNodeViewComponent } from 'ngx-tiptap';
[style.vertical-align]="'middle'"
[style.width.px]="node.attrs.model.width"
[style.height.px]="node.attrs.model.height">
- <aspect-drop-list-simple [elementModel]="node.attrs.model"
- [matTooltip]="'ID: ' + node.attrs.model.id">
- </aspect-drop-list-simple>
+ <aspect-drop-list [elementModel]="node.attrs.model"
+ [matTooltip]="'ID: ' + node.attrs.model.id">
+ </aspect-drop-list>
</div>
`
})
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 6003f6483ddfa17313eee6ba7d3eb273b6048871..d4e26b450e5023158fc27fcb6cd1d1dd03327049 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -185,6 +185,7 @@
"newHotspot": "Neuer Bereich",
"hasDynamicRowCount": "Dynamische Zeilen",
"expectedCharactersCount": "Erwartete Zeichenanzahl",
+ "isSortList": "Sortierliste",
"setElementInteractionEnabled": "Elementinteraktion erlauben"
},
"hotspot": {
diff --git a/projects/player/src/app/services/element-model-element-code-mapping.service.spec.ts b/projects/player/src/app/services/element-model-element-code-mapping.service.spec.ts
index 367706f83818161ca4c0265e532e21be732902da..1cbfb8ae8f71fa3beb0efab40fab30a4d4e81619 100644
--- a/projects/player/src/app/services/element-model-element-code-mapping.service.spec.ts
+++ b/projects/player/src/app/services/element-model-element-code-mapping.service.spec.ts
@@ -1,6 +1,5 @@
import { TestBed } from '@angular/core/testing';
import * as dropList_130 from 'test-data/element-models/drop-list_130.json';
-import * as dropListSimple_131 from 'test-data/element-models/drop-list-simple_131.json';
import * as textField_130 from 'test-data/element-models/text-field_130.json';
import * as textFieldSimple_131 from 'test-data/element-models/text-field-simple_131.json';
import * as image_130 from 'test-data/element-models/image_130.json';
@@ -16,9 +15,6 @@ import * as hotspotImage_135 from 'test-data/element-models/hotspot-image_135.js
import * as dragNDropValues_01_130 from 'test-data/values/dragNDropValues_01_130.json';
import * as dragNDropValues_02_130 from 'test-data/values/dragNDropValues_02_130.json';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
-import {
- DropListSimpleElement
-} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/drop-list-simple';
import { TextElement } from 'common/models/elements/text/text';
import { AudioElement } from 'common/models/elements/media-elements/audio';
import { ImageElement } from 'common/models/elements/media-elements/image';
@@ -55,12 +51,6 @@ describe('ElementModelElementCodeMappingService', () => {
.toEqual(['value_1', 'value_2', 'value_3']);
});
- it('should map the value of a drop-list-simple elementModel to its elementCode value', () => {
- const dragNDropValueObjects: DragNDropValueObject[] = JSON.parse(JSON.stringify(dragNDropValues_01_130)).default;
- expect(service.mapToElementCodeValue(dragNDropValueObjects, 'drop-list-simple'))
- .toEqual(['value_1', 'value_2', 'value_3']);
- });
-
it('should map the value of a text elementModel to its elementCode value', () => {
const textValue =
'Lorem <aspect-marked style="background-color: rgb(249, 248, 113);">ipsum</aspect-marked> dolor sit amet';
@@ -331,44 +321,6 @@ describe('ElementModelElementCodeMappingService', () => {
.toEqual(expectedValue);
});
- it('should not map but return the drop-list-simple elementModel value', () => {
- service.dragNDropValueObjects = [
- {
- text: 'a',
- id: 'value_1',
- imgSrc: null,
- imgPosition: 'above'
- },
- {
- text: 'b',
- id: 'value_2',
- imgSrc: null,
- imgPosition: 'above'
- },
- {
- text: 'c',
- id: 'value_3',
- imgSrc: null,
- imgPosition: 'above'
- },
- {
- text: 'd',
- id: 'value_4',
- imgSrc: null,
- imgPosition: 'above'
- },
- {
- text: 'e',
- id: 'value_5',
- imgSrc: null,
- imgPosition: 'above'
- }
- ];
- const elementModel: DropListSimpleElement = JSON.parse(JSON.stringify(dropListSimple_131));
- expect(service.mapToElementModelValue(undefined, elementModel))
- .toEqual(elementModel.value);
- });
-
it('should map an elementCode value to drop-list elementModel value with imageSrc', () => {
service.dragNDropValueObjects = JSON.parse(JSON.stringify(dragNDropValues_01_130)).default;
const elementModel: DropListElement = JSON.parse(JSON.stringify(dropList_130));
@@ -377,14 +329,6 @@ describe('ElementModelElementCodeMappingService', () => {
.toEqual(expectedValue);
});
- it('should map an elementCode value to drop-list-simple elementModel value with imageSrc', () => {
- service.dragNDropValueObjects = JSON.parse(JSON.stringify(dragNDropValues_01_130)).default;
- const elementModel: DropListSimpleElement = JSON.parse(JSON.stringify(dropListSimple_131));
- const expectedValue = JSON.parse(JSON.stringify(dragNDropValues_02_130)).default;
- expect(service.mapToElementModelValue(['value_1', 'value_2'], elementModel))
- .toEqual(expectedValue);
- });
-
it('should map an elementCode value to drop-list-simple elementModel value - an empty array', () => {
service.dragNDropValueObjects = JSON.parse(JSON.stringify(dragNDropValues_01_130)).default;
const elementModel: DropListElement = JSON.parse(JSON.stringify(dropList_130));
@@ -392,13 +336,6 @@ describe('ElementModelElementCodeMappingService', () => {
.toEqual([]);
});
- it('should map an elementCode value to drop-list elementModel value - an empty array', () => {
- service.dragNDropValueObjects = JSON.parse(JSON.stringify(dragNDropValues_01_130)).default;
- const elementModel: DropListSimpleElement = JSON.parse(JSON.stringify(dropListSimple_131));
- expect(service.mapToElementModelValue([], elementModel))
- .toEqual([]);
- });
-
it('should map an elementCode value to text elementModel value (text)', () => {
const elementModel: TextElement = JSON.parse(JSON.stringify(text_130));
const expectedValue =
diff --git a/projects/player/src/app/services/element-model-element-code-mapping.service.ts b/projects/player/src/app/services/element-model-element-code-mapping.service.ts
index 8a49d63cf55dafcf13754a153d810d458018fb5f..c08a9f685e232ad5a250d2bfb25f6a6e36a38c09 100644
--- a/projects/player/src/app/services/element-model-element-code-mapping.service.ts
+++ b/projects/player/src/app/services/element-model-element-code-mapping.service.ts
@@ -26,7 +26,6 @@ export class ElementModelElementCodeMappingService {
: InputElementValue => {
switch (elementModel.type) {
case 'drop-list':
- case 'drop-list-simple':
return (elementCodeValue !== undefined) ?
(elementCodeValue as string[]).map(id => this.getDragNDropValueObjectById(id)) as DragNDropValueObject[] :
(elementModel as InputElement).value;
@@ -69,7 +68,6 @@ export class ElementModelElementCodeMappingService {
mapToElementCodeValue = (elementModelValue: InputElementValue, elementType: UIElementType): InputElementValue => {
switch (elementType) {
case 'drop-list':
- case 'drop-list-simple':
return (elementModelValue as DragNDropValueObject[]).map(object => object.id);
case 'hotspot-image':
return (elementModelValue as Hotspot[]).map(hotspot => hotspot.value);