Update javascript, and litle fixes (#99)

joomla · Feb 8, 2020 · d4d55c8 · d4d55c8
1 parent 4bbabc5
commit d4d55c8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 31 deletions.
diff --git a/administrator/components/com_cpanel/tmpl/cpanel/default.php b/administrator/components/com_cpanel/tmpl/cpanel/default.php
@@ -61,11 +61,11 @@
 			echo ModuleHelper::renderModule($module, array('style' => 'well'));
 		}
 		?>
-		<?php if ($user->authorise('core.create', 'com_modules')) : ?>
-
 		</div>
 	</div>
 </div>
+
+<?php if ($user->authorise('core.create', 'com_modules')) : ?>
 <div class="row">
 	<div class="col-md-6">
 		<button type="button" data-toggle="modal" data-target="#moduleDashboardAddModal" class="cpanel-add-module text-center py-5 w-100 d-block">
@@ -75,5 +75,5 @@
 			<span><?php echo Text::_('COM_CPANEL_ADD_DASHBOARD_MODULE'); ?></span>
 		</button>
 	</div>
-	<?php endif; ?>
 </div>
+<?php endif; ?>
diff --git a/administrator/templates/atum/scss/blocks/_global.scss b/administrator/templates/atum/scss/blocks/_global.scss
@@ -224,15 +224,17 @@ a[target="_blank"]::before {
 
 .card-columns {
   display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(40%,1fr));
-  grid-auto-rows: 10px;
+  grid-gap: 0 15px;
+  grid-template-columns: repeat(auto-fill, minmax(700px,1fr));
 }
 
-.cpanel-help .card-columns,
-.cpanel-system .card-columns {
-  grid-template-columns: repeat(auto-fill, minmax(30%,1fr));
+.cpanel-help,
+.cpanel-system {
+
+  .card-columns {
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   }
+}
 
 .tiny {
   font-size: $font-size-vsm;

diff --git a/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js b/build/media_source/com_cpanel/js/admin-cpanel-default.es6.js
@@ -71,29 +71,46 @@
     document.removeEventListener('DOMContentLoaded', onBoot);
   };
 
-  function resizeGridItem(item) {
-    grid = document.getElementsByClassName('card-columns')[0];
-    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
-    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
-    rowSpan = Math.ceil((item.querySelector('.card').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
-    item.style.gridRowEnd = `span ${rowSpan}`;
-  }
-
-  function resizeAllGridItems() {
-    allItems = document.getElementsByClassName('module-wrapper');
-    for (x = 0; x < allItems.length; x++) {
-      resizeGridItem(allItems[x]);
-    }
-  }
+  // Initialise
+  document.addEventListener('DOMContentLoaded', onBoot);
 
-  function resizeInstance(instance) {
-    item = instance.elements[0];
-    resizeGridItem(item);
-  }
+  // Masonry layout for cpanel cards
+  const MasonryLayout = {
+    $gridBox: null,
 
-  window.onload = resizeAllGridItems();
-  window.addEventListener('resize', resizeAllGridItems);
+    // Calculate "grid-row-end" property
+    resizeGridItem: function($cell, rowHeight, rowGap) {
+      const $content = $cell.querySelector('.card');
+      const rowSpan  = Math.ceil(($content.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
 
-  // Initialise
-  document.addEventListener('DOMContentLoaded', onBoot);
+      $cell.style.gridRowEnd = `span ${rowSpan}`
+    },
+
+    // Check a size of every cell in the grid
+    resizeAllGridItems: function() {
+      const $gridCells   = [].slice.call(MasonryLayout.$gridBox.children);
+      const gridStyle    = window.getComputedStyle(MasonryLayout.$gridBox);
+      const gridAutoRows = parseInt(gridStyle.getPropertyValue('grid-auto-rows')) || 0;
+      const gridRowGap   = parseInt(gridStyle.getPropertyValue('grid-row-gap')) || 10;
+
+      $gridCells.forEach(($cell) => {
+        MasonryLayout.resizeGridItem($cell, gridAutoRows, gridRowGap);
+      });
+    },
+
+    initialise: function() {
+      MasonryLayout.$gridBox = document.querySelector('#cpanel-modules .card-columns');
+      MasonryLayout.resizeAllGridItems();
+
+      // Watch on window resize
+      let resizeTimer;
+      window.addEventListener('resize', () => {
+        window.clearTimeout(resizeTimer);
+        resizeTimer = window.setTimeout(MasonryLayout.resizeAllGridItems, 300);
+      });
+    }
+  };
+
+  // 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);
 })(window, document, window.Joomla);