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
jakejackson1 · Oct 16, 2023 · 191ef51 · 191ef51
1 parent 97bcbca
commit 191ef51
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 47 deletions.
diff --git a/dist/filepond.css b/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.
  */

diff --git a/dist/filepond.esm.js b/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,
@@ -5993,6 +6012,8 @@ const StateMap = {
     DID_REVERT_ITEM_PROCESSING: 'idle',
 };
 
+const prevent = e => e.preventDefault();
+
 /**
  * Creates the file view
  */
@@ -6026,6 +6047,7 @@ const create$7 = ({ root, props }) => {
         if (!e.isPrimary) return;
 
         let removedActivateListener = false;
+        const rootViewElement = root.element.closest('.filepond--root');
 
         const origin = {
             x: e.pageX,
@@ -6083,15 +6105,23 @@ const create$7 = ({ root, props }) => {
 
             // start listening to clicks again
             if (removedActivateListener) {
-                setTimeout(() => root.element.addEventListener('click', root.ref.handleClick), 0);
+                setTimeout(() => {
+                    root.element.addEventListener('click', root.ref.handleClick);
+                    rootViewElement.removeEventListener('touchmove', prevent);
+                    rootViewElement.removeEventListener('gesturestart', prevent);
+                }, 0);
             }
         };
 
+        // prevent scrolling and zooming on mobile devices while dragging/dropping
+        rootViewElement.addEventListener('touchmove', prevent, { passive: false });
+        rootViewElement.addEventListener('gesturestart', prevent);
+
         document.addEventListener('pointermove', drag);
         document.addEventListener('pointerup', drop);
     };
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'));
 };
 
 const route$1 = createRoute({
@@ -7961,7 +7991,7 @@ const debounce = (func, interval = 16, immidiateOnly = true) => {
 
 const MAX_FILES_LIMIT = 1000000;
 
-const prevent = e => e.preventDefault();
+const prevent$1 = e => e.preventDefault();
 
 const create$e = ({ root, props }) => {
     // Add id
@@ -8029,14 +8059,6 @@ const create$e = ({ root, props }) => {
     root.ref.previousAspectRatio = null;
     root.ref.updateHistory = [];
 
-    // prevent scrolling and zooming on iOS (only if supports pointer events, for then we can enable reorder)
-    const canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;
-    const hasPointerEvents = 'PointerEvent' in window;
-    if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {
-        root.element.addEventListener('touchmove', prevent, { passive: false });
-        root.element.addEventListener('gesturestart', prevent);
-    }
-
     // add credits
     const credits = root.query('GET_CREDITS');
     const hasCredits = credits.length === 2;
@@ -8593,8 +8615,6 @@ const root = createView({
         if (root.ref.hopper) {
             root.ref.hopper.destroy();
         }
-        root.element.removeEventListener('touchmove', prevent);
-        root.element.removeEventListener('gesturestart', prevent);
     },
     mixins: {
         styles: ['height'],

diff --git a/dist/filepond.esm.min.js b/dist/filepond.esm.min.js
diff --git a/dist/filepond.js b/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,
@@ -8533,6 +8552,10 @@
         DID_REVERT_ITEM_PROCESSING: 'idle',
     };
 
+    var prevent = function prevent(e) {
+        return e.preventDefault();
+    };
+
     /**
      * Creates the file view
      */
@@ -8573,6 +8596,7 @@
             if (!e.isPrimary) return;
 
             var removedActivateListener = false;
+            var rootViewElement = root.element.closest('.filepond--root');
 
             var origin = {
                 x: e.pageX,
@@ -8632,16 +8656,22 @@
                 // start listening to clicks again
                 if (removedActivateListener) {
                     setTimeout(function() {
-                        return root.element.addEventListener('click', root.ref.handleClick);
+                        root.element.addEventListener('click', root.ref.handleClick);
+                        rootViewElement.removeEventListener('touchmove', prevent);
+                        rootViewElement.removeEventListener('gesturestart', prevent);
                     }, 0);
                 }
             };
 
+            // prevent scrolling and zooming on mobile devices while dragging/dropping
+            rootViewElement.addEventListener('touchmove', prevent, { passive: false });
+            rootViewElement.addEventListener('gesturestart', prevent);
+
             document.addEventListener('pointermove', drag);
             document.addEventListener('pointerup', drop);
         };
 
-        root.element.addEventListener('pointerdown', grab);
+        onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'));
     };
 
     var route$1 = createRoute({
@@ -10744,7 +10774,7 @@
 
     var MAX_FILES_LIMIT = 1000000;
 
-    var prevent = function prevent(e) {
+    var prevent$1 = function prevent(e) {
         return e.preventDefault();
     };
 
@@ -10828,14 +10858,6 @@
         root.ref.previousAspectRatio = null;
         root.ref.updateHistory = [];
 
-        // prevent scrolling and zooming on iOS (only if supports pointer events, for then we can enable reorder)
-        var canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;
-        var hasPointerEvents = 'PointerEvent' in window;
-        if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {
-            root.element.addEventListener('touchmove', prevent, { passive: false });
-            root.element.addEventListener('gesturestart', prevent);
-        }
-
         // add credits
         var credits = root.query('GET_CREDITS');
         var hasCredits = credits.length === 2;
@@ -11451,8 +11473,6 @@
             if (root.ref.hopper) {
                 root.ref.hopper.destroy();
             }
-            root.element.removeEventListener('touchmove', prevent);
-            root.element.removeEventListener('gesturestart', prevent);
         },
         mixins: {
             styles: ['height'],

diff --git a/dist/filepond.min.css b/dist/filepond.min.css
diff --git a/dist/filepond.min.js b/dist/filepond.min.js
diff --git a/package.json b/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": {

diff --git a/src/js/app/options.js b/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

diff --git a/src/js/app/view/item.js b/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',
@@ -31,6 +32,8 @@ const StateMap = {
     DID_REVERT_ITEM_PROCESSING: 'idle'
 };
 
+const prevent = e => e.preventDefault();
+
 /**
  * Creates the file view
  */
@@ -70,6 +73,7 @@ const create = ({ root, props }) => {
         if (!e.isPrimary) return;
 
         let removedActivateListener = false;
+        const rootViewElement = root.element.closest('.filepond--root');
 
         const origin = {
             x: e.pageX,
@@ -128,15 +132,23 @@ const create = ({ root, props }) => {
 
             // start listening to clicks again
             if (removedActivateListener) {
-                setTimeout(() => root.element.addEventListener('click', root.ref.handleClick), 0);
+                setTimeout(() => {
+                    root.element.addEventListener('click', root.ref.handleClick)
+                    rootViewElement.removeEventListener('touchmove', prevent);
+                    rootViewElement.removeEventListener('gesturestart', prevent);
+                }, 0);
             }
         };
 
+        // prevent scrolling and zooming on mobile devices while dragging/dropping
+        rootViewElement.addEventListener('touchmove', prevent, { passive: false });
+        rootViewElement.addEventListener('gesturestart', prevent);
+
         document.addEventListener('pointermove', drag);
         document.addEventListener('pointerup', drop);
     }
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_LONG_PRESS_INTERVAL'))
 };
 
 const route = createRoute({

diff --git a/src/js/app/view/root.js b/src/js/app/view/root.js
@@ -90,14 +90,6 @@ const create = ({ root, props }) => {
     root.ref.previousAspectRatio = null;
     root.ref.updateHistory = [];
 
-    // prevent scrolling and zooming on iOS (only if supports pointer events, for then we can enable reorder)
-    const canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;
-    const hasPointerEvents = 'PointerEvent' in window;
-    if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {
-        root.element.addEventListener('touchmove', prevent, { passive: false });
-        root.element.addEventListener('gesturestart', prevent);
-    }
-
     // add credits
     const credits = root.query('GET_CREDITS');
     const hasCredits = credits.length === 2;
@@ -654,8 +646,6 @@ export const root = createView({
         if (root.ref.hopper) {
             root.ref.hopper.destroy();
         }
-        root.element.removeEventListener('touchmove', prevent);
-        root.element.removeEventListener('gesturestart', prevent);
     },
     mixins: {
         styles: ['height'],

diff --git a/src/js/utils/onLongPress.js b/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);
+};