Add Masonry to dashboard modules

joomla · Jul 21, 2017 · f718788 · f718788
1 parent 9c1649c
commit f718788
Show file tree

Hide file tree

Showing 7 changed files with 2,521 additions and 17 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -59,6 +59,7 @@ module.exports = function(grunt) {
 					'media/vendor/flying-focus-a11y/*',
 					'media/vendor/diff/**',
 					'media/vendor/polyfills/**',
+					'media/vendor/masonry-layout/js/**',
 				],
 				expand: true,
 				options: {
@@ -83,10 +84,12 @@ module.exports = function(grunt) {
 				],
 				expand: true
 			},
-			allMinJs: ['media/**/*.min.js', '!media/vendor/*.min.js',
+			allMinJs: [
+				'media/**/*.min.js', '!media/vendor/*.min.js',
 				'media/**/**/*.min.js', '!media/vendor/**/*.min.js',
 				'media/**/**/**/*.min.js', '!media/vendor/**/**/*.min.js',
-				'media/**/**/**/**/*.min.js', '!media/vendor/**/**/**/*.min.js']
+				'media/**/**/**/**/*.min.js', '!media/vendor/**/**/**/*.min.js'
+			]
 		},
 
 		// Update all the packages to the version specified in assets/package.json
@@ -193,6 +196,8 @@ module.exports = function(grunt) {
 					{ expand: true, cwd: '<%= folder.node_module %>diff/dist', src: ['*.js'], dest: 'media/vendor/diff/js/', filter: 'isFile'},
 					// XPath polyfill js files
 					{ expand: false, src: '<%= folder.node_module %>wicked-good-xpath/dist/wgxpath.install.js', dest: 'media/vendor/polyfills/js/polyfill-wgxpath.js', filter: 'isFile'},
+					// Masonry js files
+					{ expand: true, cwd: '<%= folder.node_module %>masonry-layout/dist', src: ['*.js'], dest: 'media/vendor/masonry/js/', filter: 'isFile'},
 
 					// Licenses
 					{ src: ['<%= folder.node_module %>jquery/LICENSE.txt'], dest: 'media/vendor/jquery/LICENSE.txt'},

diff --git a/administrator/components/com_cpanel/tmpl/cpanel/default.php b/administrator/components/com_cpanel/tmpl/cpanel/default.php
@@ -28,24 +28,11 @@
 		</div>
 	<?php endif; ?>
 </div>
-<div class="row">
-
+<div class="row grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "percentPosition": true }'>
 	<?php
 	$cols = 0;
 	foreach ($this->modules as $module)
 	{
-		// Get module parameters
-		$params = new Registry;
-		$params->loadString($module->params);
-		$bootstrapSize = $params->get('bootstrap_size', 6);
-
-		$cols += $bootstrapSize;
-		if ($cols > 12)
-		{
-			echo '</div><div class="row">';
-			$cols = $bootstrapSize;
-		}
-
 		echo JModuleHelper::renderModule($module, array('style' => 'well'));
 	}
 	?>

diff --git a/administrator/templates/atum/html/modules.php b/administrator/templates/atum/html/modules.php
@@ -61,7 +61,7 @@ function modChrome_well($module, &$params, &$attribs)
 		$headerClass    = $params->get('header_class');
 		$headerClass    = ($headerClass) ? ' ' . htmlspecialchars($headerClass) : '';
 
-		echo '<div class="' . $moduleClass . '">';
+		echo '<div class="' . $moduleClass . ' grid-item grid-sizer">';
 		echo '<' . $moduleTag . ' class="card card-block mb-3' . $moduleClassSfx . '">';
 
 			if ($canEdit)

diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
@@ -19,6 +19,7 @@
 // Add JavaScript
 JHtml::_('bootstrap.framework');
 JHtml::_('script', 'media/vendor/flying-focus-a11y/js/flying-focus.min.js', ['version' => 'auto']);
+JHtml::_('script', 'media/vendor/masonry/js/masonry.pkgd.min.js', ['version' => 'auto']);
 JHtml::_('script', 'template.js', ['version' => 'auto', 'relative' => true]);
 
 // Load template CSS file

diff --git a/grunt-settings.yaml b/grunt-settings.yaml
@@ -28,6 +28,9 @@ vendors:
     'mediaelement':
                   'version': '4.2.2'
                   'dependencies': 'jquery'
+    'masonry-layout':
+                  'version': '4.2.0'
+                  'dependencies': ''
     'punycode':
                   'version': '1.4.1'
                   'dependencies': ''