drag-drop - npm Package Compare versions

Comparing version 6.1.0 to 7.0.0

buffer.js

 module.exports = dragDropAsBuffer
 
-var dragDrop = require('./')
-var parallel = require('run-parallel')
-var blobToBuffer = require('blob-to-buffer')
+const dragDrop = require('./')
+const parallel = require('run-parallel')
+const blobToBuffer = require('blob-to-buffer')
 
 function dragDropAsBuffer (elem, cb) {
   return dragDrop(elem, function (files, pos, fileList) {
-    var tasks = files.map(function (file) {
+    const tasks = files.map(function (file) {
       return function (cb) {
@@ -11,0 +11,0 @@ blobToBuffer(file, function (err, buffer) {

index.js

@@ -23,4 +23,2 @@ /*! drag-drop. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
-  let timeout
-
   elem.addEventListener('dragenter', onDragEnter, false)
@@ -31,4 +29,7 @@ elem.addEventListener('dragover', onDragOver, false)
 
+  let isEntered = false
+  let numIgnoredEnters = 0
+
   // Function to remove drag-drop listeners
-  return function remove () {
+  return function cleanup () {
     removeDragClass()
@@ -41,25 +42,8 @@ elem.removeEventListener('dragenter', onDragEnter, false)
 
-  function onDragEnter (e) {
-    if (listeners.onDragEnter) {
-      listeners.onDragEnter(e)
-    }
-
-    // Prevent event
-    e.stopPropagation()
-    e.preventDefault()
-    return false
-  }
-
-  function onDragOver (e) {
-    e.stopPropagation()
-    e.preventDefault()
-
-    if (listeners.onDragOver) {
-      listeners.onDragOver(e)
-    }
-    if (e.dataTransfer.items || e.dataTransfer.types) {
+  function isEventHandleable (event) {
+    if (event.dataTransfer.items || event.dataTransfer.types) {
       // Only add "drag" class when `items` contains items that are able to be
       // handled by the registered listeners (files vs. text)
-      const items = Array.from(e.dataTransfer.items)
-      const types = Array.from(e.dataTransfer.types)
+      const items = Array.from(event.dataTransfer.items)
+      const types = Array.from(event.dataTransfer.types)
 
@@ -72,4 +56,4 @@ let fileItems
       } else if (types.length) {
-        // e.dataTransfer.items is empty during 'dragover' in Safari, so use
-        // e.dataTransfer.types as a fallback
+        // event.dataTransfer.items is empty during 'dragover' in Safari, so use
+        // event.dataTransfer.types as a fallback
         fileItems = types.filter(item => item === 'Files')
@@ -79,25 +63,64 @@ textItems = types.filter(item => item.startsWith('text/'))
 
-      if (fileItems.length === 0 && !listeners.onDropText) return
-      if (textItems.length === 0 && !listeners.onDrop) return
-      if (fileItems.length === 0 && textItems.length === 0) return
+      if (fileItems.length === 0 && !listeners.onDropText) return false
+      if (textItems.length === 0 && !listeners.onDrop) return false
+      if (fileItems.length === 0 && textItems.length === 0) return false
     }
+    return true
+  }
 
-    elem.classList.add('drag')
-    clearTimeout(timeout)
+  function onDragEnter (event) {
+    event.stopPropagation()
+    event.preventDefault()
 
-    e.dataTransfer.dropEffect = 'copy'
+    if (!isEventHandleable(event)) return
 
+    if (isEntered) {
+      numIgnoredEnters += 1
+      return false // early return
+    }
+
+    isEntered = true
+
+    if (listeners.onDragEnter) {
+      listeners.onDragEnter(event)
+    }
+
+    addDragClass()
+
     return false
   }
 
-  function onDragLeave (e) {
-    e.stopPropagation()
-    e.preventDefault()
+  function onDragOver (event) {
+    event.stopPropagation()
+    event.preventDefault()
 
+    if (!isEventHandleable(event)) return
+
+    if (listeners.onDragOver) {
+      listeners.onDragOver(event)
+    }
+
+    event.dataTransfer.dropEffect = 'copy'
+
+    return false
+  }
+
+  function onDragLeave (event) {
+    event.stopPropagation()
+    event.preventDefault()
+
+    if (!isEventHandleable(event)) return
+
+    if (numIgnoredEnters > 0) {
+      numIgnoredEnters -= 1
+      return false
+    }
+
+    isEntered = false
+
     if (listeners.onDragLeave) {
-      listeners.onDragLeave(e)
+      listeners.onDragLeave(event)
     }
 
-    clearTimeout(timeout)
-    timeout = setTimeout(removeDragClass, 50)
+    removeDragClass()
 
@@ -107,20 +130,22 @@ return false
 
-  function onDrop (e) {
-    e.stopPropagation()
-    e.preventDefault()
+  function onDrop (event) {
+    event.stopPropagation()
+    event.preventDefault()
 
     if (listeners.onDragLeave) {
-      listeners.onDragLeave(e)
+      listeners.onDragLeave(event)
     }
 
-    clearTimeout(timeout)
     removeDragClass()
 
+    isEntered = false
+    numIgnoredEnters = 0
+
     const pos = {
-      x: e.clientX,
-      y: e.clientY
+      x: event.clientX,
+      y: event.clientY
     }
 
     // text drop support
-    const text = e.dataTransfer.getData('text')
+    const text = event.dataTransfer.getData('text')
     if (text && listeners.onDropText) {
@@ -134,7 +159,7 @@ listeners.onDropText(text, pos)
     // See: https://github.com/feross/drag-drop/issues/39
-    if (listeners.onDrop && e.dataTransfer.items) {
-      const fileList = e.dataTransfer.files
+    if (listeners.onDrop && event.dataTransfer.items) {
+      const fileList = event.dataTransfer.files
 
       // Handle directories in Chrome using the proprietary FileSystem API
-      const items = Array.from(e.dataTransfer.items).filter(item => {
+      const items = Array.from(event.dataTransfer.items).filter(item => {
         return item.kind === 'file'
@@ -171,2 +196,6 @@ })
 
+  function addDragClass () {
+    elem.classList.add('drag')
+  }
+
   function removeDragClass () {
@@ -182,3 +211,3 @@ elem.classList.remove('drag')
     entry.file(file => {
-      file.fullPath = entry.fullPath // preserve pathing for consumer
+      file.fullPath = entry.fullPath // preserve path for consumer
       file.isFile = true
@@ -196,5 +225,5 @@ file.isDirectory = false
   function readEntries (reader) {
-    reader.readEntries(entries_ => {
-      if (entries_.length > 0) {
-        entries = entries.concat(Array.from(entries_))
+    reader.readEntries(currentEntries => {
+      if (currentEntries.length > 0) {
+        entries = entries.concat(Array.from(currentEntries))
         readEntries(reader) // continue reading entries until `readEntries` returns no more
@@ -201,0 +230,0 @@ } else {

package.json

 {
   "name": "drag-drop",
   "description": "HTML5 drag & drop for humans",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "author": {
@@ -15,3 +15,3 @@ "name": "Feross Aboukhadijeh",
     "blob-to-buffer": "^1.2.9",
-    "run-parallel": "^1.1.10"
+    "run-parallel": "^1.2.0"
   },
@@ -23,3 +23,3 @@ "devDependencies": {
     "standard": "*",
-    "tape": "^5.0.1"
+    "tape": "^5.2.0"
   },
@@ -26,0 +26,0 @@ "homepage": "https://github.com/feross/drag-drop",

README.md

@@ -1,5 +0,5 @@
-# drag-drop [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
+# drag-drop [![ci][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
 
-[travis-image]: https://img.shields.io/travis/feross/drag-drop/master.svg
-[travis-url]: https://travis-ci.org/feross/drag-drop
+[ci-image]: https://img.shields.io/github/workflow/status/feross/drag-drop/ci/master
+[ci-url]: https://github.com/feross/drag-drop/actions
 [npm-image]: https://img.shields.io/npm/v/drag-drop.svg
@@ -28,3 +28,3 @@ [npm-url]: https://npmjs.org/package/drag-drop
 - supports files and directories
-- supports modern browsers (Chrome, Firefox, Safari, Edge)
+- excellent browser support (Chrome, Firefox, Safari, Edge)
 - adds a `drag` class to the drop target on hover, for easy styling!
@@ -119,6 +119,6 @@ - optionally, get the file(s) as a Buffer (see [buffer](https://github.com/feross/buffer))
 
-### remove listeners
+### detect drag-and-dropped text
 
-To stop listening for drag & drop events and remove the event listeners, just use the
-`remove` function returned by the `dragDrop` function.
+If the user highlights text and drags it, we capture that as a separate event.
+Listen for it like this:
 
@@ -128,8 +128,8 @@ ```js
 
-const remove = dragDrop('#dropTarget', files => {
-  // ...
+dragDrop('#dropTarget', {
+  onDropText: (text, pos) => {
+    console.log('Here is the dropped text:', text)
+    console.log('Dropped at coordinates', pos.x, pos.y)
+  }
 })
-
-// ... at some point in the future, stop listening for drag & drop events
-remove()
 ```
@@ -152,22 +152,36 @@
   },
-  onDragEnter: () => {},
-  onDragOver: () => {},
-  onDragLeave: () => {}
+  onDropText: (text, pos) => {
+    console.log('Here is the dropped text:', text)
+    console.log('Dropped at coordinates', pos.x, pos.y)
+  },
+  onDragEnter: (event) => {},
+  onDragOver: (event) => {},
+  onDragLeave: (event) => {}
 })
 ```
 
-### detect drag-and-dropped text
+You can rely on the `onDragEnter` and `onDragLeave` events to fire only for the
+drop target you specified. Events which bubble up from child nodes are ignored
+so that you can expect a single `onDragEnter` and then a single `onDragLeave`
+event to fire.
 
-If the user highlights text and drags it, we capture that as a separate event.
-Listen for it like this:
+Furthermore, neither `onDragEnter`, `onDragLeave`, nor `onDragOver` will fire
+for drags which cannot be handled by the registered drop listeners. For example,
+if you only listen for `onDrop` (files) but not `onDropText` (text) and the user
+is dragging text over the drop target, then none of the listed events will fire.
 
+### remove listeners
+
+To stop listening for drag & drop events and remove the event listeners, just use the
+`cleanup` function returned by the `dragDrop` function.
+
 ```js
 const dragDrop = require('drag-drop')
 
-dragDrop('#dropTarget', {
-  onDropText: (text, pos) => {
-    console.log('Here is the dropped text:', text)
-    console.log('Dropped at coordinates', pos.x, pos.y)
-  }
+const cleanup = dragDrop('#dropTarget', files => {
+  // ...
 })
+
+// ... at some point in the future, stop listening for drag & drop events
+cleanup()
 ```
@@ -174,0 +188,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15961

increased by9.02%

Lines of code

220

increased by8.91%

Number of lines in readme file

196

increased by7.69%

Dependency changes

• Updatedrun-parallel@^1.2.0