Fix image lightbox click handling and module image size rendering

contao/config/services.yaml

@@ -15,8 +15,8 @@ services:
         name: contao.frontend_module
         category: application
         type: pinnwand
-        template: frontend_module/pinnwand
+        template: frontend/pinnwand
 
   Eiswurm\ContaoPinboardBundle\EventListener\DataContainer\PinboardTimestampListener:
     tags:
-      - { name: contao.callback, table: tl_pinnwand, target: config.onsubmit }
+      - { name: contao.callback, table: tl_pinnwand, target: config.onbeforesubmit, method: onBeforeSubmit }

contao/dca/tl_pinnwand.php

@@ -2,6 +2,10 @@
 
 declare(strict_types=1);
 
+use Contao\DataContainer;
+use Contao\Database;
+use Contao\Input;
+
 $GLOBALS['TL_DCA']['tl_pinnwand'] = [
     'config' => [
         'dataContainer' => Contao\DC_Table::class,
@@ -22,8 +26,8 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'panelLayout' => 'filter;sort,search,limit',
         ],
         'label' => [
-            'fields' => ['ueberschrift', 'dateAdded'],
-            'format' => '%s <span style="color:#999;padding-left:3px">[%s]</span>',
+            'fields' => ['ueberschrift', 'dateAdded', 'dateModified'],
+            'showColumns' => true,
         ],
         'global_operations' => [
             'all' => [
@@ -46,6 +50,10 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
                 'icon' => 'delete.svg',
                 'attributes' => 'onclick="if(!confirm(\'' . ($GLOBALS['TL_LANG']['MSC']['deleteConfirm'] ?? 'Möchten Sie den Eintrag wirklich löschen?') . '\'))return false;Backend.getScrollOffset()"',
             ],
+            'toggle' => [
+                'href' => 'act=toggle&amp;field=published',
+                'icon' => 'visible.svg',
+            ],
             'show' => [
                 'href' => 'act=show',
                 'icon' => 'show.svg',
@@ -74,7 +82,7 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'exclude' => true,
             'search' => true,
             'inputType' => 'textarea',
-            'eval' => ['mandatory' => true, 'maxlength' => 3000, 'rte' => 'tinyMCE', 'allowHtml' => true, 'tl_class' => 'clr'],
+            'eval' => ['mandatory' => true, 'maxlength' => 3000, 'tl_class' => 'clr'],
             'sql' => 'text NULL',
         ],
         'link' => [
@@ -94,14 +102,14 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'sorting' => true,
             'flag' => 6,
             'inputType' => 'text',
-            'eval' => ['rgxp' => 'datim', 'datepicker' => true, 'mandatory' => true, 'tl_class' => 'w50 wizard'],
+            'eval' => ['rgxp' => 'datim', 'datepicker' => true, 'mandatory' => true, 'default' => time(), 'tl_class' => 'w50 wizard'],
             'sql' => 'int(10) unsigned NOT NULL default 0',
         ],
         'dateModified' => [
             'sorting' => true,
             'flag' => 6,
             'inputType' => 'text',
-            'eval' => ['rgxp' => 'datim', 'readonly' => true, 'disabled' => true, 'tl_class' => 'w50'],
+            'eval' => ['rgxp' => 'datim', 'readonly' => true, 'default' => time(), 'tl_class' => 'w50'],
             'sql' => 'int(10) unsigned NOT NULL default 0',
         ],
         'published' => [
@@ -122,3 +130,40 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
         ],
     ],
 ];
