Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Fixed fileDrop overlay no longer visible when dragging files

Browse Source
This commit is contained in:
Valentin 2021-10-03 17:39:21 +03:00
parent 3341f8c876
commit 4e752cbe94
1 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
View File

@ -5,7 +5,6 @@ import { ComponentPortal } from '@angular/cdk/portal';
@Injectable() @Injectable()
export class FileDropOverlayService { export class FileDropOverlayService {
private _mouseIn = false;
private readonly _dropOverlayRef: OverlayRef; private readonly _dropOverlayRef: OverlayRef;
constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) { constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
@ -15,26 +14,18 @@ export class FileDropOverlayService {
}); });
} }
dragListener = e => { dragEnter = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (this._mouseIn) { this.openFileDropOverlay();
this.openFileDropOverlay();
}
return false; return false;
}; };
mouseIn = e => {
dragLeave = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this._mouseIn = true; if (e.relatedTarget == null) {
return false;
};
mouseOut = e => {
e.preventDefault();
e.stopPropagation();
if (e.toElement == null && e.relatedTarget == null) {
setTimeout(() => { setTimeout(() => {
this._mouseIn = false;
this.closeFileDropOverlay(); this.closeFileDropOverlay();
}, 250); }, 250);
} }
@ -42,15 +33,13 @@ export class FileDropOverlayService {
}; };
initFileDropHandling() { initFileDropHandling() {
document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragListener, false); document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false);
document.getElementsByTagName('body')[0].addEventListener('mouseenter', this.mouseIn, false); document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false);
document.getElementsByTagName('body')[0].addEventListener('mouseout', this.mouseOut, false);
} }
cleanupFileDropHandling() { cleanupFileDropHandling() {
document.getElementsByTagName('body')[0].removeEventListener('dragenter', this.dragListener, false); document.getElementsByTagName('body')[0].removeEventListener('dragenter', this.dragEnter, false);
document.getElementsByTagName('body')[0].removeEventListener('mouseenter', this.mouseIn, false); document.getElementsByTagName('body')[0].removeEventListener('dragleave', this.dragLeave, false);
document.getElementsByTagName('body')[0].removeEventListener('mouseout', this.mouseOut, false);
} }
openFileDropOverlay() { openFileDropOverlay() {