Include twig root marker and pending pinnwand DCA/template fixes

contao/config/config.php

@@ -9,3 +9,5 @@ $GLOBALS['BE_MOD']['content']['pinnwand'] = [
 ];
 
 $GLOBALS['TL_MODELS']['tl_pinnwand'] = PinboardModel::class;
+
+$GLOBALS['TL_DCA']['tl_module']['palettes']['pinnwand'] = '{title_legend},name,headline,type;{image_legend},imgSize;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';

contao/dca/tl_module.php

@@ -0,0 +1,5 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_DCA']['tl_module']['palettes']['pinnwand'] = '{title_legend},name,headline,type;{image_legend},imgSize;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';

contao/dca/tl_pinnwand.php

@@ -102,14 +102,16 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'sorting' => true,
             'flag' => 6,
             'inputType' => 'text',
-            'eval' => ['rgxp' => 'datim', 'datepicker' => true, 'mandatory' => true, 'default' => time(), 'tl_class' => 'w50 wizard'],
+            'default' => time(),
+            'eval' => ['rgxp' => 'datim', 'datepicker' => true, 'mandatory' => true, 'tl_class' => 'w50 wizard'],
             'sql' => 'int(10) unsigned NOT NULL default 0',
         ],
         'dateModified' => [
             'sorting' => true,
             'flag' => 6,
             'inputType' => 'text',
-            'eval' => ['rgxp' => 'datim', 'readonly' => true, 'default' => time(), 'tl_class' => 'w50'],
+            'default' => time(),
+            'eval' => ['rgxp' => 'datim', 'readonly' => true, 'tl_class' => 'w50'],
             'sql' => 'int(10) unsigned NOT NULL default 0',
         ],
         'published' => [
@@ -145,14 +147,14 @@ $GLOBALS['TL_DCA']['tl_pinnwand']['fields']['ueberschrift']['save_callback'][] =
     $start = 2;
     $base = $baseHeadline;
 
-    if (preg_match('/^(.*)\s-\s(\d+)$/', $baseHeadline, $matches)) {
+    if (preg_match('/^(.*)\s\((\d+)\)$/', $baseHeadline, $matches)) {
         $base = trim($matches[1]);
         $start = (int) $matches[2] + 1;
     }
 
     $id = (int) ($dataContainer->id ?? 0);
     $number = max(2, $start);
-    $candidate = sprintf('%s - %d', $base, $number);
+    $candidate = sprintf('%s (%d)', $base, $number);
 
     do {
         $exists = Database::getInstance()
@@ -164,6 +166,18 @@ $GLOBALS['TL_DCA']['tl_pinnwand']['fields']['ueberschrift']['save_callback'][] =
         }
 
         ++$number;
-        $candidate = sprintf('%s - %d', $base, $number);
+        $candidate = sprintf('%s (%d)', $base, $number);
     } while (true);
 };
+
+$GLOBALS['TL_DCA']['tl_pinnwand']['fields']['dateAdded']['load_callback'][] = static function (mixed $value): int {
+    $timestamp = (int) $value;
+
+    return $timestamp > 0 ? $timestamp : time();
+};
+
+$GLOBALS['TL_DCA']['tl_pinnwand']['fields']['dateModified']['load_callback'][] = static function (mixed $value): int {
+    $timestamp = (int) $value;
+
+    return $timestamp > 0 ? $timestamp : time();
+};

contao/templates/frontend/pinnwand.html.twig

@@ -1,3 +1,5 @@
+{% use '@Contao/component/_figure.html.twig' %}
+
 <link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">
 
 <section class="pinboard" data-pinboard>
@@ -10,9 +12,9 @@
         data-seed="{{ entry.id }}"
         aria-label="{{ entry.headline }}"
       >
-        {% if entry.imagePath %}
+        {% if entry.imageFigure %}
           <figure class="pin-note__image-wrap">
-            <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
+            {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
           </figure>
         {% endif %}
 

src/Controller/FrontendModule/PinboardController.php

@@ -5,15 +5,22 @@ declare(strict_types=1);
 namespace Eiswurm\ContaoPinboardBundle\Controller\FrontendModule;
 
 use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
+use Contao\CoreBundle\Image\Studio\Studio;
 use Contao\CoreBundle\Twig\FragmentTemplate;
 use Contao\FilesModel;
 use Contao\ModuleModel;
+use Contao\StringUtil;
 use Eiswurm\ContaoPinboardBundle\Model\PinboardModel;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
 final class PinboardController extends AbstractFrontendModuleController
 {
+    public function __construct(
+        private readonly Studio $studio,
+    ) {
+    }
+
     protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
     {
         $collection = PinboardModel::findBy(
@@ -26,11 +33,27 @@ final class PinboardController extends AbstractFrontendModuleController
 
         if (null !== $collection) {
             foreach ($collection as $entry) {
-                $imagePath = null;
+                $imageFigure = null;
 
                 if ($entry->bild) {
                     $fileModel = FilesModel::findByUuid($entry->bild);
-                    $imagePath = $fileModel?->path;
+
+                    if (null !== $fileModel) {
+                        $figureBuilder = $this->studio
+                            ->createFigureBuilder()
+                            ->fromFilesModel($fileModel)
+                            ->enableLightbox()
+                            ->setLightboxGroupIdentifier('pinnwand-'.$model->id)
+                        ;
+
+                        $imageSize = StringUtil::deserialize($model->imgSize, true);
+
+                        if ([] !== $imageSize) {
+                            $figureBuilder->setSize($imageSize);
+                        }
+
+                        $imageFigure = $figureBuilder->buildIfResourceExists();
+                    }
                 }
 
                 $notes[] = [
@@ -40,7 +63,7 @@ final class PinboardController extends AbstractFrontendModuleController
                     'link' => (string) $entry->link,
                     'dateAdded' => (int) $entry->dateAdded,
                     'dateModified' => (int) $entry->dateModified,
-                    'imagePath' => $imagePath,
+                    'imageFigure' => $imageFigure,
                     'highlighted' => '1' === $entry->hervorgehoben,
                 ];
             }

src/Resources/public/js/pinboard.js

@@ -57,6 +57,10 @@
     let offsetY = 0;
 
     note.addEventListener('pointerdown', (event) => {
+      if (event.target instanceof Element && event.target.closest('a, button, input, select, textarea, label')) {
+        return;
+      }
+
       dragging = true;
       pointerId = event.pointerId;
       note.setPointerCapture(pointerId);