@hsaadawy/ngx-chat
Version:
53 lines • 6.79 kB
JavaScript
import { __awaiter } from "tslib";
import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
export class FileDropComponent {
constructor() {
this.fileUpload = new EventEmitter();
this.enabled = true;
this.isDropTarget = false;
}
onDragOver(event) {
if (this.enabled) {
event.preventDefault();
event.stopPropagation();
this.isDropTarget = true;
}
}
onDragLeave(event) {
event.preventDefault();
event.stopPropagation();
this.isDropTarget = false;
}
onDrop(event) {
return __awaiter(this, void 0, void 0, function* () {
if (this.enabled) {
event.preventDefault();
event.stopPropagation();
this.isDropTarget = false;
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < event.dataTransfer.items.length; i++) {
const dataTransferItem = event.dataTransfer.items[i];
if (dataTransferItem.kind === 'file') {
this.fileUpload.emit(dataTransferItem.getAsFile());
}
}
}
});
}
}
FileDropComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-chat-filedrop',
template: "<div>\r\n <div class=\"drop-message\"\r\n [class.drop-message--visible]=\"isDropTarget\">\r\n {{dropMessage}}\r\n </div>\r\n <div>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n",
styles: [".drop-message{pointer-events:none;display:none}.drop-message--visible{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-content:center;flex-direction:column;text-align:center;font-size:1.5em;z-index:999;background-color:#fff9;padding:1em}\n"]
},] }
];
FileDropComponent.propDecorators = {
fileUpload: [{ type: Output }],
dropMessage: [{ type: Input }],
enabled: [{ type: Input }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }, { type: HostListener, args: ['dragenter', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }, { type: HostListener, args: ['dragexit', ['$event'],] }],
onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1kcm9wLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3BhenpuZXR3b3JrL25neC1jaGF0L3NyYy9saWIvY29tcG9uZW50cy9jaGF0LWZpbGVkcm9wL2ZpbGUtZHJvcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBT3JGLE1BQU0sT0FBTyxpQkFBaUI7SUFMOUI7UUFRYSxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQU0vQyxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBRWYsaUJBQVksR0FBRyxLQUFLLENBQUM7SUFzQ3pCLENBQUM7SUFsQ0csVUFBVSxDQUFDLEtBQVU7UUFDakIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2QsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztTQUM1QjtJQUNMLENBQUM7SUFJRCxXQUFXLENBQUMsS0FBVTtRQUNsQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFHSyxNQUFNLENBQUMsS0FBVTs7WUFDbkIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO2dCQUNkLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDdkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO2dCQUV4QixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztnQkFFMUIseUNBQXlDO2dCQUN6QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO29CQUN0RCxNQUFNLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO29CQUNyRCxJQUFJLGdCQUFnQixDQUFDLElBQUksS0FBSyxNQUFNLEVBQUU7d0JBQ2xDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUM7cUJBQ3REO2lCQUNKO2FBQ0o7UUFDTCxDQUFDO0tBQUE7OztZQXBESixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLG1CQUFtQjtnQkFDN0IsdU9BQXlDOzthQUU1Qzs7O3lCQUdJLE1BQU07MEJBR04sS0FBSztzQkFHTCxLQUFLO3lCQUtMLFlBQVksU0FBQyxVQUFVLEVBQUUsQ0FBQyxRQUFRLENBQUMsY0FDbkMsWUFBWSxTQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQzswQkFTcEMsWUFBWSxTQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxjQUNwQyxZQUFZLFNBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDO3FCQU9uQyxZQUFZLFNBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ25neC1jaGF0LWZpbGVkcm9wJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9maWxlLWRyb3AuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZmlsZS1kcm9wLmNvbXBvbmVudC5sZXNzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGaWxlRHJvcENvbXBvbmVudCB7XHJcblxyXG4gICAgQE91dHB1dCgpXHJcbiAgICByZWFkb25seSBmaWxlVXBsb2FkID0gbmV3IEV2ZW50RW1pdHRlcjxGaWxlPigpO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBkcm9wTWVzc2FnZTogc3RyaW5nO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBlbmFibGVkID0gdHJ1ZTtcclxuXHJcbiAgICBpc0Ryb3BUYXJnZXQgPSBmYWxzZTtcclxuXHJcbiAgICBASG9zdExpc3RlbmVyKCdkcmFnb3ZlcicsIFsnJGV2ZW50J10pXHJcbiAgICBASG9zdExpc3RlbmVyKCdkcmFnZW50ZXInLCBbJyRldmVudCddKVxyXG4gICAgb25EcmFnT3ZlcihldmVudDogYW55KSB7XHJcbiAgICAgICAgaWYgKHRoaXMuZW5hYmxlZCkge1xyXG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgICAgICAgICAgdGhpcy5pc0Ryb3BUYXJnZXQgPSB0cnVlO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBASG9zdExpc3RlbmVyKCdkcmFnbGVhdmUnLCBbJyRldmVudCddKVxyXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZ2V4aXQnLCBbJyRldmVudCddKVxyXG4gICAgb25EcmFnTGVhdmUoZXZlbnQ6IGFueSkge1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICAgICAgdGhpcy5pc0Ryb3BUYXJnZXQgPSBmYWxzZTtcclxuICAgIH1cclxuXHJcbiAgICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSlcclxuICAgIGFzeW5jIG9uRHJvcChldmVudDogYW55KSB7XHJcbiAgICAgICAgaWYgKHRoaXMuZW5hYmxlZCkge1xyXG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuXHJcbiAgICAgICAgICAgIHRoaXMuaXNEcm9wVGFyZ2V0ID0gZmFsc2U7XHJcblxyXG4gICAgICAgICAgICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6cHJlZmVyLWZvci1vZlxyXG4gICAgICAgICAgICBmb3IgKGxldCBpID0gMDsgaSA8IGV2ZW50LmRhdGFUcmFuc2Zlci5pdGVtcy5sZW5ndGg7IGkrKykge1xyXG4gICAgICAgICAgICAgICAgY29uc3QgZGF0YVRyYW5zZmVySXRlbSA9IGV2ZW50LmRhdGFUcmFuc2Zlci5pdGVtc1tpXTtcclxuICAgICAgICAgICAgICAgIGlmIChkYXRhVHJhbnNmZXJJdGVtLmtpbmQgPT09ICdmaWxlJykge1xyXG4gICAgICAgICAgICAgICAgICAgIHRoaXMuZmlsZVVwbG9hZC5lbWl0KGRhdGFUcmFuc2Zlckl0ZW0uZ2V0QXNGaWxlKCkpO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxufVxyXG4iXX0=