From c5eac7f3fda6445a809191fadee042a4d5abe7ad Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 7 Oct 2022 10:33:56 +0200
Subject: [PATCH] Add calculation of the placeholder width for drop lists
- Important for vertically positioned drop lists
- Analogous to the calculation of the height
---
.../drop-list-simple.component.ts | 11 +++++++----
.../components/input-elements/drop-list.component.ts | 11 +++++++----
2 files changed, 14 insertions(+), 8 deletions(-)
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 f88193120..5cd18204f 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
@@ -64,7 +64,8 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
{{value.text}}
</div>
<div class="drag-placeholder" *cdkDragPlaceholder
- [style.height.%]="placeholderHeight">
+ [style.height.%]="placeholderHeight"
+ [style.width.%]="placeholderWidth">
</div>
{{value.text}}
</div>
@@ -92,11 +93,12 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
export class DropListSimpleComponent extends FormElementComponent {
@Input() elementModel!: DropListSimpleElement;
placeholderHeight: number = 1;
+ placeholderWidth: number = 1;
bodyElement: HTMLElement = document.body;
dragStart(event: CdkDragStart<DropListSimpleComponent>): void {
- this.setPlaceholderHeight(
+ this.setPlaceholderDimensions(
event.source.dropContainer.data.elementFormControl.value.length - 1,
event.source.dropContainer.data.elementModel.orientation
);
@@ -139,13 +141,14 @@ export class DropListSimpleComponent extends FormElementComponent {
const presentValueIDs = event.container.data.elementFormControl.value
.map((value: DragNDropValueObject) => value.id);
const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
- this.setPlaceholderHeight(
+ this.setPlaceholderDimensions(
presentValueIDs.length - itemCountOffset,
event.container.data.elementModel.orientation);
}
- setPlaceholderHeight(itemsCount: number, orientation: unknown): void {
+ setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100;
+ this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100;
}
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index d35af9a50..38a410e68 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -75,7 +75,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
{{dropListValueElement.text}}
</div>
<div class="drag-placeholder" *cdkDragPlaceholder
- [style.height.%]="placeholderHeight">
+ [style.height.%]="placeholderHeight"
+ [style.width.%]="placeholderWidth">
</div>
{{dropListValueElement.text}}
</div>
@@ -142,9 +143,10 @@ export class DropListComponent extends FormElementComponent {
bodyElement: HTMLElement = document.body;
draggedItemIndex: number | null = null;
placeholderHeight: number = 1;
+ placeholderWidth: number = 1;
dragStart(itemIndex: number, event: CdkDragStart<DropListSimpleComponent>): void {
- this.setPlaceholderHeight(
+ this.setPlaceholderDimensions(
event.source.dropContainer.data.elementFormControl.value.length - 1,
event.source.dropContainer.data.elementModel.orientation
);
@@ -190,13 +192,14 @@ export class DropListComponent extends FormElementComponent {
const presentValueIDs = event.container.data.elementFormControl.value
.map((value: DragNDropValueObject) => value.id);
const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0;
- this.setPlaceholderHeight(
+ this.setPlaceholderDimensions(
presentValueIDs.length - itemCountOffset,
event.container.data.elementModel.orientation);
}
- setPlaceholderHeight(itemsCount: number, orientation: unknown): void {
+ setPlaceholderDimensions(itemsCount: number, orientation: unknown): void {
this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100;
+ this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100;
}
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
--
GitLab