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
index b11f046128ed4dfd3c37e82dddf9ee7cb6907b40..c6a4b9af83075718f726b790fea205d8fa963df7 100644
--- 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
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
-import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
+import { CdkDragDrop, CdkDragEnter, CdkDragStart } from '@angular/cdk/drag-drop/drag-events';
import {
CdkDrag, CdkDropList, moveItemInArray, transferArrayItem
} from '@angular/cdk/drag-drop';
@@ -7,6 +7,7 @@ import { FormElementComponent } from 'common/directives/form-element-component.d
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',
@@ -56,14 +57,14 @@ import { DragNDropValueObject } from 'common/models/elements/element';
<div class="item"
[style.background-color]="elementModel.styling.itemBackgroundColor"
cdkDrag [cdkDragData]="{ element: value }"
- (cdkDragStarted)=dragStart() (cdkDragEnded)="dragEnd()">
+ (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
- [style.min-height.px]="elementModel.styling.fontSize">
+ [style.height.px]="placeHolderHeight">
</div>
{{value.text}}
</div>
@@ -79,8 +80,8 @@ import { DragNDropValueObject } from 'common/models/elements/element';
'.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: 10px}',
- '.drag-placeholder {background-color: lightgrey; border: dotted 3px #999;}',
+ '.cdk-drag-preview {padding: 8px 20px; border-radius: 10px; box-shadow: 2px 2px 1px black;}',
+ '.drag-placeholder {box-sizing: border-box; border-radius: 5px; background-color: lightgrey; border: dotted 3px #999;}',
'.drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
'.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
@@ -90,10 +91,13 @@ import { DragNDropValueObject } from 'common/models/elements/element';
})
export class DropListSimpleComponent extends FormElementComponent {
@Input() elementModel!: DropListSimpleElement;
+ placeHolderHeight: number = 50;
bodyElement: HTMLElement = document.body;
- dragStart(): void {
+ dragStart(event: CdkDragStart<DropListSimpleComponent>): void {
+ const containerHeight = event.source.dropContainer.data.elementRef.nativeElement.offsetHeight;
+ this.placeHolderHeight = event.source.dropContainer.data instanceof DropListSimpleComponent ? containerHeight - 2 : 50;
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'grabbing';
}
@@ -129,6 +133,16 @@ export class DropListSimpleComponent extends FormElementComponent {
}
}
+ 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;
+ const containerHeight = event.container.data.elementRef.nativeElement.offsetHeight;
+ const itemsCount = presentValueIDs.length - itemCountOffset;
+ const condition = event.container.data instanceof DropListSimpleComponent || !itemsCount;
+ this.placeHolderHeight = condition ? containerHeight - 2 : 50;
+ }
+
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
drop.data.elementFormControl.value.length < 1
);
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 23a47f09ca2d3c7be90430b9f408c662ee8d942d..424e096671cb436685b6aea691b59f6ba36560bb 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -1,10 +1,15 @@
import { Component, Input } from '@angular/core';
-import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
+import {
+ CdkDragDrop, CdkDragEnter, CdkDragStart
+} from '@angular/cdk/drag-drop/drag-events';
import {
CdkDrag, CdkDropList, moveItemInArray
} from '@angular/cdk/drag-drop';
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({
@@ -63,14 +68,14 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.background-color]="elementModel.styling.itemBackgroundColor"
cdkDrag
[cdkDragData]="{ element: dropListValueElement, index: index }"
- (cdkDragStarted)=dragStart(index) (cdkDragEnded)="dragEnd()">
+ (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
- [style.min-height.px]="elementModel.styling.fontSize">
+ [style.height.px]="placeHolderHeight">
</div>
{{dropListValueElement.text}}
</div>
@@ -91,7 +96,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
cdkDrag [cdkDragData]="{ element: dropListValueElement, index: index }"
- (cdkDragStarted)=dragStart(index) (cdkDragEnded)="dragEnd()"
+ (cdkDragStarted)="dragStart(index, $event)" (cdkDragEnded)="dragEnd()"
[style.object-fit]="'scale-down'">
<img *ngIf="elementModel.copyOnDrop && draggedItemIndex === index && dropListValueElement.imgSrc"
[src]="dropListValueElement.imgSrc | safeResourceUrl" alt="Image Placeholder"
@@ -119,9 +124,9 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.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;}', // TODO error message?
+ '.error-message {font-size: 75%; margin-top: 10px;}',
'.cdk-drag-preview {padding: 8px 20px; border-radius: 10px; z-index: 5;}',
- '.drag-placeholder {background-color: lightgrey; border: dotted 3px #999; padding: 10px;}',
+ '.drag-placeholder {box-sizing: border-box; border-radius: 5px; background-color: lightgrey; border: dotted 3px #999;}',
'.drag-placeholder {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;}',
@@ -136,8 +141,11 @@ export class DropListComponent extends FormElementComponent {
bodyElement: HTMLElement = document.body;
draggedItemIndex: number | null = null;
+ placeHolderHeight: number = 50;
- dragStart(itemIndex: number): void {
+ dragStart(itemIndex: number, event: CdkDragStart<DropListSimpleComponent>): void {
+ const containerHeight = event.source.dropContainer.data.elementRef.nativeElement.offsetHeight;
+ this.placeHolderHeight = event.source.dropContainer.data instanceof DropListSimpleComponent ? containerHeight - 2 : 50;
this.draggedItemIndex = itemIndex;
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'grabbing';
@@ -173,6 +181,16 @@ export class DropListComponent extends FormElementComponent {
}
}
+ 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;
+ const containerHeight = event.container.data.elementRef.nativeElement.offsetHeight;
+ const itemsCount = presentValueIDs.length - itemCountOffset;
+ const condition = event.container.data instanceof DropListSimpleComponent || !itemsCount;
+ this.placeHolderHeight = condition ? containerHeight - 2 : 50;
+ }
+
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
!drop.data.elementModel.onlyOneItem || drop.data.elementFormControl.value.length < 1
);