Fill view with media, add infinite loading

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

@@ -25,8 +25,12 @@ $(function() {
 
     $('body').on('click', '[data-mediapicker-modal-trigger]', function() {
         var modal_identifier = $(this).data('grav-mediapicker-unique-identifier');
-        modal = $.remodal.lookup[$('body').find('[data-remodal-unique-identifier="' + modal_identifier + '"]').data('remodal')];
+        var modal_element = $('body').find('[data-remodal-unique-identifier="' + modal_identifier + '"]');
+        modal = $.remodal.lookup[modal_element.data('remodal')];
         modal.open();
+
+        // load all media
+        modal_element.find('.js__files').trigger('fillView');
     });
 
     /* handle media modal click actions */

themes/grav/app/media/index.js

@@ -31,7 +31,8 @@ export let Instance = new Filter();
 var isLoading = false;
 
 var filters = {};
-var global_index = 0;
+var global_index = 1;
+var files_ended = false;
 
 /* handle changing file type / date filter */
 $('body').on('change', '.thumbs-list-container select.filter', (event) => {
@@ -113,6 +114,10 @@ var filterFiles = function filterFiles() {
     loadMedia(filters, function(content) {
         if (!$(content).length) {
             showEmptyState();
+        } else {
+            if (!filters.page) {
+                enableInfiniteScrolling();
+            }
         }
     });
 };
@@ -159,25 +164,46 @@ $('body').on('click', '.js__reset-pages-filter', (event) => {
 /* handle infinite loading */
 var enableInfiniteScrolling = function enableInfiniteScrolling() {
     $('.spinning-wheel').hide();
-    var files_ended = false;
+    var view = $('.mediapicker-scroll');
-    var view = $('.content-wrapper');
     view.scroll(function() {
-        if (files_ended) {
+        if (($(this).scrollTop() + $(this).innerHeight() + 100) >= $(this)[0].scrollHeight) {
-            return;
+            fillView();
-        }
-
-        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
-            loadMedia({}, function(content) {
-                if (!$(content).length) {
-                    files_ended = true;
-                }
-            });
         }
     });
 };
 
+var loadNextBatch = function loadNextBatch(callback) {
+    if (files_ended) {
+        return;
+    }
+
+    loadMedia({}, function(content) {
+        if (!$(content).length) {
+            files_ended = true;
+        } else {
+            if (callback) {
+                callback();
+            }
+        }
+    });
+
+};
+
+var fillView = function fillView() {
+    if ($('.js__files').find('.card-item').last().offset().top < $('.media-container').height()) {
+        loadNextBatch(function() {
+            fillView();
+        });
+    }
+};
+
 /* disable infinite loading */
 var disableInfiniteScrolling = function disableInfiniteScrolling() {
     $('.spinning-wheel').hide();
     $('.content-wrapper').unbind('scroll');
 };
+
+$('.js__files').on('fillView', function(event) {
+    fillView();
+    enableInfiniteScrolling();
+});