diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts index 930bb3e96..fc42393b2 100644 --- a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts +++ b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts @@ -5,7 +5,6 @@ import { ComponentPortal } from '@angular/cdk/portal'; @Injectable() export class FileDropOverlayService { - private _mouseIn = false; private readonly _dropOverlayRef: OverlayRef; constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) { @@ -15,26 +14,18 @@ export class FileDropOverlayService { }); } - dragListener = e => { + dragEnter = e => { e.preventDefault(); e.stopPropagation(); - if (this._mouseIn) { - this.openFileDropOverlay(); - } + this.openFileDropOverlay(); return false; }; - mouseIn = e => { + + dragLeave = e => { e.preventDefault(); e.stopPropagation(); - this._mouseIn = true; - return false; - }; - mouseOut = e => { - e.preventDefault(); - e.stopPropagation(); - if (e.toElement == null && e.relatedTarget == null) { + if (e.relatedTarget == null) { setTimeout(() => { - this._mouseIn = false; this.closeFileDropOverlay(); }, 250); } @@ -42,15 +33,13 @@ export class FileDropOverlayService { }; initFileDropHandling() { - document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragListener, false); - document.getElementsByTagName('body')[0].addEventListener('mouseenter', this.mouseIn, false); - document.getElementsByTagName('body')[0].addEventListener('mouseout', this.mouseOut, false); + document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false); + document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false); } cleanupFileDropHandling() { - document.getElementsByTagName('body')[0].removeEventListener('dragenter', this.dragListener, false); - document.getElementsByTagName('body')[0].removeEventListener('mouseenter', this.mouseIn, false); - document.getElementsByTagName('body')[0].removeEventListener('mouseout', this.mouseOut, false); + document.getElementsByTagName('body')[0].removeEventListener('dragenter', this.dragEnter, false); + document.getElementsByTagName('body')[0].removeEventListener('dragleave', this.dragLeave, false); } openFileDropOverlay() {