[4.0] Eliminating cpanel jumping

build/media_source/com_cpanel/js/admin-cpanel-default.es6.js

@@ -61,6 +61,8 @@ const debounce = (callback, time = 250, interval) => (...args) => clearTimeout(i
   // Masonry layout for cpanel cards
   const MasonryLayout = {
     $gridBox: null,
+    gridAutoRows: 0,
+    gridRowGap: 10,
 
     // Calculate "grid-row-end" property
     resizeGridItem($cell, rowHeight, rowGap) {
@@ -75,26 +77,38 @@ const debounce = (callback, time = 250, interval) => (...args) => clearTimeout(i
 
     // Check a size of every cell in the grid
     resizeAllGridItems() {
-      const $gridCells = [].slice.call(MasonryLayout.$gridBox.children);
-      const gridStyle = window.getComputedStyle(MasonryLayout.$gridBox);
-      const gridAutoRows = parseInt(gridStyle.getPropertyValue('grid-auto-rows'), 10) || 0;
-      const gridRowGap = parseInt(gridStyle.getPropertyValue('grid-row-gap'), 10) || 10;
+      const $gridCells = [].slice.call(this.$gridBox.children);
 
       $gridCells.forEach(($cell) => {
-        MasonryLayout.resizeGridItem($cell, gridAutoRows, gridRowGap);
+        this.resizeGridItem($cell, this.gridAutoRows, this.gridRowGap);
       });
     },
 
     initialise() {
-      MasonryLayout.$gridBox = document.querySelector('#cpanel-modules .card-columns');
-      MasonryLayout.resizeAllGridItems();
+      this.$gridBox = document.querySelector('#cpanel-modules .card-columns');
+
+      const gridStyle = window.getComputedStyle(this.$gridBox);
+      this.gridAutoRows = parseInt(gridStyle.getPropertyValue('grid-auto-rows'), 10) || this.gridAutoRows;
+      this.gridRowGap = parseInt(gridStyle.getPropertyValue('grid-row-gap'), 10) || this.gridRowGap;
+
+      this.resizeAllGridItems();
+
+      // Re check the layout after all content (fonts and images) is loaded.
+      window.addEventListener('load', () => this.resizeAllGridItems());
+
+      // Re check the layout when the menu is toggled
+      window.addEventListener('joomla:menu-toggle', () => {
+        // 300ms is animation time, need to wait for the animation ends
+        setTimeout(() => this.resizeAllGridItems(), 330);
+      });
 
       // Watch on window resize
-      window.addEventListener('resize', debounce(MasonryLayout.resizeAllGridItems, 50));
+      window.addEventListener('resize', debounce(() => this.resizeAllGridItems(), 50));
     },
   };
 
-  // Initialise Masonry layout on full load,
-  // to be sure all images/fonts are loaded, and so cards have a "final" size
-  window.addEventListener('load', MasonryLayout.initialise);
+  // Initialise Masonry layout at the very beginning, to avoid jumping.
+  // We can do this because the script is deferred.
+  MasonryLayout.initialise();
+
 })(window, document, window.Joomla);

build/media_source/com_cpanel/js/admin-system-loader.es6.js

@@ -7,7 +7,7 @@
 
   const init = () => {
     // Cleanup
-    document.removeEventListener('DOMContentLoaded', init);
+    window.removeEventListener('load', init);
 
     // Get the elements
     const elements = [].slice.call(document.querySelectorAll('.system-counter'));
@@ -61,5 +61,9 @@
     }
   };
 
-  document.addEventListener('DOMContentLoaded', init);
+  // Give some times to the layout and other scripts to settle their stuff
+  window.addEventListener('load', () => {
+    setTimeout(init, 300);
+  });
+
 })(document, Joomla);

build/media_source/plg_quickicon_extensionupdate/js/extensionupdatecheck.es6.js

@@ -3,12 +3,11 @@
  * @license    GNU General Public License version 2 or later; see LICENSE.txt
  */
 
-// Ajax call to get the update status of the installed extensions
 (() => {
   'use strict';
 
-  // Add a listener on content loaded to initiate the check
-  document.addEventListener('DOMContentLoaded', () => {
+  // Ajax call to get the update status of the installed extensions
+  const fetchUpdate = () => {
     if (Joomla.getOptions('js-extensions-update')) {
       const options = Joomla.getOptions('js-extensions-update');
 
@@ -52,5 +51,11 @@
         },
       });
     }
+  };
+
+  // Give some times to the layout and other scripts to settle their stuff
+  window.addEventListener('load', () => {
+    setTimeout(fetchUpdate, 330);
   });
+
 })();

