Initial implementation

2024-10-21 23:29:10 +02:00
parent 24dd530db8
commit a6b62fcd46
6 changed files with 247 additions and 40 deletions
@@ -0,0 +1,60 @@
+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();
+    }
+  };
+};