fix disabled scroll issue, add alignment of remove buttons

pqina · Mar 3, 2020 · 2aecf8f · 2aecf8f
1 parent 09222c9
commit 2aecf8f
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.12.0
+
+- Add `styleButtonRemoveItemAlign` to align remove button to the left side of the file item.
+- Fix issue where list of files could not be scrolled when FilePond was disabled.
+
+
 ## 4.11.0
 
 - Add `relativePath` property to file item.

diff --git a/dist/filepond.css b/dist/filepond.css
@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.11.0
+ * FilePond 4.12.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -313,19 +313,25 @@
   animation: fall 0.5s 0.125s linear both;
 }
 
-[data-filepond-item-state='processing-complete'] .filepond--file-info-sub,
 [data-filepond-item-state='processing-complete'] .filepond--file-status-sub {
+  opacity: 0.5;
+}
+
+[data-filepond-item-state='processing-complete']
+  .filepond--processing-complete-indicator:not([style*='hidden'])
+  ~ .filepond--file-status
+  .filepond--file-status-sub {
+  opacity: 0;
+}
+
+[data-filepond-item-state='processing-complete'] .filepond--file-info-sub {
   opacity: 0;
 }
 
 [data-filepond-item-state='processing-complete']
   .filepond--action-revert-item-processing
   ~ .filepond--file-info
