Update assets

Author: SteffenDE

priv/static/phoenix_live_view.cjs.js

@@ -59,6 +59,7 @@ var LiveView = (() => {
     "phx-focus-loading",
     "phx-hook-loading"
   ];
+  var PHX_DROP_TARGET_ACTIVE_CLASS = "phx-drop-target-active";
   var PHX_COMPONENT = "data-phx-component";
   var PHX_VIEW_REF = "data-phx-view";
   var PHX_LIVE_LINK = "data-phx-link";
@@ -297,6 +298,16 @@ var LiveView = (() => {
       entryUploader.upload();
     });
   };
+  var eventContainsFiles = (e) => {
+    if (e.dataTransfer.types) {
+      for (let i = 0; i < e.dataTransfer.types.length; i++) {
+        if (e.dataTransfer.types[i] === "Files") {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
 
   // js/phoenix_live_view/browser.js
   var Browser = {
@@ -6296,14 +6307,42 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       );
       this.on("dragover", (e) => e.preventDefault());
+      this.on("dragenter", (e) => {
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
+        );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        if (eventContainsFiles(e)) {
+          this.js().addClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        }
+      });
+      this.on("dragleave", (e) => {
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
+        );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        const rect = dropzone.getBoundingClientRect();
+        if (e.clientX <= rect.left || e.clientX >= rect.right || e.clientY <= rect.top || e.clientY >= rect.bottom) {
+          this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        }
+      });
       this.on("drop", (e) => {
         e.preventDefault();
-        const dropTargetId = maybe(
-          closestPhxBinding(e.target, this.binding(PHX_DROP_TARGET)),
-          (trueTarget) => {
-            return trueTarget.getAttribute(this.binding(PHX_DROP_TARGET));
-          }
+        const dropzone = closestPhxBinding(
+          e.target,
+          this.binding(PHX_DROP_TARGET)
         );
+        if (!dropzone || !(dropzone instanceof HTMLElement)) {
+          return;
+        }
+        this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        const dropTargetId = dropzone.getAttribute(this.binding(PHX_DROP_TARGET));
         const dropTarget = dropTargetId && document.getElementById(dropTargetId);
         const files = Array.from(e.dataTransfer.files || []);
         if (!dropTarget || !(dropTarget instanceof HTMLInputElement) || dropTarget.disabled || files.length === 0 || !(dropTarget.files instanceof FileList)) {