add "powered by" footer and credits prop

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.23.0
+
+- Add "powered by" footer and [credits prop](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#disabling-credits).
+
+
 ## 4.22.1
 
 - Fix problem with locale files.

dist/filepond.css

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.22.1
+ * FilePond 4.23.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -925,3 +925,21 @@
   margin-top: 1em;
   margin-bottom: 1em;
 }
+
+.filepond--root .filepond--credits {
+  position: absolute;
+  right: 0;
+  opacity: 0.175;
+  line-height: 0.85;
+  font-size: 11px;
+  color: inherit;
+  text-decoration: none;
+  z-index: 3;
+  bottom: -14px;
+}
+
+.filepond--root .filepond--credits[style] {
+  top: 0;
+  bottom: auto;
+  margin-top: 14px;
+}

dist/filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.22.1
+ * FilePond 4.23.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -2023,7 +2023,10 @@ const defaultOptions = {
   styleButtonRemoveItemAlign: [false, Type.BOOLEAN],
 
   // custom initial files array
-  files: [[], Type.ARRAY]
+  files: [[], Type.ARRAY],
+
+  // show support by displaying credits
+  credits: [['https://pqina.nl/', 'Powered by PQINA'], Type.ARRAY]
 };
 
 const getItemByQuery = (items, query) => {
@@ -6044,11 +6047,12 @@ const write$3 = ({ root, props }) => {
 
 const panel = createView({
   name: 'panel',
+  read: ({ root, props }) => (props.heightCurrent = root.ref.bottom.translateY),
   write: write$3,
   create: create$6,
   ignoreRect: true,
   mixins: {
-    apis: ['height', 'scalable']
+    apis: ['height', 'heightCurrent', 'scalable']
   }
 });
 
@@ -8171,6 +8175,22 @@ const create$e = ({ root, props }) => {
     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;
+  if (hasCredits) {
+    const frag = document.createElement('a');
+    frag.className = 'filepond--credits';
+    frag.setAttribute('aria-hidden', 'true');
+    frag.href = credits[0];
+    frag.tabindex = -1;
+    frag.target = '_blank';
+    frag.rel = 'noopener noreferrer';
+    frag.textContent = credits[1];
+    root.element.appendChild(frag);
+    root.ref.credits = frag;
+  }
 };
 
 const write$9 = ({ root, props, actions }) => {
@@ -8398,6 +8418,10 @@ const write$9 = ({ root, props, actions }) => {
     // set container bounds (so pushes siblings downwards)
     root.height = Math.max(labelHeight, boundsHeight - itemMargin);
   }
+
+  // move credits to bottom
+  if (root.ref.credits && panel.heightCurrent)
+    root.ref.credits.style.transform = `translateY(${panel.heightCurrent}px)`;
 };
 
 const calculateListItemMargin = root => {

dist/filepond.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.22.1
+ * FilePond 4.23.0
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -4063,7 +4063,10 @@
     styleButtonRemoveItemAlign: [false, Type.BOOLEAN],
 
     // custom initial files array
-    files: [[], Type.ARRAY]
+    files: [[], Type.ARRAY],
+
+    // show support by displaying credits
+    credits: [['https://pqina.nl/', 'Powered by PQINA'], Type.ARRAY]
   };
 
   var getItemByQuery = function getItemByQuery(items, query) {
@@ -8731,11 +8734,16 @@
 
   var panel = createView({
     name: 'panel',
+    read: function read(_ref3) {
+      var root = _ref3.root,
+        props = _ref3.props;
+      return (props.heightCurrent = root.ref.bottom.translateY);
+    },
     write: write$3,
     create: create$6,
     ignoreRect: true,
     mixins: {
-      apis: ['height', 'scalable']
+      apis: ['height', 'heightCurrent', 'scalable']
     }
   });
 
@@ -11090,6 +11098,22 @@
       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;
+    if (hasCredits) {
+      var frag = document.createElement('a');
+      frag.className = 'filepond--credits';
+      frag.setAttribute('aria-hidden', 'true');
+      frag.href = credits[0];
+      frag.tabindex = -1;
+      frag.target = '_blank';
+      frag.rel = 'noopener noreferrer';
+      frag.textContent = credits[1];
+      root.element.appendChild(frag);
+      root.ref.credits = frag;
+    }
   };
 
   var write$9 = function write(_ref3) {
@@ -11333,6 +11357,11 @@
       // set container bounds (so pushes siblings downwards)
       root.height = Math.max(labelHeight, boundsHeight - itemMargin);
     }
+
+    // move credits to bottom
+    if (root.ref.credits && panel.heightCurrent)
+      root.ref.credits.style.transform =
+        'translateY(' + panel.heightCurrent + 'px)';
   };
 
   var calculateListItemMargin = function calculateListItemMargin(root) {

package.json

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

src/css/root.scss

@@ -65,8 +65,26 @@
     }
 
     .filepond--list-scroller {
-        margin-top:1em;
-        margin-bottom:1em;
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+
+    .filepond--credits {
+        position: absolute;
+        right: 0;
+        opacity: 0.175;
+        line-height: .85;
+        font-size: 11px;
+        color: inherit;
+        text-decoration: none;
+        z-index: 3;
+        bottom: -14px;
+    }
+
+    .filepond--credits[style] {
+        top: 0;
+        bottom: auto;
+        margin-top: 14px;
     }
 
 }

src/js/app/options.js

@@ -186,5 +186,8 @@ export const defaultOptions = {
     styleButtonRemoveItemAlign: [false, Type.BOOLEAN],
 
     // custom initial files array
-    files: [[], Type.ARRAY]
+    files: [[], Type.ARRAY],
+
+    // show support by displaying credits
+    credits: [['https://pqina.nl/', 'Powered by PQINA'], Type.ARRAY]
 };

src/js/app/view/panel.js

@@ -89,10 +89,11 @@ const write = ({ root, props }) => {
 
 export const panel = createView({
     name: 'panel',
+    read: ({ root, props }) => props.heightCurrent = root.ref.bottom.translateY,
     write,
     create,
     ignoreRect: true,
     mixins: {
-        apis: ['height', 'scalable']
+        apis: ['height', 'heightCurrent', 'scalable']
     }
 });

src/js/app/view/root.js

@@ -101,6 +101,22 @@ const create = ({ root, props }) => {
         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;
+    if (hasCredits) {
+        const frag = document.createElement('a');
+        frag.className = 'filepond--credits';
+        frag.setAttribute('aria-hidden', 'true');
+        frag.href = credits[0];
+        frag.tabindex = -1;
+        frag.target = '_blank';
+        frag.rel = 'noopener noreferrer';
+        frag.textContent = credits[1];
+        root.element.appendChild(frag);
+        root.ref.credits = frag;
+    }
 };
 
 const write = ({ root, props, actions }) => {
@@ -324,6 +340,9 @@ const write = ({ root, props, actions }) => {
         // set container bounds (so pushes siblings downwards)
         root.height = Math.max(labelHeight, boundsHeight - itemMargin);
     }
+
+    // move credits to bottom
+    if (root.ref.credits && panel.heightCurrent) root.ref.credits.style.transform = `translateY(${panel.heightCurrent}px)`;
 };
 
 const calculateListItemMargin = (root) => {