-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
/
dropZone.directive.ts
49 lines (45 loc) · 1.6 KB
/
dropZone.directive.ts
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
import { Directive, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'
import { FileUpload, PlatformService } from '../api/platform'
import './dropZone.directive.scss'
/** @hidden */
@Directive({
selector: '[dropZone]',
})
export class DropZoneDirective implements AfterViewInit {
@Output() transfer = new EventEmitter<FileUpload>()
private dropHint?: HTMLElement
constructor (
private el: ElementRef,
private platform: PlatformService,
) { }
ngAfterViewInit (): void {
this.el.nativeElement.addEventListener('dragover', () => {
if (!this.dropHint) {
this.dropHint = document.createElement('div')
this.dropHint.className = 'drop-zone-hint'
this.dropHint.innerHTML = require('./dropZone.directive.pug')
this.el.nativeElement.appendChild(this.dropHint)
setTimeout(() => {
this.dropHint!.classList.add('visible')
})
}
})
this.el.nativeElement.addEventListener('drop', (event: DragEvent) => {
this.removeHint()
for (const transfer of this.platform.startUploadFromDragEvent(event, true)) {
this.transfer.emit(transfer)
}
})
this.el.nativeElement.addEventListener('dragleave', () => {
this.removeHint()
})
}
private removeHint () {
const element = this.dropHint
delete this.dropHint
element?.classList.remove('visible')
setTimeout(() => {
element?.remove()
}, 500)
}
}