Add svg class support for organization logo figures

contao/templates/frontend/event_filter.html.twig

@@ -31,7 +31,7 @@
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
+    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
 
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
@@ -69,23 +69,35 @@
     }
 
     #eventfilters .widget-select.active .ts-control {
-        outline: 2px solid currentColor;
+        outline: 3px solid currentColor;
-        outline-offset: 2px;
+        outline-offset: 3px;
     }
 
     #eventfilters .ts-control:focus-within {
-        outline: 2px solid currentColor;
+        outline: 3px solid currentColor;
-        outline-offset: 2px;
+        outline-offset: 3px;
     }
 
     #eventfilters .eventfilter-reset[hidden] {
         display: none;
     }
 
+    #eventfilters .ts-wrapper.single .ts-control {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 0.75rem center;
+        background-size: 16px 12px;
+        padding-right: 2rem;
+    }
+
+    #eventfilters .ts-wrapper.single .ts-control > input {
+        width: auto;
+    }
+
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2/dist/css/tom-select.css">
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2/dist/js/tom-select.complete.min.js"></script>
 
 <script type="module">
     const filters = document.getElementById('eventfilters');
@@ -123,12 +135,46 @@
             return null;
         }
 
+        let shouldBlurOnChange = false;
+
         return new window.TomSelect(selectElement, {
-            create: true,
+            create: false,
             sortField: {
                 field: 'text',
                 direction: 'asc',
             },
+            render: {
+                no_results() {
+                    return '<div class="no-results" role="option" aria-disabled="true">Keine Ergebnisse gefunden</div>';
+                },
+                no_more_results() {
+                    return '<div class="no-more-results" role="option" aria-disabled="true">Keine weiteren Ergebnisse</div>';
+                },
+            },
+            onInitialize() {
+                const markPointerInteraction = () => {
+                    shouldBlurOnChange = true;
+                };
+
+                const markKeyboardInteraction = () => {
+                    shouldBlurOnChange = false;
+                };
+
+                this.control.addEventListener('pointerdown', markPointerInteraction);
+                this.control.addEventListener('touchstart', markPointerInteraction, { passive: true });
+                this.control.addEventListener('keydown', markKeyboardInteraction);
+                this.dropdown.addEventListener('pointerdown', markPointerInteraction);
+                this.dropdown.addEventListener('touchstart', markPointerInteraction, { passive: true });
+                this.dropdown.addEventListener('keydown', markKeyboardInteraction);
+            },
+            onChange() {
+                if (!shouldBlurOnChange) {
+                    return;
+                }
+
+                this.blur();
+                shouldBlurOnChange = false;
+            },
         });
     };
 

src/EventListener/OrganizationListingTemplateDataListener.php

@@ -53,7 +53,7 @@ class OrganizationListingTemplateDataListener
 
         $organizationIds = array_values(array_unique(array_values($rowToOrganizationIdMap)));
         $organizationTagMap = $this->fetchOrganizationTagMap($organizationIds);
-        $organizationLogoUuidMap = $this->fetchOrganizationLogoUuidMap($organizationIds);
+        $organizationLogoMap = $this->fetchOrganizationLogoMap($organizationIds);
 
         $organizationTagLabelMap = [];
         $rowTagIdsList = [];
@@ -74,7 +74,9 @@ class OrganizationListingTemplateDataListener
             }
 
             $tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => []];
-            $logoUuid = $organizationLogoUuidMap[$organizationId] ?? '';
+            $logoData = $organizationLogoMap[$organizationId] ?? ['uuid' => '', 'isSvg' => false];
+            $logoUuid = (string) ($logoData['uuid'] ?? '');
+            $logoIsSvg = (bool) ($logoData['isSvg'] ?? false);
             $tagIdsCsv = implode(',', $tagData['ids']);
             $tagLabelsCsv = implode(', ', $tagData['labels']);
 
@@ -84,6 +86,7 @@ class OrganizationListingTemplateDataListener
 
             if ('' !== $logoUuid) {
                 $tbody[$rowIndex]['logo_uuid']['content'] = $logoUuid;
+                $tbody[$rowIndex]['logo_is_svg']['content'] = $logoIsSvg ? '1' : '';
             }
         }
 
@@ -266,16 +269,19 @@ class OrganizationListingTemplateDataListener
     }
 
     /** @param list<int> $organizationIds
-     *  @return array<int, string>
+     *  @return array<int, array{uuid: string, isSvg: bool}>
      */
-    private function fetchOrganizationLogoUuidMap(array $organizationIds): array
+    private function fetchOrganizationLogoMap(array $organizationIds): array
     {
         if ([] === $organizationIds) {
             return [];
         }
 
         $rows = $this->connection->executeQuery(
-            'SELECT o.id AS organization_id, o.logo AS logo_uuid FROM tl_organization o WHERE o.id IN (?)',
+            'SELECT o.id AS organization_id, o.logo AS logo_uuid, f.extension AS file_extension, f.path AS file_path
+             FROM tl_organization o
+             LEFT JOIN tl_files f ON f.uuid = o.logo
+             WHERE o.id IN (?)',
             [$organizationIds],
             [ArrayParameterType::INTEGER],
         )->fetchAllAssociative();
@@ -285,12 +291,22 @@ class OrganizationListingTemplateDataListener
         foreach ($rows as $row) {
             $organizationId = (int) ($row['organization_id'] ?? 0);
             $logoUuid = $this->normalizeUuid($row['logo_uuid'] ?? null);
+            $extension = strtolower(trim((string) ($row['file_extension'] ?? '')));
+
+            if ('' === $extension && isset($row['file_path']) && \is_scalar($row['file_path'])) {
+                $extension = strtolower((string) pathinfo((string) $row['file_path'], PATHINFO_EXTENSION));
+            }
+
+            $isSvg = 'svg' === $extension;
 
             if ($organizationId <= 0 || '' === $logoUuid) {
                 continue;
             }
 
-            $map[$organizationId] = $logoUuid;
+            $map[$organizationId] = [
+                'uuid' => $logoUuid,
+                'isSvg' => $isSvg,
+            ];
         }
 
         return $map;