file-drops - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -9,2 +9,10 @@ # Changelog
 
+## 0.3.0
+
+* `DOCS`: improve documentation
+* `CHORE`: rewrite drop handling
+* `FIX`: unbind all global listeners
+* `FIX`: handle `dragleave` within drop target
+* `FIX`: attach overlay to drop container
+
 ## 0.2.0
@@ -11,0 +19,0 @@

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { domify, event } from 'min-dom';
+import { domify } from 'min-dom';
 
@@ -36,22 +36,11 @@ var OVERLAY_HTML = '<div class="drop-overlay">' +
 
+  // we are bound, if overlay exists
   var overlay;
 
-  /** prevent drop onto other elements which would show default behaviour */
-  event.bind(document, 'dragover', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  });
+  function onDrop(event) {
 
-  event.bind(document, 'drop', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  });
+    event.preventDefault();
 
-  /** handle actual drop */
-  function onDrop(event$$1) {
+    asyncMap(event.dataTransfer.files, readFile, function(err, files) {
 
-    event$$1.preventDefault();
-
-    asyncMap(event$$1.dataTransfer.files, readFile, function(err, files) {
-
       if (err) {
@@ -61,3 +50,3 @@ console.warn('file drop failed', err);
 
-        var args = extraArgs.concat([ files, event$$1 ]);
+        var args = extraArgs.concat([ files, event ]);
 
@@ -90,11 +79,10 @@ // cleanup on drop
 
-  /** drag over */
-  var onDragover = function onDragover() {
+  function onDragover() {
 
     // (0) extract extra arguments (extraArgs..., event)
     var args = slice(arguments),
-        event$$1 = args.pop();
+        event = args.pop();
 
-    var dataTransfer = event$$1.dataTransfer,
-        target = event$$1.target;
+    var dataTransfer = event.dataTransfer,
+        target = event.currentTarget || event.target;
 
@@ -106,3 +94,3 @@ if (!isDragAllowed(dataTransfer)) {
     // make us a drop zone
-    event$$1.preventDefault();
+    event.preventDefault();
 
@@ -118,5 +106,4 @@ dataTransfer.dropEffect = 'copy';
 
-    document.body.appendChild(overlay);
+    target.appendChild(overlay);
 
-
     self = this;
@@ -134,25 +121,35 @@ extraArgs = args;
 
-    // detach on end
-    var onEnd = function(event$$1) {
+    function onLeave(event) {
 
-      // prevent defaults, i.e. native browser drop
-      event$$1.preventDefault();
+      var relatedTarget = event.relatedTarget;
 
-      overlay.removeEventListener('drop', onDrop);
-      overlay.removeEventListener('dragleave', onEnd);
-      overlay.removeEventListener('dragend', onEnd);
-      overlay.removeEventListener('drop', onEnd);
+      if (target.contains(relatedTarget)) {
+        return;
+      }
 
+      onEnd(event);
+    }
+
+    // (2.1) detach on end
+    function onEnd(event) {
+
+      document.removeEventListener('drop', onDrop);
+      document.removeEventListener('drop', onEnd);
+      document.removeEventListener('dragleave', onLeave);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('dragover', preventDrop);
+
       if (overlay) {
-        document.body.removeChild(overlay);
+        target.removeChild(overlay);
         overlay = null;
       }
-    };
+    }
 
-    // attach drag + cleanup event
-    overlay.addEventListener('drop', onDrop);
-    overlay.addEventListener('dragleave', onEnd);
-    overlay.addEventListener('dragend', onEnd);
-    overlay.addEventListener('drop', onEnd);
-  };
+    // (2.0) attach drag + cleanup event
+    document.addEventListener('drop', onDrop);
+    document.addEventListener('drop', onEnd);
+    document.addEventListener('dragleave', onLeave);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('dragover', preventDrop);
+  }
 
@@ -185,4 +182,4 @@ onDragover.onDrop = onDrop;
 
-  reader.onerror = function(event$$1) {
-    done(event$$1.target.error);
+  reader.onerror = function(event) {
+    done(event.target.error);
   };
@@ -233,3 +230,7 @@
 
+function preventDrop(event) {
+  event.preventDefault();
+}
+
 export default fileDrop;
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -38,16 +38,5 @@ 'use strict';
 
+  // we are bound, if overlay exists
   var overlay;
 
-  /** prevent drop onto other elements which would show default behaviour */
-  minDom.event.bind(document, 'dragover', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  });
-
-  minDom.event.bind(document, 'drop', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  });
-
-  /** handle actual drop */
   function onDrop(event) {
@@ -91,4 +80,3 @@
 
-  /** drag over */
-  var onDragover = function onDragover() {
+  function onDragover() {
 
@@ -100,3 +88,3 @@ // (0) extract extra arguments (extraArgs..., event)
     var dataTransfer = event.dataTransfer,
-        target = event.target;
+        target = event.currentTarget || event.target;
 
@@ -119,5 +107,4 @@ if (!isDragAllowed(dataTransfer)) {
 
-    document.body.appendChild(overlay);
+    target.appendChild(overlay);
 
-
     self = this;
@@ -135,25 +122,35 @@ extraArgs = args;
 
-    // detach on end
-    var onEnd = function(event) {
+    function onLeave(event) {
 
-      // prevent defaults, i.e. native browser drop
-      event.preventDefault();
+      var relatedTarget = event.relatedTarget;
 
-      overlay.removeEventListener('drop', onDrop);
-      overlay.removeEventListener('dragleave', onEnd);
-      overlay.removeEventListener('dragend', onEnd);
-      overlay.removeEventListener('drop', onEnd);
+      if (target.contains(relatedTarget)) {
+        return;
+      }
 
+      onEnd(event);
+    }
+
+    // (2.1) detach on end
+    function onEnd(event) {
+
+      document.removeEventListener('drop', onDrop);
+      document.removeEventListener('drop', onEnd);
+      document.removeEventListener('dragleave', onLeave);
+      document.removeEventListener('dragend', onEnd);
+      document.removeEventListener('dragover', preventDrop);
+
       if (overlay) {
-        document.body.removeChild(overlay);
+        target.removeChild(overlay);
         overlay = null;
       }
-    };
+    }
 
-    // attach drag + cleanup event
-    overlay.addEventListener('drop', onDrop);
-    overlay.addEventListener('dragleave', onEnd);
-    overlay.addEventListener('dragend', onEnd);
-    overlay.addEventListener('drop', onEnd);
-  };
+    // (2.0) attach drag + cleanup event
+    document.addEventListener('drop', onDrop);
+    document.addEventListener('drop', onEnd);
+    document.addEventListener('dragleave', onLeave);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('dragover', preventDrop);
+  }
 
@@ -233,3 +230,7 @@ onDragover.onDrop = onDrop;
 
+function preventDrop(event) {
+  event.preventDefault();
+}
+
 module.exports = fileDrop;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "file-drops",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A simple in-browser file drop utility",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -17,9 +17,10 @@ # file-drops
 
-element.addEventListener('dragstart', dropHandler);
+element.addEventListener('dragover', dropHandler);
 ```
 
+
 ## Styling
 
 On drop over, the utility will attach a the following overlay to the
-container element:
+element for which the drop handler got registered:
 
@@ -36,4 +37,5 @@ ```html
 
+
 ## License
 
 MIT

No alert changes

Improved metrics

Total package byte prevSize

29750

0.04%

Number of lines in readme file

39

5.41%

No dependency changes