+
+$GLOBALS['TL_DCA']['tl_pinnwand']['fields']['ueberschrift']['save_callback'][] = static function (string $value, DataContainer $dataContainer): string {
+    if ('copy' !== Input::get('act')) {
+        return $value;
+    }
+
+    $baseHeadline = trim($value);
+
+    if ('' === $baseHeadline) {
+        return $value;
+    }
+
+    $start = 2;
+    $base = $baseHeadline;
+
+    if (preg_match('/^(.*)\s-\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);
+
+    do {
+        $exists = Database::getInstance()
+            ->prepare('SELECT id FROM tl_pinnwand WHERE ueberschrift=? AND id!=?')
+            ->execute($candidate, $id);
+
+        if ($exists->numRows < 1) {
+            return $candidate;
+        }
+
+        ++$number;
+        $candidate = sprintf('%s - %d', $base, $number);
+    } while (true);
+};

contao/languages/de/modules.php

@@ -2,5 +2,5 @@
 
 declare(strict_types=1);
 
-$GLOBALS['TL_LANG']['MOD']['pinnwand'] = ['Pinwand', 'Pinnwandeinträge verwalten'];
-$GLOBALS['TL_LANG']['FMD']['pinnwand'] = ['Pinwand', 'Zeigt veröffentlichte Pinnwandeinträge als frei angeordnete Notizzettel an'];
+$GLOBALS['TL_LANG']['MOD']['pinnwand'] = ['Pinnwand', 'Pinnwandeinträge verwalten'];
+$GLOBALS['TL_LANG']['FMD']['pinnwand'] = ['Pinnwand', 'Zeigt veröffentlichte Pinnwandeinträge als frei angeordnete Notizzettel an'];

contao/templates/frontend/pinnwand.html.twig

@@ -0,0 +1,34 @@
+<link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">
+
+<section class="pinboard" data-pinboard>
+  <div class="pinboard__surface" data-pinboard-surface>
+    {% for entry in entries %}
+      <article
+        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
+        data-pin-note
+        data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
+        data-seed="{{ entry.id }}"
+        aria-label="{{ entry.headline }}"
+      >
+        {% if entry.imagePath %}
+          <figure class="pin-note__image-wrap">
+            <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
+          </figure>
+        {% endif %}
+
+        <h3 class="pin-note__headline">{{ entry.headline }}</h3>
+        <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
+
+        {% if entry.link %}
+          <p class="pin-note__link-wrap">
+            <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
+          </p>
+        {% endif %}
+      </article>
+    {% else %}
+      <p class="pinboard__empty">Keine veröffentlichten Pinnwandeinträge vorhanden.</p>
+    {% endfor %}
+  </div>
+</section>
+
+<script src="{{ asset('bundles/contaopinboard/js/pinboard.js') }}" defer></script>

src/Controller/FrontendModule/PinboardController.php

@@ -5,16 +5,23 @@ 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\Template;
+use Contao\StringUtil;
 use Eiswurm\ContaoPinboardBundle\Model\PinboardModel;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
 final class PinboardController extends AbstractFrontendModuleController
 {
-    protected function getResponse(Template $template, ModuleModel $model, Request $request): Response
+    public function __construct(
+        private readonly Studio $studio,
+    ) {
+    }
+
+    protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
     {
         $collection = PinboardModel::findBy(
             ['published = ?'],
@@ -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,15 +63,15 @@ 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,
                 ];
             }
         }
 
-        return $this->render('@Contao/frontend_module/pinnwand.html.twig', [
-            'entries' => $notes,
-            'module' => $model,
-        ]);
+        $template->set('entries', $notes);
+        $template->set('module', $model);
+
+        return $template->getResponse();
     }
 }

src/EventListener/DataContainer/PinboardTimestampListener.php

@@ -5,31 +5,30 @@ declare(strict_types=1);
 namespace Eiswurm\ContaoPinboardBundle\EventListener\DataContainer;
 
 use Contao\DataContainer;
-use Contao\Database;
+use Contao\Input;
 
 final class PinboardTimestampListener
 {
-    public function __invoke(DataContainer $dataContainer): void
+    /**
+     * @param array<string, mixed> $values
+     *
+     * @return array<string, mixed>
+     */
+    public function onBeforeSubmit(array $values, DataContainer|null $dataContainer = null): array
     {
-        if (null === $dataContainer->id) {
-            return;
-        }
-
         $timestamp = time();
+        $isCopyAction = 'copy' === Input::get('act');
 
-        $record = Database::getInstance()
-            ->prepare('SELECT dateAdded FROM tl_pinnwand WHERE id = ?')
-            ->limit(1)
-            ->execute($dataContainer->id);
-
-        if (!$record->numRows) {
-            return;
+        if ($isCopyAction || empty($values['dateAdded'])) {
+            $values['dateAdded'] = $timestamp;
         }
 
-        $dateAdded = (int) $record->dateAdded;
+        if ($isCopyAction || empty($values['dateModified'])) {
+            $values['dateModified'] = $timestamp;
+        }
 
-        Database::getInstance()
-            ->prepare('UPDATE tl_pinnwand SET dateAdded = ?, dateModified = ?, tstamp = ? WHERE id = ?')
-            ->execute($dateAdded > 0 ? $dateAdded : $timestamp, $timestamp, $timestamp, $dataContainer->id);
+        $values['tstamp'] = $timestamp;
+
+        return $values;
     }
 }

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);

templates/frontend_module/pinnwand.html.twig

@@ -1,38 +0,0 @@
-{% extends '@Contao/frontend_module/_base.html.twig' %}
-
-{% block content %}
-  <link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">
-
-  <section class="pinboard" data-pinboard>
-    <div class="pinboard__surface" data-pinboard-surface>
-      {% for entry in entries %}
-        <article
-          class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
-          data-pin-note
-          data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
-          data-seed="{{ entry.id }}"
-          aria-label="{{ entry.headline }}"
-        >
-          {% if entry.imagePath %}
-            <figure class="pin-note__image-wrap">
-              <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
-            </figure>
-          {% endif %}
-
-          <h3 class="pin-note__headline">{{ entry.headline }}</h3>
-          <div class="pin-note__text">{{ entry.text|raw }}</div>
-
-          {% if entry.link %}
-            <p class="pin-note__link-wrap">
-              <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
-            </p>
-          {% endif %}
-        </article>
-      {% else %}
-        <p class="pinboard__empty">Keine veröffentlichten Pinnwandeinträge vorhanden.</p>
-      {% endfor %}
-    </div>
-  </section>
-
-  <script src="{{ asset('bundles/contaopinboard/js/pinboard.js') }}" defer></script>
-{% endblock %}