Merge pull request #1309 from lekoala/patch-2

Implement global lazy loadable support for tabs
silverstripe · Jun 21, 2022 · 14f873c · 14f873c
2 parents a014910 + 0350d14
commit 14f873c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/legacy/GridField.js b/client/src/legacy/GridField.js
@@ -21,7 +21,7 @@ $.entwine('ss', function($) {
       }
 
       if (this.is('.grid-field--lazy-loadable') && (
-        (this.closest('.ss-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
+        (this.closest('.ss-tabset, .cms-tabset').length === 0) || (this.data('gridfield-lazy-load-state') === 'force') )
       ) {
         // If our GridField is not inside a tabset for an immidiate reload
         this.data('gridfield-lazy-load-state', 'ready');

diff --git a/client/src/legacy/TabSet.js b/client/src/legacy/TabSet.js
@@ -18,6 +18,56 @@ $.entwine('ss', function($){
       this._super();
     },
 
+    onadd: function () {
+        this.on(
+            'tabsactivate',
+            function (event, { newPanel }) {
+                this.lazyLoadGridFields(newPanel);
+                this.triggerLazyLoad(newPanel);
+            }.bind(this)
+        );
+        this.on(
+            'tabscreate',
+            function (event, { panel }) {
+                this.lazyLoadGridFields(panel);
+                this.triggerLazyLoad(panel);
+            }.bind(this)
+        );
+        this._super();
+    },
+
+    /**
+     * @func triggerLazyLoad
+     * @desc Find all the lazy loadable fields in the panel and trigger their reload.
+     * @param {Object} panel
+     * @param {string} selector
+     */
+    triggerLazyLoad: function (panel, selector = '.lazy-loadable') {
+        panel.find(selector).each((idx, el) => {
+            var $el = $(el);
+            var lazyEvent = el.dataset.lazyEvent || 'lazyload';
+            if ($el.closest('.ss-tabset, .cms-tabset').is(this)) {
+                // This should be listened only once
+                el.dispatchEvent(new Event(lazyEvent));
+            }
+        });
+    },
+
+    /**
+     * @func lazyLoadGridFields
+     * @desc Find all the lazy loadable gridfield in the panel and trigger their reload.
+     * @param {Object} panel
+     */
+     lazyLoadGridFields: function(panel) {
+      panel.find('.grid-field--lazy-loadable').each((i, el) => {
+        const gridfield = $(el);
+        // Avoid triggering all gridfields when using nested tabs
+        if (gridfield.closest('.ss-tabset, .cms-tabset').is(this)) {
+          $(el).lazyload();
+        }
+      });
+    },
+
     /**
      * @func openTabFromURL
      * @param {string} hash
@@ -44,24 +94,17 @@ $.entwine('ss', function($){
       $(() => {
         $trigger.click();
       });
-    },
+    }
 
   }),
 
-    /**
+  /**
    * Lightweight wrapper around jQuery UI tabs for generic tab set-up
    */
   $('.ss-tabset').entwine({
     IgnoreTabState: false,
 
     onadd: function() {
-      this.on("tabsactivate", (function (event, {newPanel}) {
-        this.lazyLoadGridFields(newPanel);
-      }).bind(this));
-      this.on("tabscreate", (function(event, {panel}) {
-        this.lazyLoadGridFields(panel);
-      }).bind(this));
-
       // Can't name redraw() as it clashes with other CMS entwine classes
       this.redrawTabs();
       this._super();
@@ -95,21 +138,6 @@ $.entwine('ss', function($){
         if(!matches) return;
         $(this).attr('href', document.location.href.replace(/#.*/, '') + matches[0]);
       });
-    },
-
-    /**
-     * @func lazyLoadGridFields
-     * @desc Find all the lazy loadable gridfield in the panel and trigger their reload.
-     * @param {Object} panel
-     */
-    lazyLoadGridFields: function(panel) {
-      panel.find('.grid-field--lazy-loadable').each((i, el) => {
-        const gridfield = $(el);
-        // Avoid triggering all gridfields when using nested tabs
-        if (gridfield.closest('.ss-tabset, .cms-tabset').is(this)) {
-          $(el).lazyload();
-        }
-      });
     }
 
   });