Update Article Widget use Masonry

templaza · Aug 7, 2024 · 4165d00 · 4165d00
1 parent 675123f
commit 4165d00
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php
@@ -15,6 +15,7 @@
 
 use Astroid\Helper\Style;
 use Astroid\Component\Article;
+use Astroid\Framework;
 use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Layout\FileLayout;
 use Joomla\CMS\Factory;
@@ -37,6 +38,7 @@
 $items = Article::getArticles($limit, $ordering, $categories);
 
 $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);
@@ -48,6 +50,10 @@
 $style_dark = new Style('#'. $element->id, 'dark');
 $row_column_cls     =   'row';
 
+if ($use_masonry && !$enable_slider) {
+    $row_column_cls .=  ' as-masonry';
+}
+
 $xxl_column         =   $params->get('xxl_column', '');
 if ($xxl_column) {
     $slide_settings[]=  'slidesToShow: ' . $xxl_column;
@@ -276,7 +282,7 @@
             $media      =   $renderer->render(['article' => $item]);
             break;
     }
-    $item_image_cover = !empty($item->image_thumbnail) ? $enable_image_cover : 0;
+    $item_image_cover = !empty($item->image_thumbnail) && ($enable_image_cover || $layout == 'overlay');
     if ($item_image_cover) {
         $media  =   '<a href="'.Route::_($link).'" title="'. $item->title . '"><div class="as-image-cover d-block overflow-hidden'.($layout == 'overlay' ? ' astroid-image-overlay-cover' : '').$img_border_radius.'"><img class="object-fit-cover w-100 h-100" src="'. $item->image_thumbnail .'" alt="'.$item->title.'"></div></a>';
     }
@@ -293,7 +299,7 @@
         echo '<div class="col order-1">';
     }
 
-    echo '<div class="'.($layout == 'overlay' && $enable_image_cover ? 'card-img-overlay as-light z-1' : 'order-1 card-body' ) . $card_size.'">'; // Start Card-Body
+    echo '<div class="'.($layout == 'overlay' || $enable_image_cover ? 'card-img-overlay as-light z-1' : 'order-1 card-body' ) . $card_size.'">'; // Start Card-Body
 
     if ($media_position == 'inside') {
         echo $media;
@@ -352,10 +358,11 @@
 if ($has_gallery) {
     $wa->useScript('bootstrap.carousel');
 }
+$document = Framework::getDocument();
 if ($enable_slider) {
-    $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();
 }
 if ($params->get('card_size', '') == 'custom') {
     $card_padding   =   $params->get('card_padding', '');

diff --git a/framework/elements/articles/articles.xml b/framework/elements/articles/articles.xml
@@ -196,6 +196,8 @@
                     <option value="5">X-Large</option>
                 </field>
 
+                <field astroidgroup="grid_options" ngShow="[enable_slider]==0" name="use_masonry" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_USE_MASONRY"/>
+
                 <field astroidgroup="card_options" type="astroidlist" name="card_style" label="ASTROID_WIDGET_CARD_STYLE_LABEL" default="">
                     <option value="">Default</option>
                     <option value="primary">Primary</option>