iris-ds
Version:
Joveo iris libray
57 lines • 6.62 kB
JavaScript
import { Directive, HostListener, HostBinding, Output, EventEmitter } from '@angular/core';
export class DragDropDirective {
constructor() {
//@Input() private allowed_extensions : Array<string> = ['png', 'jpg', 'bmp'];
this.filesChangeEmiter = new EventEmitter();
//@Output() private filesInvalidEmiter : EventEmitter<File[]> = new EventEmitter();
this.background = '#ffffff';
this.borderStyle = '2px dashed';
this.borderColor = '#E5E7EB';
this.borderRadius = '0px';
}
onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#42A5F5';
this.borderStyle = '2px solid';
console.log("drag over");
}
onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag leave");
}
onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag drop");
debugger;
let files = evt.dataTransfer.files;
let valid_files = files;
this.filesChangeEmiter.emit(valid_files);
}
}
DragDropDirective.decorators = [
{ type: Directive, args: [{
selector: '[DragDrop]'
},] }
];
DragDropDirective.ctorParameters = () => [];
DragDropDirective.propDecorators = {
filesChangeEmiter: [{ type: Output }],
background: [{ type: HostBinding, args: ['style.background',] }],
borderStyle: [{ type: HostBinding, args: ['style.border',] }],
borderColor: [{ type: HostBinding, args: ['style.border-color',] }],
borderRadius: [{ type: HostBinding, args: ['style.border-radius',] }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2Ryb3AuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaXJpcy9zcmMvbGliL2Ryb3B6b25lL2RyYWdkcm9wLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBUyxNQUFNLGVBQWUsQ0FBQztBQU1sRyxNQUFNLE9BQU8saUJBQWlCO0lBUzVCO1FBUkEsOEVBQThFO1FBQzVELHNCQUFpQixHQUEwQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2hGLG1GQUFtRjtRQUMxQyxlQUFVLEdBQUcsU0FBUyxDQUFDO1FBQzNCLGdCQUFXLEdBQUcsWUFBWSxDQUFDO1FBQ3JCLGdCQUFXLEdBQUcsU0FBUyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO0lBRWpELENBQUM7SUFFNEIsVUFBVSxDQUFDLEdBQUc7UUFDekQsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3JCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQztRQUM1QixJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztRQUM3QixJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztRQUMvQixPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFBO0lBQzFCLENBQUM7SUFFNkMsV0FBVyxDQUFDLEdBQUc7UUFDM0QsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3JCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQztRQUM1QixJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztRQUM3QixJQUFJLENBQUMsV0FBVyxHQUFHLFlBQVksQ0FBQztRQUNoQyxPQUFPLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxDQUFBO0lBQzNCLENBQUM7SUFFd0MsTUFBTSxDQUFDLEdBQUc7UUFDakQsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3JCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQztRQUM1QixJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztRQUM3QixJQUFJLENBQUMsV0FBVyxHQUFHLFlBQVksQ0FBQztRQUNoQyxPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFBO1FBQ3hCLFFBQVEsQ0FBQztRQUNULElBQUksS0FBSyxHQUFHLEdBQUcsQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDO1FBQ25DLElBQUksV0FBVyxHQUFpQixLQUFLLENBQUM7UUFDdEMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUMzQyxDQUFDOzs7WUE1Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2FBQ3ZCOzs7O2dDQUlFLE1BQU07eUJBRU4sV0FBVyxTQUFDLGtCQUFrQjswQkFDOUIsV0FBVyxTQUFDLGNBQWM7MEJBQzFCLFdBQVcsU0FBQyxvQkFBb0I7MkJBQ2hDLFdBQVcsU0FBQyxxQkFBcUI7eUJBSWpDLFlBQVksU0FBQyxVQUFVLEVBQUUsQ0FBQyxRQUFRLENBQUM7MEJBU25DLFlBQVksU0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7cUJBU3BDLFlBQVksU0FBQyxNQUFNLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgSG9zdEJpbmRpbmcsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbRHJhZ0Ryb3BdJ1xufSlcblxuZXhwb3J0IGNsYXNzIERyYWdEcm9wRGlyZWN0aXZlIHtcbiAgLy9ASW5wdXQoKSBwcml2YXRlIGFsbG93ZWRfZXh0ZW5zaW9ucyA6IEFycmF5PHN0cmluZz4gPSBbJ3BuZycsICdqcGcnLCAnYm1wJ107XG4gIEBPdXRwdXQoKSBwcml2YXRlIGZpbGVzQ2hhbmdlRW1pdGVyIDogRXZlbnRFbWl0dGVyPEZpbGVbXT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIC8vQE91dHB1dCgpIHByaXZhdGUgZmlsZXNJbnZhbGlkRW1pdGVyIDogRXZlbnRFbWl0dGVyPEZpbGVbXT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBIb3N0QmluZGluZygnc3R5bGUuYmFja2dyb3VuZCcpIHByaXZhdGUgYmFja2dyb3VuZCA9ICcjZmZmZmZmJztcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5ib3JkZXInKSBwcml2YXRlIGJvcmRlclN0eWxlID0gJzJweCBkYXNoZWQnO1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmJvcmRlci1jb2xvcicpIHByaXZhdGUgYm9yZGVyQ29sb3IgPSAnI0U1RTdFQic7XG4gIEBIb3N0QmluZGluZygnc3R5bGUuYm9yZGVyLXJhZGl1cycpIHByaXZhdGUgYm9yZGVyUmFkaXVzID0gJzBweCc7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBASG9zdExpc3RlbmVyKCdkcmFnb3ZlcicsIFsnJGV2ZW50J10pIHB1YmxpYyBvbkRyYWdPdmVyKGV2dCl7XG4gICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuYmFja2dyb3VuZCA9ICcjZmZmZmZmJztcbiAgICB0aGlzLmJvcmRlckNvbG9yID0gJyM0MkE1RjUnO1xuICAgIHRoaXMuYm9yZGVyU3R5bGUgPSAnMnB4IHNvbGlkJztcbiAgICBjb25zb2xlLmxvZyhcImRyYWcgb3ZlclwiKVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSkgcHVibGljIG9uRHJhZ0xlYXZlKGV2dCl7XG4gICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuYmFja2dyb3VuZCA9ICcjZmZmZmZmJztcbiAgICB0aGlzLmJvcmRlckNvbG9yID0gJyNlNWU3ZWInO1xuICAgIHRoaXMuYm9yZGVyU3R5bGUgPSAnMnB4IGRhc2hlZCc7XG4gICAgY29uc29sZS5sb2coXCJkcmFnIGxlYXZlXCIpXG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSkgcHVibGljIG9uRHJvcChldnQpe1xuICAgIGV2dC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGV2dC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLmJhY2tncm91bmQgPSAnI2ZmZmZmZic7XG4gICAgdGhpcy5ib3JkZXJDb2xvciA9ICcjZTVlN2ViJztcbiAgICB0aGlzLmJvcmRlclN0eWxlID0gJzJweCBkYXNoZWQnO1xuICAgIGNvbnNvbGUubG9nKFwiZHJhZyBkcm9wXCIpXG4gICAgZGVidWdnZXI7XG4gICAgbGV0IGZpbGVzID0gZXZ0LmRhdGFUcmFuc2Zlci5maWxlcztcbiAgICBsZXQgdmFsaWRfZmlsZXMgOiBBcnJheTxGaWxlPiA9IGZpbGVzO1xuICAgIHRoaXMuZmlsZXNDaGFuZ2VFbWl0ZXIuZW1pdCh2YWxpZF9maWxlcyk7XG4gIH1cbn0iXX0=