Fixed, once again, mediapicker in lists (fixes #1369)

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

@@ -1,29 +1,48 @@
 import $ from 'jquery';
 import Scrollbar from '../../utils/scrollbar';
+import { Instance as pagesTree } from '../../pages/tree';
+
+const queries = {
+    tree: '.pages-list-container .mediapicker-scroll',
+    thumb: '.thumbs-list-container .mediapicker-scroll'
+};
 
 $(function() {
     let modal = '';
     let body = $('body');
 
-    let treescroll = new Scrollbar('.pages-list-container .mediapicker-scroll', { autoshow: true });
-    let thumbscroll = new Scrollbar('.thumbs-list-container .mediapicker-scroll', { autoshow: true });
+    let treescrolls = [];
+    let thumbscrolls = [];
+
+    $(queries.tree).each((index, element) => {
+        treescrolls.push(new Scrollbar(element, { autoshow: true }));
+    });
+
+    $(queries.thumb).each((index, element) => {
+        thumbscrolls.push(new Scrollbar(element, { autoshow: true }));
+    });
+
+    // let treescroll = new Scrollbar('.pages-list-container .mediapicker-scroll', { autoshow: true });
+    // let thumbscroll = new Scrollbar('.thumbs-list-container .mediapicker-scroll', { autoshow: true });
 
     // Thumb Resizer
-    $('.media-container .media-range').on('input change', function() {
-        let cards = $('.media-container div.card-item');
-        let width = $(this).val() + 'px';
+    $(document).on('input change', '.media-container .media-range', function(event) {
+        const target = $(event.currentTarget);
+        const container = target.closest('.remodal');
+        let cards = container.find('.media-container div.card-item');
+        let width = target.val() + 'px';
         cards.each(function() {
             $(this).css('width', width);
         });
 
-        treescroll.update();
-        thumbscroll.update();
+        treescrolls.forEach((tree) => tree.update());
+        thumbscrolls.forEach((thumb) => thumb.update());
     });
 
     $(document).on('opened', '.remodal', function() {
         setTimeout(function() {
-            treescroll.update();
-            thumbscroll.update();
+            treescrolls.forEach((tree) => tree.update());
+            thumbscrolls.forEach((thumb) => thumb.update());
         }, 10);
     });
 
@@ -38,11 +57,24 @@ $(function() {
             modal = $.remodal.lookup[modal_element.data('remodal')];
         }
 
+        $(queries.tree).filter((index, item) => !$(item).data('scrollbar')).each((index, item) => {
+            treescrolls.push(new Scrollbar(item, { autoshow: true }));
+        });
+
+        $(queries.thumb).filter((index, item) => !$(item).data('scrollbar')).each((index, item) => {
+            thumbscrolls.push(new Scrollbar(item, { autoshow: true }));
+        });
+
         modal.open();
         modal.dataField = element.find('input');
 
+        treescrolls.forEach((tree) => tree.update());
+        thumbscrolls.forEach((thumb) => thumb.update());
+
         // load all media
         modal_element.find('.js__files').trigger('fillView');
+
+        setTimeout(() => pagesTree.reload(), 100);
     });
 
     /* handle media modal click actions */

themes/grav/app/media/index.js

@@ -88,6 +88,7 @@ var loadMedia = function loadMedia(filters, callback) {
         $.get(url, function(content) {
             $('.js__files').append(content);
             $('.spinning-wheel').hide();
+            $('.media-container .media-range').trigger('change');
             isLoading = false;
             global_index++;
 
@@ -170,7 +171,7 @@ var enableInfiniteScrolling = function enableInfiniteScrolling() {
         gemini = gemini.getViewElement();
     }
 
-    if (!gemini.length && !view.length) { return; }
+    if (!gemini || !gemini.length && !view.length) { return; }
 
     $(gemini || view).on('scroll', function() {
         if (($(this).scrollTop() + $(this).innerHeight() + 100) >= $(this)[0].scrollHeight) {

themes/grav/app/pages/tree.js

@@ -8,8 +8,9 @@ if (!sessionStorage.getItem(sessionKey)) {
 }
 
 export default class PagesTree {
-    constructor(elements) {
-        this.elements = $(elements);
+    constructor(query, elements = undefined) {
+        this.query = query;
+        this.elements = $(elements !== undefined ? elements : this.query);
         this.session = JSON.parse(sessionStorage.getItem(sessionKey) || '{}');
 
         if (!this.elements.length) { return; }
@@ -17,6 +18,7 @@ export default class PagesTree {
         this.restore();
 
         this.elements.find('.page-icon').on('click', (event) => this.toggle(event.target));
+        this.elements.data('tree_init', 1);
 
         $('[data-page-toggleall]').on('click', (event) => {
             let element = $(event.target).closest('[data-page-toggleall]');
@@ -26,6 +28,12 @@ export default class PagesTree {
         });
     }
 
+    reload() {
+        const elements = $(this.query).filter((index, element) => !$(element).data('tree_init'));
+        if (!elements.length) { return; }
+        this.constructor(this.query, elements);
+    }
+
     toggle(elements, dontStore = false) {
         if (typeof elements === 'string') {
             elements = $(`[data-nav-id="${elements}"]`).find('[data-toggle="children"]');
@@ -56,6 +64,11 @@ export default class PagesTree {
             }
         });
 
+        const scroller = elements.closest('.mediapicker-scroll');
+        if (scroller.length && scroller.data('scrollbar')) {
+            scroller.data('scrollbar').update();
+        }
+
         if (!dontStore) { this.save(); }
     }
 
@@ -86,6 +99,11 @@ export default class PagesTree {
             }
         });
 
+        const scroller = elements.closest('.mediapicker-scroll');
+        if (scroller.length && scroller.data('scrollbar')) {
+            scroller.data('scrollbar').update();
+        }
+
         if (!dontStore) { this.save(); }
     }