Reorderings with Long Press

Swapping to a Long Press to drag and reorders files signals intent. Without this intent, the reordering feature can hijack scrolling on touch-devices, and users can become unintentionally trapped reordering a file. The long press restores user-intent and dramatically improves the UX on touch-devices.

Resolves pqina#865

dist/filepond.css

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.30.4
+ * FilePond 4.30.5
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */

dist/filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.30.4
+ * FilePond 4.30.5
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -1831,6 +1831,7 @@ const defaultOptions = {
     allowRemove: [true, Type.BOOLEAN], // Allow user to remove a file
     allowProcess: [true, Type.BOOLEAN], // Allows user to process a file, when set to false, this removes the file upload button
     allowReorder: [false, Type.BOOLEAN], // Allow reordering of files
+    reorderLongPressInterval: [100, Type.INT], // The longpress interval to wait before reordering the file
     allowDirectoriesOnly: [false, Type.BOOLEAN], // Allow only selecting directories with browse (no support for filtering dnd at this point)
 
     // Try store file if `server` not set
@@ -5966,6 +5967,24 @@ const createDragHelper = items => {
     };
 };
 
+const onLongPress = (element, callback, interval) => {
+    let timer;
+
+    element.addEventListener('pointerdown', e => {
+        timer = setTimeout(() => {
+            timer = null;
+            callback(e);
+        }, interval);
+    });
+
+    function cancel() {
+        clearTimeout(timer);
+    }
+
+    element.addEventListener('pointerup', cancel);
+    element.addEventListener('pointermove', cancel);
+};
+
 const ITEM_TRANSLATE_SPRING = {
     type: 'spring',
     stiffness: 0.75,
@@ -6091,7 +6110,7 @@ const create$7 = ({ root, props }) => {
         document.addEventListener('pointerup', drop);
     };
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'));
 };
 
 const route$1 = createRoute({

dist/filepond.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.30.4
+ * FilePond 4.30.5
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -3757,6 +3757,7 @@
         allowRemove: [true, Type.BOOLEAN], // Allow user to remove a file
         allowProcess: [true, Type.BOOLEAN], // Allows user to process a file, when set to false, this removes the file upload button
         allowReorder: [false, Type.BOOLEAN], // Allow reordering of files
+        reorderLongPressInterval: [100, Type.INT], // The longpress interval to wait before reordering the file
         allowDirectoriesOnly: [false, Type.BOOLEAN], // Allow only selecting directories with browse (no support for filtering dnd at this point)
 
         // Try store file if `server` not set
@@ -8506,6 +8507,24 @@
         };
     };
 
+    var onLongPress = function onLongPress(element, callback, interval) {
+        var timer;
+
+        element.addEventListener('pointerdown', function(e) {
+            timer = setTimeout(function() {
+                timer = null;
+                callback(e);
+            }, interval);
+        });
+
+        function cancel() {
+            clearTimeout(timer);
+        }
+
+        element.addEventListener('pointerup', cancel);
+        element.addEventListener('pointermove', cancel);
+    };
+
     var ITEM_TRANSLATE_SPRING = {
         type: 'spring',
         stiffness: 0.75,
@@ -8641,7 +8660,7 @@
             document.addEventListener('pointerup', drop);
         };
 
-        root.element.addEventListener('pointerdown', grab);
+        onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'));
     };
 
     var route$1 = createRoute({

package.json

@@ -1,6 +1,6 @@
 {
     "name": "filepond",
-    "version": "4.30.4",
+    "version": "4.30.5",
     "description": "FilePond, Where files go to stretch their bits.",
     "license": "MIT",
     "author": {

src/js/app/options.js

@@ -62,6 +62,7 @@ export const defaultOptions = {
     allowRemove: [true, Type.BOOLEAN], // Allow user to remove a file
     allowProcess: [true, Type.BOOLEAN], // Allows user to process a file, when set to false, this removes the file upload button
     allowReorder: [false, Type.BOOLEAN], // Allow reordering of files
+    reorderLongPressInterval: [100, Type.INT], // The longpress interval to wait before reordering the file
     allowDirectoriesOnly: [false, Type.BOOLEAN], // Allow only selecting directories with browse (no support for filtering dnd at this point)
 
     // Try store file if `server` not set

src/js/app/view/item.js

@@ -2,6 +2,7 @@ import { createView, createRoute } from '../frame/index';
 import { fileWrapper } from './fileWrapper';
 import { panel } from './panel';
 import { createDragHelper } from '../utils/createDragHelper';
+import { onLongPress } from '../../utils/onLongPress'
 
 const ITEM_TRANSLATE_SPRING = {
     type: 'spring',
@@ -136,7 +137,7 @@ const create = ({ root, props }) => {
         document.addEventListener('pointerup', drop);
     }
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'))
 };
 
 const route = createRoute({

src/js/utils/onLongPress.js

@@ -0,0 +1,17 @@
+export const onLongPress = (element, callback, interval) => {
+  let timer;
+
+  element.addEventListener('pointerdown', (e) => {
+    timer = setTimeout(() => {
+      timer = null;
+      callback(e);
+    }, interval);
+  });
+
+  function cancel() {
+    clearTimeout(timer);
+  }
+
+  element.addEventListener('pointerup', cancel);
+  element.addEventListener('pointermove', cancel);
+};