All files / src/lib/common/drag-drop droppable.directive.ts

100% Statements 29/29
100% Branches 9/9
100% Functions 6/6
100% Lines 23/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 571x                   1x       1x 1x     9x       1x 3x       1x 1x       1x 2x 1x     2x 2x       1x 3x 2x     3x 3x 1x 1x     3x   1x  
import {Directive, Output, EventEmitter, HostBinding, HostListener} from '@angular/core';
 
import {DropData} from '../interfaces/DropData';
 
/**
 * @description A wrapper around the HTML 5 Drop API.
 */
@Directive({
    selector: '[anjDroppable]'
})
export class DroppableDirective {
    /**
     * @description Emitted after and HTML drop event. Emits data bound to anjDraggable.
     */
    @Output() public anjDrop: EventEmitter<DropData>;
    @HostBinding('class.drag-over') public isDraggedOver: boolean;
 
    constructor() {
        this.anjDrop = new EventEmitter<DropData>();
    }
 
    @HostListener('dragenter', ['$event'])
    public handleDragEnter(): void {
        this.isDraggedOver = true;
    }
 
    @HostListener('dragleave', ['$event'])
    public handleDragLeave(): void {
        this.isDraggedOver = false;
    }
 
    @HostListener('dragover', ['$event'])
    public handleDragOver(event: DragEvent): boolean {
        if (event.preventDefault) {
            event.preventDefault();
        }
 
        event.dataTransfer.dropEffect = 'move';
        return false;
    }
 
    @HostListener('drop', ['$event'])
    public handleDrop(event: DragEvent): boolean {
        if (event.stopPropagation) {
            event.stopPropagation(); // Stops some browsers from redirecting.
        }
 
        this.isDraggedOver = false;
        if (event.dataTransfer && event.dataTransfer.getData && event.dataTransfer.getData('data')) {
            const data = JSON.parse(event.dataTransfer.getData('data'));
            this.anjDrop.emit({payload: data});
        }
 
        return false;
    }
}