diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 69cb39bb9b671c70f05ad94076112ec0c73cc53d..0bda08487eeba973b896a214025c07f1c4c8f286 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -1,30 +1,25 @@
import {
- Component, Input, OnInit, Pipe, PipeTransform
-} from '@angular/core';
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+ Component, Input } from '@angular/core';
+import {
+ CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray, transferArrayItem
+} from '@angular/cdk/drag-drop';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
-import { DragNDropValueObject } from 'common/models/elements/element';
import { FormElementComponent } from '../../directives/form-element-component.directive';
@Component({
selector: 'aspect-drop-list',
template: `
-<!-- [fxLayout]="elementModel.orientation | droplistLayout"-->
-<!-- [fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign"-->
-<!-- [class.vertical-orientation]="elementModel.orientation === 'vertical'"-->
-<!-- [class.horizontal-orientation]="elementModel.orientation === 'horizontal'"-->
-<!-- [class.only-one-item]="elementModel.onlyOneItem"-->
-<!-- [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"-->
-<!-- [style.border-color]="elementModel.highlightReceivingDropListColor"-->
-<!-- tabindex="0"-->
-
+ <!-- [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"-->
+ <!-- tabindex="0"-->
<div class="list" [id]="elementModel.id"
[class.cloze-context]="clozeContext"
[class.vertical-orientation]="elementModel.orientation === 'vertical'"
[class.horizontal-orientation]="elementModel.orientation === 'horizontal'"
[class.floating-orientation]="elementModel.orientation === 'flex'"
+ [class.highlight-receiver]="classReference.highlightReceivingDropList"
cdkDropList
[cdkDropListData]="this" [cdkDropListConnectedTo]="elementModel.connectedTo"
+ [cdkDropListOrientation]="elementModel.orientation === 'vertical' ? 'vertical' : 'horizontal'"
[cdkDropListEnterPredicate]="onlyOneItemPredicate"
(cdkDropListDropped)="drop($event)"
[style.color]="elementModel.styling.fontColor"
@@ -34,17 +29,20 @@ 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.border-color]="elementModel.highlightReceivingDropListColor"
[class.errors]="elementFormControl.errors && elementFormControl.touched"
(focusout)="elementFormControl.markAsTouched()">
<ng-container *ngFor="let dropListValueElement of elementModel.value let index = index;">
-<!-- fxLayout="row"-->
-<!-- [fxLayoutAlign]="elementModel.onlyOneItem ? (clozeContext ? 'center center' : 'start center') : 'none'"-->
<div *ngIf="!dropListValueElement.imgSrc"
- class="list-item" cdkDrag
+ class="list-item"
+ cdkDrag
+ (cdkDragStarted)="setHighlighting(elementModel.highlightReceivingDropList)"
+ (cdkDragEnded)="setHighlighting(false)"
[style.background-color]="elementModel.styling.itemBackgroundColor">
<span>{{dropListValueElement.text}}</span>
- <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
- <ng-template cdkDragPreview [matchSize]="true">
+ <div *cdkDragPlaceholder></div>
+ <!-- <ng-template cdkDragPreview [matchSize]="true">-->
+ <ng-template cdkDragPreview>
<div [style.color]="elementModel.styling.fontColor"
[style.font-family]="elementModel.styling.font"
[style.font-size.px]="elementModel.styling.fontSize"
@@ -69,12 +67,11 @@ import { FormElementComponent } from '../../directives/form-element-component.di
`,
styles: [
'.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); border-radius: 5px;}',
- // '.list {padding: 2px; display: flex; gap: 5px;}',
'.list {display: flex; gap: 5px; box-sizing: border-box; padding: 5px}',
'.list.vertical-orientation {flex-direction: column;}',
'.list.horizontal-orientation {flex-direction: row;}',
'.list.floating-orientation {place-content: center space-around; align-items: center; flex-flow: row wrap;}',
- // '.cloze-context.list {place-content: stretch; align-items: stretch;}',
+ '.cloze-context.list {padding: 0}',
'.list-item {border-radius: 5px;}',
// '.list-item {margin: 2px; border-radius: 5px;}',
':not(.cloze-context) .list-item {padding: 10px;}',
@@ -82,7 +79,6 @@ import { FormElementComponent } from '../../directives/form-element-component.di
// '.cloze-context .list {padding: 0 5px;}',
// '.cloze-context .list-item {padding: 0 5px; line-height: 1.2;}',
// '.only-one-item.cloze-context .list-item {padding: 0;}',
- // '.only-one-item.cloze-context .list-item {padding: 0;}',
// '.only-one-item:not(.cloze-context) .list-item {padding: 0 10px;}',
// '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%; line-height: 1.2;}',
// 'img.list-item {align-self: start; padding: 2px !important;}',
@@ -95,18 +91,20 @@ import { FormElementComponent } from '../../directives/form-element-component.di
// '.list-item {cursor: grab;}',
// '.list-item:active {cursor: grabbing;}',
- '.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black;}',
+ '.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black; padding: 10px;}',
'.cdk-drop-list-dragging .cdk-drag {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
- '.cdk-drop-list-receiving {background-color: cadetblue !important;}',
- // '.cdk-drop-list-receiving {border: 2px solid;}',
- // '.cdk-drop-list-receiving .list-item {margin: 0;}'
- '.example-custom-placeholder {background: #ccc; border: dotted 3px #999; min-height: 20px;}'
+ '.highlight-receiver.cdk-drop-list-receiving {padding: 3px; border: 2px solid;}',
+ '.cdk-drag-placeholder {background: #ccc; border: dotted 3px #999; min-height: 20px;}',
+ '.cdk-drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}'
]
})
export class DropListComponent extends FormElementComponent {
@Input() elementModel!: DropListElement;
@Input() clozeContext: boolean = false;
+
+ classReference = DropListComponent;
+ static highlightReceivingDropList = false;
// viewModel: DragNDropValueObject[] = [];
// ngOnInit() {
@@ -137,4 +135,9 @@ export class DropListComponent extends FormElementComponent {
onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (
!drop.data.elementModel.onlyOneItem || drop.data.elementModel.value.length < 1
);
+
+ setHighlighting(showHighlight: boolean) {
+ console.log('drag started', showHighlight);
+ DropListComponent.highlightReceivingDropList = showHighlight;
+ }
}
diff --git a/projects/common/models/elements/input-elements/drop-list.ts b/projects/common/models/elements/input-elements/drop-list.ts
index 123bc76fca4de742cee9465aea29fa5e694a0cd1..10fc241e13750a1c33805dc8500a7edd217091de 100644
--- a/projects/common/models/elements/input-elements/drop-list.ts
+++ b/projects/common/models/elements/input-elements/drop-list.ts
@@ -11,7 +11,7 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
export class DropListElement extends InputElement {
value: DragNDropValueObject[];
onlyOneItem: boolean = false;
- isSortList: boolean = false;
+ // isSortList: boolean = false;
connectedTo: string[] = [];
copyOnDrop: boolean = false;
deleteDroppedItemWithSameID: boolean = false;
@@ -29,7 +29,7 @@ export class DropListElement extends InputElement {
element.value.map(val => ({ ...val })) :
[];
if (element.onlyOneItem) this.onlyOneItem = element.onlyOneItem;
- if (element.isSortList !== undefined) this.isSortList = element.isSortList;
+ // if (element.isSortList !== undefined) this.isSortList = element.isSortList;
if (element.connectedTo) this.connectedTo = [...element.connectedTo];
if (element.copyOnDrop !== undefined) this.copyOnDrop = element.copyOnDrop;
if (element.deleteDroppedItemWithSameID !== undefined) {