build/media_source/plg_quickicon_joomlaupdate/js/jupdatecheck.es6.js

@@ -4,7 +4,6 @@
  */
 
 if (Joomla && Joomla.getOptions('js-extensions-update')) {
-  const options = Joomla.getOptions('js-joomla-update');
 
   const update = (type, text) => {
     const link = document.getElementById('plg_quickicon_joomlaupdate');
@@ -20,34 +19,43 @@ if (Joomla && Joomla.getOptions('js-extensions-update')) {
     }
   };
 
-  fetch(options.ajaxUrl, { method: 'GET' })
-    .then((response) => {
-      response.json().then((updateInfoList) => {
-        if (Array.isArray(updateInfoList)) {
-          if (updateInfoList.length === 0) {
-            // No updates
-            update('success', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_UPTODATE'));
-          } else {
-            const updateInfo = updateInfoList.shift();
+  const fetchUpdate = () => {
+    const options = Joomla.getOptions('js-joomla-update');
 
-            if (updateInfo.version !== options.version) {
-              update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_UPDATEFOUND').replace('%s', `<span class="badge text-dark bg-light"> \u200E ${updateInfo.version}</span>`));
-            } else {
+    fetch(options.ajaxUrl, {method: 'GET'})
+      .then((response) => {
+        response.json().then((updateInfoList) => {
+          if (Array.isArray(updateInfoList)) {
+            if (updateInfoList.length === 0) {
+              // No updates
               update('success', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_UPTODATE'));
+            } else {
+              const updateInfo = updateInfoList.shift();
+
+              if (updateInfo.version !== options.version) {
+                update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_UPDATEFOUND').replace('%s', `<span class="badge text-dark bg-light"> \u200E ${updateInfo.version}</span>`));
+              } else {
+                update('success', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_UPTODATE'));
+              }
             }
+          } else {
+            // An error occurred
+            update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
           }
-        } else {
-          // An error occurred
-          update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
-        }
+        })
+          .catch(() => {
+            // An error occurred
+            update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
+          });
       })
-        .catch(() => {
-          // An error occurred
-          update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
-        });
-    })
-    .catch(() => {
-      // An error occurred
-      update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
-    });
+      .catch(() => {
+        // An error occurred
+        update('danger', Joomla.Text._('PLG_QUICKICON_JOOMLAUPDATE_ERROR'));
+      });
+  };
+
+  // Give some times to the layout and other scripts to settle their stuff
+  window.addEventListener('load', () => {
+    setTimeout(fetchUpdate, 300);
+  });
 }

build/media_source/plg_quickicon_overridecheck/js/overridecheck.es6.js

@@ -3,12 +3,11 @@
  * @license    GNU General Public License version 2 or later; see LICENSE.txt
  */
 
-// Ajax call to get the override status.
 (() => {
   'use strict';
 
-  // Add a listener on content loaded to initiate the check.
-  document.addEventListener('DOMContentLoaded', () => {
+  // Ajax call to get the override status.
+  const checkOverride = () => {
     if (Joomla.getOptions('js-override-check')) {
       const options = Joomla.getOptions('js-override-check');
       const update = (type, text, linkHref) => {
@@ -62,5 +61,11 @@
         },
       });
     }
+  };
+
+  // Give some times to the layout and other scripts to settle their stuff
+  window.addEventListener('load', () => {
+    setTimeout(checkOverride, 390);
   });
+
 })();

build/media_source/plg_quickicon_privacycheck/js/privacycheck.es6.js

@@ -6,7 +6,7 @@
 ((document) => {
   'use strict';
 
-  document.addEventListener('DOMContentLoaded', () => {
+  const checkPrivacy = () => {
     const variables = Joomla.getOptions('js-privacy-check');
     const ajaxUrl = variables.plg_quickicon_privacycheck_ajax_url;
     const url = variables.plg_quickicon_privacycheck_url;
@@ -67,5 +67,11 @@
         link.textContent = text.ERROR;
       },
     });
+  };
+
+  // Give some times to the layout and other scripts to settle their stuff
+  window.addEventListener('load', () => {
+    setTimeout(checkPrivacy, 360);
   });
+
 })(document);