Add ‘reorderHoldInterval’ option for Long Press Reordering

The `reorderHoldInterval` option allows people to opt-into “long press” / “press and hold” on a file to reorder. This feature is disabled by default, and there are no backwards compatibility issues. Currently, on small touch-screen devices the native scroll experience can be hijacked by the reorder feature. Enabling “long press” to reorder dramatically improves the UX for these users. **Usage*** ```js FilePond.create(inputElement, { allowMultiple: true, allowReorder: true, reorderHoldInterval: 100, }); ``` Resolves pqina#865
jakejackson1 · Oct 16, 2023 · c68d743 · c68d743
1 parent 97bcbca
commit c68d743
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 22 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
+    reorderHoldInterval: [0, Type.INT], // The hold (long press) 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,
@@ -6044,6 +6063,8 @@ const create$7 = ({ root, props }) => {
 
         const dragState = createDragHelper(root.query('GET_ACTIVE_ITEMS'));
 
+        root.element.closest('.filepond--root').dataset.isReordering = '1';
+
         root.dispatch('DID_GRAB_ITEM', { id: props.id, dragState });
 
         const drag = e => {
@@ -6081,6 +6102,8 @@ const create$7 = ({ root, props }) => {
 
             root.dispatch('DID_DROP_ITEM', { id: props.id, dragState });
 
+            delete root.element.closest('.filepond--root').dataset.isReordering;
+
             // start listening to clicks again
             if (removedActivateListener) {
                 setTimeout(() => root.element.addEventListener('click', root.ref.handleClick), 0);
@@ -6091,7 +6114,7 @@ const create$7 = ({ root, props }) => {
         document.addEventListener('pointerup', drop);
     };
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_HOLD_INTERVAL'));
 };
 
 const route$1 = createRoute({
@@ -7961,8 +7984,6 @@ const debounce = (func, interval = 16, immidiateOnly = true) => {
 
 const MAX_FILES_LIMIT = 1000000;
 
-const prevent = e => e.preventDefault();
-
 const create$e = ({ root, props }) => {
     // Add id
     const id = root.query('GET_ID');
@@ -8033,6 +8054,12 @@ const create$e = ({ root, props }) => {
     const canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;
     const hasPointerEvents = 'PointerEvent' in window;
     if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {
+        const prevent = e => {
+            if (root.element.dataset.isReordering) {
+                e.preventDefault();
+            }
+        };
+
         root.element.addEventListener('touchmove', prevent, { passive: false });
         root.element.addEventListener('gesturestart', prevent);
     }

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
+        reorderHoldInterval: [0, Type.INT], // The hold (long press) 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,
@@ -8591,6 +8610,8 @@
 
             var dragState = createDragHelper(root.query('GET_ACTIVE_ITEMS'));
 
+            root.element.closest('.filepond--root').dataset.isReordering = '1';
+
             root.dispatch('DID_GRAB_ITEM', { id: props.id, dragState: dragState });
 
             var drag = function drag(e) {
@@ -8629,6 +8650,8 @@
 
                 root.dispatch('DID_DROP_ITEM', { id: props.id, dragState: dragState });
 
+                delete root.element.closest('.filepond--root').dataset.isReordering;
+
                 // start listening to clicks again
                 if (removedActivateListener) {
                     setTimeout(function() {
@@ -8641,7 +8664,7 @@
             document.addEventListener('pointerup', drop);
         };
 
-        root.element.addEventListener('pointerdown', grab);
+        onLongPress(root.element, grab, root.query('GET_REORDER_HOLD_INTERVAL'));
     };
 
     var route$1 = createRoute({
@@ -10744,10 +10767,6 @@
 
     var MAX_FILES_LIMIT = 1000000;
 
-    var prevent = function prevent(e) {
-        return e.preventDefault();
-    };
-
     var create$e = function create(_ref) {
         var root = _ref.root,
             props = _ref.props;
@@ -10832,8 +10851,14 @@
         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);
+            var _prevent = function _prevent(e) {
+                if (root.element.dataset.isReordering) {
+                    e.preventDefault();
+                }
+            };
+
+            root.element.addEventListener('touchmove', _prevent, { passive: false });
+            root.element.addEventListener('gesturestart', _prevent);
         }
 
         // add credits

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
+    reorderHoldInterval: [0, Type.INT], // The hold (long press) 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',
@@ -88,6 +89,8 @@ const create = ({ root, props }) => {
 
         const dragState = createDragHelper(root.query('GET_ACTIVE_ITEMS'));
 
+        root.element.closest('.filepond--root').dataset.isReordering = '1';
+
         root.dispatch('DID_GRAB_ITEM', { id: props.id, dragState });
 
         const drag = e => {
@@ -126,6 +129,8 @@ const create = ({ root, props }) => {
 
             root.dispatch('DID_DROP_ITEM', { id: props.id, dragState });
 
+            delete root.element.closest('.filepond--root').dataset.isReordering;
+
             // start listening to clicks again
             if (removedActivateListener) {
                 setTimeout(() => root.element.addEventListener('click', root.ref.handleClick), 0);
@@ -134,9 +139,10 @@ const create = ({ root, props }) => {
 
         document.addEventListener('pointermove', drag);
         document.addEventListener('pointerup', drop);
+
     }
 
-    root.element.addEventListener('pointerdown', grab);
+    onLongPress(root.element, grab, root.query('GET_REORDER_HOLD_INTERVAL'))
 };
 
 const route = createRoute({

diff --git a/src/js/app/view/root.js b/src/js/app/view/root.js
@@ -22,8 +22,6 @@ import getItemsPerRow from '../utils/getItemsPerRow';
 
 const MAX_FILES_LIMIT = 1000000;
 
-const prevent = e => e.preventDefault();
-
 const create = ({ root, props }) => {
     // Add id
     const id = root.query('GET_ID');
@@ -94,6 +92,12 @@ const create = ({ root, props }) => {
     const canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;
     const hasPointerEvents = 'PointerEvent' in window;
     if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {
+        const prevent = e => {
+            if (root.element.dataset.isReordering) {
+                e.preventDefault();
+            }
+        }
+
         root.element.addEventListener('touchmove', prevent, { passive: false });
         root.element.addEventListener('gesturestart', prevent);
     }

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);
+};