Dramatically improved filepicker performance. Data is only ever loaded when the dropdown is on focus, as it was supposed to be. Image preview of a selected item won't be rendered unless the field gains focus to avoid wasting resources. (fixes #788)

CHANGELOG.md

@@ -16,6 +16,7 @@
     * Fixed Submit buttons getting disabled in case of form invalidity disallowing to submit again ([#802](https://github.com/getgrav/grav-plugin-admin/issues/802))
     * Fixed issue when reading the file size setting if set to `0` (in Pagemedia and File fields)
     * Fixed issue with `file` field in collections that caused unexpected duplication of items ([#775](https://github.com/getgrav/grav-plugin-admin/issues/775)) 
+    * Dramatically improved `filepicker` performance. Data is only ever loaded when the dropdown is on focus, as it was supposed to be. Image preview of a selected item won't be rendered unless the field gains focus to avoid wasting resources. ([#788](https://github.com/getgrav/grav-plugin-admin/issues/788))
 
 # v1.2.2
 ## 09/08/2016

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

@@ -33,56 +33,50 @@ export default class FilePickerField {
 
         let field = (isInput ? element : element.find('input, select'));
 
-        var folder = '';
+        let folder = '';
 
         if (!field.length || field.get(0).selectize) { return; }
 
-        var getData = function getData(field, callback) {
+        let getData = function getData(field, callback) {
             let url = config.current_url + `.json/task${config.param_sep}getFilesInFolder`;
-            let parent = field.first().parents('[data-grav-filepicker]');
+            let parent = field.closest('[data-grav-filepicker]');
             let name = parent.data('name');
             let value = parent.data('value');
 
             request(url, {
                 method: 'post',
-                body: {
-                    name: name
-                }
+                body: { name }
             }, (response) => {
                 if (typeof response.files === 'undefined') {
                     return;
                 }
-                var data = [];
-                for (var i = 0; i < response.files.length; i++) {
+
+                let data = [];
+                for (let i = 0; i < response.files.length; i++) {
                     data.push({'name': response.files[i]});
                 }
 
                 folder = response.folder;
-
                 callback(data, value);
             });
         };
 
-        var refreshingCurrentValue = false;
-        var preview_images = false;
-        if (field.first().parents('[data-preview-images]').length > 0) {
-            preview_images = true;
-        }
+        let imagesPreview = field.closest('[data-preview-images]').length > 0;
+        let selectedIsRendered = false;
 
-        var renderOption = function renderOption(item, escape) {
+        let renderOption = function renderOption(item, escape) {
             let image = '';
-            if (preview_images) {
-                if (item.name.match(/\.(jpg|jpeg|png|gif)$/)) {
-                    image = '<img class="filepicker-field-image" src="' + config.base_url_relative + '/../' + folder + '/' + item.name + '"/>';
-                }
+            if (imagesPreview && folder && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
+                image = `
+                    <img class="filepicker-field-image" 
+                         src="${config.base_url_relative}/../${folder}/${item.name}"/>`;
             }
 
-            return '<div>' +
-                '<span class="title">' +
-                image +
-                '<span class="name filepicker-field-name">' + escape(item.name) + '</span>' +
-                '</span>' +
-                '</div>';
+            return `<div>
+                        <span class="title">
+                            ${image} <span class="name filepicker-field-name">${escape(item.name)}</span>
+                        </span>
+                    </div>`;
         };
 
         field.selectize({
@@ -90,43 +84,28 @@ export default class FilePickerField {
             labelField: 'name',
             searchField: 'name',
             create: false,
-            preload: true,
+            preload: false, // 'focus',
             render: {
                 option: function(item, escape) {
                     return renderOption(item, escape);
                 },
+
                 item: function(item, escape) {
                     return renderOption(item, escape);
                 }
             },
-            load: function(query, callback) {
-                var that = this;
 
-                getData(field, function(data, value) {
-                    callback(data);
-                    that.setValue(value);
-                });
-            },
-            onFocus: function() {
-                if (refreshingCurrentValue) {
-                    return;
+            onLoad: function(/* data */) {
+                if (!selectedIsRendered) {
+                    let name = this.getValue();
+                    this.updateOption(name, { name });
+
+                    selectedIsRendered = true;
                 }
-                var that = this;
-                var currentValue = that.getValue();
-                this.clearOptions();
+            },
 
-                getData(field, function(data, value) {
-                    data.forEach(function(item) {
-                        that.addOption(item);
-                        that.refreshOptions();
-                    });
-
-                    refreshingCurrentValue = true;
-                    that.setValue(currentValue);
-                    setTimeout(function() {
-                        refreshingCurrentValue = false;
-                    }, 1000);
-                });
+            onFocus: function() {
+                this.load((callback) => getData(field, (data) => callback(data)));
             }
         });
     }

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

@@ -1,4 +1,8 @@
 {% embed "forms/fields/select/select.html.twig" %}
+    {% if not field.options and value %}
+        {% set field = field|merge({options: {(value): value}}) %}
+    {% endif %}
+
     {% block global_attributes %}
         data-grav-filepicker
         data-name="{{field.name}}"