-  .filepond--file-info-sub,
-[data-filepond-item-state='processing-complete']
-  .filepond--action-revert-item-processing
-  ~ .filepond--file-status
-  .filepond--file-status-sub {
+  .filepond--file-info-sub {
   opacity: 0.5;
 }
 
@@ -851,6 +857,12 @@
 .filepond--root[data-disabled] {
   pointer-events: none;
 }
+.filepond--root[data-disabled] .filepond--list-scroller {
+  pointer-events: all;
+}
+.filepond--root[data-disabled] .filepond--list {
+  pointer-events: none;
+}
 
 /**
  * Root element children layout

diff --git a/dist/filepond.esm.js b/dist/filepond.esm.js
@@ -2010,6 +2010,7 @@ const defaultOptions = {
   styleButtonProcessItemPosition: ['right', Type.STRING],
   styleLoadIndicatorPosition: ['right', Type.STRING],
   styleProgressIndicatorPosition: ['right', Type.STRING],
+  styleButtonRemoveItemAlign: [false, Type.BOOLEAN],
 
   // custom initial files array
   files: [[], Type.ARRAY]
@@ -5328,7 +5329,7 @@ const fileInfo = createView({
 
 const toPercentage = value => Math.round(value * 100);
 
-const create$3 = ({ root, props }) => {
+const create$3 = ({ root }) => {
   // main status
   const main = createElement$1('span');
   main.className = 'filepond--file-status-main';
@@ -5535,7 +5536,6 @@ const StyleMap = {
     info: { translateX: calculateFileInfoOffset },
     status: { translateX: calculateFileInfoOffset, opacity: 1 }
   },
-
   DID_START_ITEM_LOAD: {
     buttonAbortItemLoad: { opacity: 1 },
     loadProgressIndicator: { opacity: 1 },
@@ -5547,7 +5547,6 @@ const StyleMap = {
     info: { translateX: calculateFileInfoOffset },
     status: { opacity: 1 }
   },
-
   DID_START_ITEM_REMOVE: {
     processProgressIndicator: { opacity: 1, align: getRemoveIndicatorAligment },
     info: { translateX: calculateFileInfoOffset },
@@ -5627,11 +5626,22 @@ const create$4 = ({ root, props }) => {
   // is async set up
   const isAsync = root.query('IS_ASYNC');
 
+  // should align remove item buttons
+  const alignRemoveItemButton = root.query(
+    'GET_STYLE_BUTTON_REMOVE_ITEM_ALIGN'
+  );
+
   // enabled buttons array
   const enabledButtons = isAsync
     ? ButtonKeys.concat()
     : ButtonKeys.filter(key => !/Process/.test(key));
 
+  // update icon and label for revert button when instant uploading
+  if (instantUpload && allowRevert) {
+    Buttons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';
+    Buttons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';
+  }
+
   // remove last button (revert) if not allowed
   if (isAsync && !allowRevert) {
     enabledButtons.splice(-1, 1);
@@ -5642,10 +5652,13 @@ const create$4 = ({ root, props }) => {
     map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };
   }
 
-  // update icon and label for revert button when instant uploading
-  if (instantUpload && allowRevert) {
-    Buttons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';
-    Buttons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';
+  // move remove button to right
+  if (alignRemoveItemButton && allowRevert) {
+    Buttons['RevertItemProcessing'].align = 'BUTTON_REMOVE_ITEM_POSITION';
+    const map = StyleMap['DID_COMPLETE_ITEM_PROCESSING'];
+    map.info.translateX = calculateFileInfoOffset;
+    map.status.translateY = calculateFileVerticalCenterOffset;
+    map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };
   }
 
   // create the button views
@@ -5680,14 +5693,6 @@ const create$4 = ({ root, props }) => {
     root.ref[`button${key}`] = buttonView;
   });
 
-  // create file info view
-  root.ref.info = root.appendChildView(root.createChildView(fileInfo, { id }));
-
-  // create file status view
-  root.ref.status = root.appendChildView(
-    root.createChildView(fileStatus, { id })
-  );
-
   // checkmark
   root.ref.processingCompleteIndicator = root.appendChildView(
     root.createChildView(processingCompleteIndicatorView)
@@ -5696,6 +5701,14 @@ const create$4 = ({ root, props }) => {
     `GET_STYLE_BUTTON_PROCESS_ITEM_POSITION`
   );
 
+  // create file info view
+  root.ref.info = root.appendChildView(root.createChildView(fileInfo, { id }));
+
+  // create file status view
+  root.ref.status = root.appendChildView(
+    root.createChildView(fileStatus, { id })
+  );
+
   // add progress indicators
   const loadIndicatorView = root.appendChildView(
     root.createChildView(progressIndicator, {

diff --git a/dist/filepond.esm.min.js b/dist/filepond.esm.min.js
diff --git a/dist/filepond.js b/dist/filepond.js
@@ -2357,6 +2357,7 @@
     styleButtonProcessItemPosition: ['right', Type.STRING],
     styleLoadIndicatorPosition: ['right', Type.STRING],
     styleProgressIndicatorPosition: ['right', Type.STRING],
+    styleButtonRemoveItemAlign: [false, Type.BOOLEAN],
 
     // custom initial files array
     files: [[], Type.ARRAY]
@@ -7868,8 +7869,8 @@
   };
 
   var create$3 = function create(_ref) {
-    var root = _ref.root,
-      props = _ref.props;
+    var root = _ref.root;
+
     // main status
     var main = createElement$1('span');
     main.className = 'filepond--file-status-main';
@@ -8212,13 +8213,24 @@
     // is async set up
     var isAsync = root.query('IS_ASYNC');
 
+    // should align remove item buttons
+    var alignRemoveItemButton = root.query(
+      'GET_STYLE_BUTTON_REMOVE_ITEM_ALIGN'
+    );
+
     // enabled buttons array
     var enabledButtons = isAsync
       ? ButtonKeys.concat()
       : ButtonKeys.filter(function(key) {
           return !/Process/.test(key);
         });
 
+    // update icon and label for revert button when instant uploading
+    if (instantUpload && allowRevert) {
+      Buttons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';
+      Buttons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';
+    }
+
     // remove last button (revert) if not allowed
     if (isAsync && !allowRevert) {
       enabledButtons.splice(-1, 1);
@@ -8229,10 +8241,13 @@
       map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };
     }
 
-    // update icon and label for revert button when instant uploading
-    if (instantUpload && allowRevert) {
-      Buttons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';
-      Buttons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';
+    // move remove button to right
+    if (alignRemoveItemButton && allowRevert) {
+      Buttons['RevertItemProcessing'].align = 'BUTTON_REMOVE_ITEM_POSITION';
+      var _map = StyleMap['DID_COMPLETE_ITEM_PROCESSING'];
+      _map.info.translateX = calculateFileInfoOffset;
+      _map.status.translateY = calculateFileVerticalCenterOffset;
+      _map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };
     }
 
     // create the button views
@@ -8267,6 +8282,14 @@
       root.ref['button' + key] = buttonView;
     });
 
+    // checkmark
+    root.ref.processingCompleteIndicator = root.appendChildView(
+      root.createChildView(processingCompleteIndicatorView)
+    );
+    root.ref.processingCompleteIndicator.element.dataset.align = root.query(
+      'GET_STYLE_BUTTON_PROCESS_ITEM_POSITION'
+    );
+
     // create file info view
     root.ref.info = root.appendChildView(
       root.createChildView(fileInfo, { id: id })
@@ -8277,14 +8300,6 @@
       root.createChildView(fileStatus, { id: id })
     );
 
-    // checkmark
-    root.ref.processingCompleteIndicator = root.appendChildView(
-      root.createChildView(processingCompleteIndicatorView)
-    );
-    root.ref.processingCompleteIndicator.element.dataset.align = root.query(
-      'GET_STYLE_BUTTON_PROCESS_ITEM_POSITION'
-    );
-
     // add progress indicators
     var loadIndicatorView = root.appendChildView(
       root.createChildView(progressIndicator, {
@@ -8360,7 +8375,6 @@
       var control = _ref4.control,
         key = _ref4.key,
         value = _ref4.value;
-
       control[key] = typeof value === 'function' ? value(root) : value;
     });
   };