Update Image Group Widget use Masonry

templaza · Jul 31, 2024 · df8782d · df8782d
1 parent 3731c45
commit df8782d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/framework/elements/imagegroup/imagegroup.php b/framework/elements/imagegroup/imagegroup.php
@@ -13,7 +13,7 @@
 // No direct access.
 defined('_JEXEC') or die;
 
-use Joomla\CMS\Factory;
+use Astroid\Framework;
 use Astroid\Helper\Style;
 
 extract($displayData);
@@ -27,6 +27,7 @@
 }
 
 $enable_slider      =   $params->get('enable_slider', 0);
+$use_masonry        =   $params->get('use_masonry', 0);
 $slider_autoplay    =   $params->get('slider_autoplay', 0);
 $slider_nav         =   $params->get('slider_nav', 1);
 $slider_dotnav      =   $params->get('slider_dotnav', 0);
@@ -144,7 +145,7 @@
 
 $text_color_mode    =   $params->get('text_color_mode', '');
 $text_color_mode    =   $text_color_mode !== '' ? ' ' . $text_color_mode : '';
-echo '<div class="'.($enable_slider ? 'astroid-slick overflow-hidden opacity-0' : $row_column_cls).$gutter_cls.$text_color_mode.'">';
+echo '<div class="'.($enable_slider ? 'astroid-slick overflow-hidden opacity-0' : $row_column_cls).$gutter_cls.$text_color_mode.'"'.(!$enable_slider && $use_masonry ? ' data-masonry=\'{"percentPosition": true }\'' : '').'>';
 foreach ($images as $image) {
     $image_params   =   Style::getSubFormParams($image->params);
     if (!empty($image_params['image'])) {
@@ -162,10 +163,9 @@
     }
 }
 echo '</div>';
+$document = Framework::getDocument();
 if ($enable_slider) {
-    $mainframe = Factory::getApplication();
-    $wa = $mainframe->getDocument()->getWebAssetManager();
-    $wa->registerAndUseStyle('slick.css', 'astroid/slick.min.css');
-    $wa->registerAndUseScript('slick.js', 'astroid/slick.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
-    echo '<script type="text/javascript">jQuery(document).ready(function(){jQuery(\'#'.$element->id.' .astroid-slick\').slick({'.implode(',', $slide_settings).'})});</script>';
+    $document->loadSlick('#'.$element->id.' .astroid-slick', implode(',', $slide_settings));
+} elseif ($use_masonry) {
+    $document->loadMasonry();
 }
diff --git a/framework/elements/imagegroup/imagegroup.xml b/framework/elements/imagegroup/imagegroup.xml
@@ -204,6 +204,7 @@
                     <option value="as-dark">ASTROID_WIDGET_DARK_COLOR</option>
                 </field>
 
+                <field astroidgroup="widget_styles" ngShow="[enable_slider]==0" name="use_masonry" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_USE_MASONRY"/>
                 <field astroidgroup="widget_styles" name="border_radius" type="astroidlist" label="ASTROID_WIDGET_BORDER_RADIUS_LABEL" default="">
                     <option value="">ASTROID_NONE</option>
                     <option value="rounded">TPL_ASTROID_ICON_STYLE_ROUNDED</option>