61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
|
export const dropzoneMixin = function(superClass) {
|
||
|
|
return class extends superClass {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this._boundOnDragStart = this._onDragStart.bind(this);
|
||
|
|
this._boundOnDrag = this._onDrag.bind(this);
|
||
|
|
this._boundOnDrag = this._onDrag.bind(this);
|
||
|
|
this._boundOnLeave = this._onLeave.bind(this);
|
||
|
|
this._boundOnDrop = this._onDrop.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
super.connectedCallback();
|
||
|
|
this.addEventListener('dragstart', this._boundOnDragStart, false)
|
||
|
|
this.addEventListener('dragenter', this._boundOnDrag, false)
|
||
|
|
this.addEventListener('dragover', this._boundOnDrag, false)
|
||
|
|
this.addEventListener('dragleave', this._boundOnLeave, false)
|
||
|
|
this.addEventListener('drop', this._boundOnDrop, false)
|
||
|
|
}
|
||
|
|
|
||
|
|
disconnectedCallback() {
|
||
|
|
super.disconnectedCallback();
|
||
|
|
this.removeEventListener('dragstart', this._boundOnDragStart, false)
|
||
|
|
this.removeEventListener('dragenter', this._boundOnDrag, false)
|
||
|
|
this.removeEventListener('dragover', this._boundOnDrag, false)
|
||
|
|
this.removeEventListener('dragleave', this._boundOnLeave, false)
|
||
|
|
this.removeEventListener('drop', this._boundOnDrop, false)
|
||
|
|
}
|
||
|
|
|
||
|
|
// This event is only triggered if the dragging motion was started inside the browser window.
|
||
|
|
// If that's the case, we know that it can't be image dragged from external. In that case this event isn't triggered because the browser doesn't have focus.
|
||
|
|
_onDragStart() {
|
||
|
|
this._interDragStart = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
_onDrag(e) {
|
||
|
|
if (this._interDragStart) return;
|
||
|
|
this._stopPropagation(e);
|
||
|
|
this.isDraggedOn = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
_onLeave(e) {
|
||
|
|
this._stopPropagation(e);
|
||
|
|
this.isDraggedOn = false;
|
||
|
|
this._interDragStart = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
_onDrop(e) {
|
||
|
|
this._stopPropagation(e);
|
||
|
|
this._interDragStart = false;
|
||
|
|
this.isDraggedOn = false;
|
||
|
|
this.dispatchEvent(new CustomEvent('dropped', { detail: e.dataTransfer, bubbles: true, composed: true }));
|
||
|
|
}
|
||
|
|
|
||
|
|
_stopPropagation(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|