Move pinboard assets to bundle public/assets like eventmanager

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/config/services.yaml

@@ -15,7 +15,7 @@ services:
         name: contao.frontend_module
         category: application
         type: pinnwand
-        template: frontend_module/pinnwand
+        template: frontend/pinnwand
 
   Eiswurm\ContaoPinboardBundle\EventListener\DataContainer\PinboardTimestampListener:
     tags:

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

@@ -0,0 +1,36 @@
+{% use '@Contao/component/_figure.html.twig' %}
+
+<link rel="stylesheet" href="{{ asset('bundles/contaopinboard/assets/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.imageFigure %}
+          <figure class="pin-note__image-wrap">
+            {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
+          </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/assets/pinboard.js') }}" defer></script>

public/assets/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);

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,
                 ];
             }

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|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>
-{% endblock %}