Implement a grid element using the nested content elements feature

Author: dmolineus

src/Component/ContentElement/GridWrapperElementController.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ContaoBootstrap\Grid\Component\ContentElement;
+
+use Contao\ContentModel;
+use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
+use Contao\CoreBundle\DependencyInjection\Attribute\AsContentElement;
+use Contao\CoreBundle\Twig\FragmentTemplate;
+use ContaoBootstrap\Core\Helper\ColorRotate;
+use ContaoBootstrap\Grid\Exception\GridNotFound;
+use ContaoBootstrap\Grid\GridIterator;
+use ContaoBootstrap\Grid\GridProvider;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+#[AsContentElement('bs_grid_wrapper', 'bs_grid', nestedFragments: true)]
+final class GridWrapperElementController extends AbstractContentElementController
+{
+    public function __construct(
+        private readonly GridProvider $provider,
+        private readonly ColorRotate $colorRotate,
+    ) {
+    }
+
+    protected function getResponse(FragmentTemplate $template, ContentModel $model, Request $request): Response
+    {
+        $template->iterator  = $this->getIterator($model);
+        $template->name      = $model->bs_grid_name;
+        $template->color     = $this->colorRotate->getColor('ce:' . $model->id);
+        $template->isBackend = $this->isBackendScope($request);
+
+        return $template->getResponse();
+    }
+
+    protected function getIterator(ContentModel $model): GridIterator|null
+    {
+        try {
+            $iterator = $this->provider->getIterator('ce:' . $model->id, (int) $model->bs_grid);
+            $this->tagResponse('contao.db.tl_bs_grid.' . $model->bs_grid);
+
+            return $iterator;
+        } catch (GridNotFound) {
+            // Do nothing. In backend view an error is shown anyway.
+            return null;
+        }
+    }
+}

src/Resources/config/services.yaml

@@ -1,4 +1,7 @@
 services:
+  _defaults:
+    autowire: true
+    autoconfigure: true
   contao_bootstrap.grid.grid_builder:
     class: ContaoBootstrap\Grid\GridBuilder
     arguments:
@@ -10,6 +13,11 @@ services:
     arguments:
       - '@contao_bootstrap.grid.grid_builder'
 
+  ContaoBootstrap\Grid\Component\ContentElement\GridWrapperElementController:
+    arguments:
+      - '@contao_bootstrap.grid.grid_provider'
+      - '@contao_bootstrap.core.helper.color_rotate'
+
   ContaoBootstrap\Grid\Component\ContentElement\GridStartElementController:
     arguments:
       - '@netzmacht.contao_toolkit.template_renderer'

src/Resources/contao/dca/tl_content.php

@@ -27,6 +27,20 @@
  * Palettes
  */
 
+$GLOBALS['TL_DCA']['tl_content']['metapalettes']['bs_grid_wrapper'] = [
+    'type'           => [
+        'title',
+        'headline',
+        'type',
+        'bs_grid',
+        'bs_grid_name',
+    ],
+    'template'       => [':hide', 'customTpl'],
+    'protected'      => [':hide', 'protected'],
+    'expert'         => [':hide', 'guests', 'cssID'],
+    'invisible'      => ['invisible', 'start', 'stop'],
+];
+
 $GLOBALS['TL_DCA']['tl_content']['metapalettes']['bs_gridStart'] = [
     'type'           => [
         'type',

src/Resources/contao/languages/de/modules.php

@@ -3,6 +3,8 @@
 declare(strict_types=1);
 
 $GLOBALS['TL_LANG']['CTE']['bs_grid']               = 'Grid';
+$GLOBALS['TL_LANG']['CTE']['bs_grid_wrapper'][0]    = 'Grid';
+$GLOBALS['TL_LANG']['CTE']['bs_grid_wrapper'][1]    = 'Grid mit verschachtelten Elementen';
 $GLOBALS['TL_LANG']['CTE']['bs_gridSeparator']['0'] = 'Grid-Trennung';
 $GLOBALS['TL_LANG']['CTE']['bs_gridSeparator']['1'] = 'Grid-Trennelement';
 $GLOBALS['TL_LANG']['CTE']['bs_gridStart']['0']     = 'Grid-Start';

src/Resources/contao/languages/en/modules.php

@@ -4,6 +4,8 @@
 
 $GLOBALS['TL_LANG']['CTE']['bs_grid'] = 'Grid';
 
+$GLOBALS['TL_LANG']['CTE']['bs_grid_wrapper'][0]  = 'Grid';
+$GLOBALS['TL_LANG']['CTE']['bs_grid_wrapper'][1]  = 'Grid with nested elements';
 $GLOBALS['TL_LANG']['CTE']['bs_gridStart'][0]     = 'Grid Start';
 $GLOBALS['TL_LANG']['CTE']['bs_gridStart'][1]     = 'Grid Start Element';
 $GLOBALS['TL_LANG']['CTE']['bs_gridSeparator'][0] = 'Grid Separator';

src/Resources/contao/templates/twig/.twig-root

@@ -0,0 +1,34 @@
+{% extends "@Contao/content_element/_base.html.twig" %}
+
+{% block content %}
+  {% if isBackend %}
+    {% if iterator is not null %}
+        {% for fragment in nested_fragments %}
+            <div><span style="color: {{ color }}">{{ name }}</span> <span class="tl_gray">[{{ iterator.current }}]</span></div>
+            {{ content_element(fragment) }}
+        {% endfor %}
+    {% else %}
+        {% for fragment in nested_fragments %}
+            {{ content_element(fragment) }}
+        {% endfor %}
+    {% endif %}
+  {% else %}
+      {% if iterator is not null %}
+          <div class="{{ iterator.row }}">
+              {% for fragment in nested_fragments %}
+                  {% for reset in iterator.resets %}
+                      <div class="clearfix w-100 {{ reset }}"></div>
+                  {% endfor %}
+                  <div class="{{ iterator.current }}">
+                      {{ content_element(fragment) }}
+                  </div>
+              {% endfor %}
+          </div>
+      {% else %}
+          <span class="tl_gerror">{{ 'ERR.bsGridParentMissing'|trans({}, 'contao_default') }}</span>
+          {% for fragment in nested_fragments %}
+              {{ content_element(fragment) }}
+          {% endfor %}
+      {% endif %}
+  {% endif %}
+{% endblock %}