added on_demand option for filepicker (#1809)

on_demand: true option for filepicker field allows for users to only load the filepicker when the select field is clicked on. This is very useful for pages with many filepickers or large media files, as the page speed improves significantly

themes/grav/app/forms/fields/filepicker.js

@@ -38,6 +38,8 @@ export default class FilePickerField {
         let folder = '';
         let thumbs = {};
 
+        let onDemand = field.closest('[data-ondemand]').length > 0;
+
         if (!field.length || field.get(0).selectize) { return; }
 
         let getData = function getData(field, callback, mode = 'all') {
@@ -118,7 +120,9 @@ export default class FilePickerField {
             },
 
             onInitialize: function() {
-                this.load((callback) => getData(field, (data) => callback(data), 'selected'));
+                if (!onDemand) {
+                    this.load((callback) => getData(field, (data) => callback(data), 'selected'));
+                }
             },
 
             onLoad: function(/* data */) {

themes/grav/templates/forms/fields/filepicker/filepicker.html.twig

@@ -11,6 +11,7 @@
         data-grav-filepicker
         data-name="{{field.name}}"
         {% if field.preview_images %}data-preview-images{% endif %}
+        {% if field.on_demand %}data-ondemand{% endif %}
         data-value="{{value}}"
         {{ parent() }}
     {% endblock %}