fix: Make properties DND IE11 compatible (#2196)

* fix (dnd): Make properties DND IE11 compatible * Fix tests / add nullcheck * Fix DND tests
SAP · Mar 19, 2020 · eb821df · eb821df
1 parent 010756b
commit eb821df
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/libs/core/src/lib/utils/drag-and-drop/dnd-container/dnd-container.directive.spec.ts b/libs/core/src/lib/utils/drag-and-drop/dnd-container/dnd-container.directive.spec.ts
@@ -6,11 +6,13 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @Component({
     template: `
-        <div #directiveElement fd-dnd-container>
-            <div cdkDrag>
-                <div></div>
-            </div>
-        </div>
+            <span>
+                <div #directiveElement fd-dnd-container>
+                    <div cdkDrag>
+                        <div></div>
+                    </div>
+                </div>
+            </span>
     `
 })
 class TestDndContainerComponent {
@@ -53,6 +55,7 @@ describe('DndContainerDirective', () => {
     it('should react to drag release', () => {
         spyOn(directive.released, 'emit');
         (directive as any).placeholderElement = document.createElement('div');
+        directive.element.nativeElement.appendChild((directive as any).placeholderElement);
         directive.onCdkDragReleased();
         expect((directive as any).placeholderElement).toBeFalsy();
         expect(directive.released.emit).toHaveBeenCalled();

diff --git a/libs/core/src/lib/utils/drag-and-drop/dnd-container/dnd-container.directive.ts b/libs/core/src/lib/utils/drag-and-drop/dnd-container/dnd-container.directive.ts
@@ -54,13 +54,13 @@ export class DndContainerDirective implements AfterContentInit {
         const position: LinkPosition = isBefore ? 'before' : 'after';
 
         /** Depending on the position, gets the left or right side of element */
-        const x = rect.x + (isBefore || listMode ? 0 : this.element.nativeElement.offsetWidth);
+        const x = rect.left + (isBefore || listMode ? 0 : this.element.nativeElement.offsetWidth);
 
         /** Vertically distance is counted by distance from top of the side + half of the element height */
         return {
             x: x,
             position: position,
-            y: rect.y + (this.element.nativeElement.offsetHeight / 2),
+            y: rect.top + (this.element.nativeElement.offsetHeight / 2),
             stickToPosition: this.stickInPlace
         };
     }
@@ -108,16 +108,18 @@ export class DndContainerDirective implements AfterContentInit {
 
     /** @hidden */
     public removePlaceholder(): void {
-        if (this.placeholderElement) {
-            this.placeholderElement.remove();
+        if (this.placeholderElement && this.placeholderElement.parentNode) {
+            // IE11 workaround
+            this.placeholderElement.parentNode.removeChild(this.placeholderElement);
             this.placeholderElement = null;
         }
     }
 
     /** @hidden */
     public removeLine(): void {
-        if (this.lineElement) {
-            this.lineElement.remove();
+        if (this.lineElement && this.lineElement.parentNode) {
+            // IE11 workaround
+            this.lineElement.parentNode.removeChild(this.lineElement);
             this.lineElement = null;
         }
     }

diff --git a/libs/core/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.ts b/libs/core/src/lib/utils/drag-and-drop/dnd-list/dnd-list.directive.ts
@@ -165,15 +165,15 @@ export class DndListDirective implements AfterContentInit {
         const draggedElementBound = <DOMRect>draggedElement.nativeElement.getBoundingClientRect();
         const targetElementBound = <DOMRect>targetElement.nativeElement.getBoundingClientRect();
 
-        if (draggedElementBound.y - targetElementBound.y > VERTICAL_OFFSET) {
+        if (draggedElementBound.top - targetElementBound.top > VERTICAL_OFFSET) {
             /** If element is higher than the dragged element, it's for sure before */
             return true;
-        } else if (targetElementBound.y - draggedElementBound.y > VERTICAL_OFFSET) {
+        } else if (targetElementBound.top - draggedElementBound.top > VERTICAL_OFFSET) {
             /** If element is lower than the dragged element, it's for sure after */
             return false;
         } else {
             /** If elements are in same level, the horizontal position decides if it's before/after */
-            return draggedElementBound.x - targetElementBound.x > 0;
+            return draggedElementBound.left - targetElementBound.left > 0;
         }
     }
 }