feat(mux-uploader): Clean up mux-uploader-drop + overlay and active l…

…ogic now that we support descendants.
muxinc · Jul 20, 2022 · 83777d2 · 83777d2
1 parent fc7b381
commit 83777d2
Showing 1 changed file with 62 additions and 36 deletions.
diff --git a/packages/mux-uploader/src/mux-uploader-drop.ts b/packages/mux-uploader/src/mux-uploader-drop.ts
@@ -57,54 +57,80 @@ class MuxUploaderDropElement extends HTMLElement {
   attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null) {
     if (attributeName === Attributes.OVERLAY_TEXT && oldValue !== newValue) {
       this.overlayText.innerHTML = newValue ?? '';
+    } else if (attributeName === 'active') {
+      if (this.getAttribute('overlay') && newValue != null) {
+        this._currentDragTarget = this;
+      }
     }
   }
 
   static get observedAttributes() {
-    return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER];
+    return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER, 'active'];
   }
 
   get muxUploader() {
     const uploaderId = this.getAttribute(Attributes.MUX_UPLOADER);
     return uploaderId ? document.getElementById(uploaderId) : null;
   }
 
+  protected _currentDragTarget?: Node;
+
   setupDragEvents() {
-    this.addEventListener('dragenter', (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      this.setAttribute('active', '');
-    });
-
-    this.addEventListener('dragleave', (evt) => {
-      this.removeAttribute('active');
-    });
-
-    this.addEventListener('dragover', (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-    });
-
-    this.addEventListener('drop', (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      const { dataTransfer } = evt;
-      //@ts-ignore
-      const { files } = dataTransfer;
-      const file = files[0];
-
-      const uploaderController = this.muxUploader ?? this;
-
-      uploaderController.dispatchEvent(
-        new CustomEvent('file-ready', {
-          composed: true,
-          bubbles: true,
-          detail: file,
-        })
-      );
-
-      this.removeAttribute('active');
-    });
+    this.addEventListener(
+      'dragenter',
+      (evt) => {
+        this._currentDragTarget = evt.target as Node;
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.setAttribute('active', '');
+      },
+      { capture: true }
+    );
+
+    this.addEventListener(
+      'dragleave',
+      (evt) => {
+        if (this._currentDragTarget === evt.target) {
+          this._currentDragTarget = undefined;
+          this.removeAttribute('active');
+        }
+      },
+      { capture: true }
+    );
+
+    this.addEventListener(
+      'dragover',
+      (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      },
+      { capture: true }
+    );
+
+    this.addEventListener(
+      'drop',
+      (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        const { dataTransfer } = evt;
+        //@ts-ignore
+        const { files } = dataTransfer;
+        const file = files[0];
+
+        const uploaderController = this.muxUploader ?? this;
+
+        uploaderController.dispatchEvent(
+          new CustomEvent('file-ready', {
+            composed: true,
+            bubbles: true,
+            detail: file,
+          })
+        );
+
+        this.removeAttribute('active');
+      },
+      { capture: true }
+    );
   }
 }