Switch event filter selects back to native controls

contao/templates/frontend/event_filter.html.twig

@@ -68,12 +68,12 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ts-control {
+    #eventfilters .widget-select.active select {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
 
-    #eventfilters .ts-control:focus-within {
+    #eventfilters select:focus-visible {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
@@ -82,23 +82,8 @@
         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">
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
-
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -124,39 +109,118 @@
     const orgWidget = orgSelect?.closest('.widget-select');
     const resetButton = filters.querySelector('#eventfilter-reset');
     const status = filters.querySelector('#eventfilter-status');
+    const stateStorageKey = 'event-filter-state';
+    const stateQueryKey = 'event_filter';
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
-    const initTomSelect = (selectElement) => {
+    const hasOptionValue = (selectElement, value) => {
-        if (!selectElement || 'undefined' === typeof window.TomSelect) {
+        if (!selectElement) {
-            return null;
+            return false;
         }
 
-        return new window.TomSelect(selectElement, {
+        return Array.from(selectElement.options).some((option) => option.value === value);
-            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>';
-                },
-            },
-        });
     };
 
-    const tagTom = initTomSelect(tagSelect);
+    const rawValueToFilterState = (rawValue) => {
-    const locationTom = initTomSelect(locationSelect);
+        const value = (rawValue || '').trim();
-    const orgTom = initTomSelect(orgSelect);
 
-    const setSelectValue = (selectElement, tomInstance, value) => {
+        if (!value) {
+            return { type: 'all', value: '' };
+        }
+
+        if (value.startsWith('tag-') && hasOptionValue(tagSelect, value)) {
+            return { type: 'tag', value: value.replace('tag-', '') };
+        }
+
+        if (value.startsWith('location-') && hasOptionValue(locationSelect, value)) {
+            return { type: 'location', value: value.replace('location-', '') };
+        }
+
+        if (value.startsWith('org-') && hasOptionValue(orgSelect, value)) {
+            return { type: 'org', value: value.replace('org-', '') };
+        }
+
+        return { type: 'all', value: '' };
+    };
+
+    const filterStateToRawValue = (filterState) => {
+        if (!filterState.value || filterState.type === 'all') {
+            return '';
+        }
+
+        if (filterState.type === 'tag') {
+            return `tag-${filterState.value}`;
+        }
+
+        if (filterState.type === 'location') {
+            return `location-${filterState.value}`;
+        }
+
+        if (filterState.type === 'org') {
+            return `org-${filterState.value}`;
+        }
+
+        return '';
+    };
+
+    const readUrlState = () => {
+        const url = new URL(window.location.href);
+        return (url.searchParams.get(stateQueryKey) || '').trim();
+    };
+
+    const writeUrlState = (value) => {
+        const url = new URL(window.location.href);
+
+        if (value) {
+            url.searchParams.set(stateQueryKey, value);
+        } else {
+            url.searchParams.delete(stateQueryKey);
+        }
+
+        window.history.replaceState(window.history.state, '', url);
+    };
+
+    const readStoredState = () => {
+        try {
+            return (window.sessionStorage.getItem(stateStorageKey) || '').trim();
+        } catch (error) {
+            return '';
+        }
+    };
+
+    const writeStoredState = (value) => {
+        try {
+            if (value) {
+                window.sessionStorage.setItem(stateStorageKey, value);
+            } else {
+                window.sessionStorage.removeItem(stateStorageKey);
+            }
+        } catch (error) {
+            // noop
+        }
+    };
+
+    const syncState = (filterState) => {
+        const rawValue = filterStateToRawValue(filterState);
+        writeStoredState(rawValue);
+        writeUrlState(rawValue);
+    };
+
+    const applyControlState = (filterState) => {
+        const tagValue = filterState.type === 'tag' ? `tag-${filterState.value}` : '';
+        const locationValue = filterState.type === 'location' ? `location-${filterState.value}` : '';
+        const orgValue = filterState.type === 'org' ? `org-${filterState.value}` : '';
+
+        setSelectValue(tagSelect, tagValue);
+        setSelectValue(locationSelect, locationValue);
+        setSelectValue(orgSelect, orgValue);
+    };
+
+    const setSelectValue = (selectElement, value) => {
         if (!selectElement) {
             return;
         }
@@ -168,11 +232,7 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (tomInstance) {
+            selectElement.value = value;
-                tomInstance.setValue(value, true);
-            } else {
-                selectElement.value = value;
-            }
         } finally {
             queueMicrotask(() => {
                 suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
@@ -288,6 +348,7 @@
         });
 
         updateStatus(filterState);
+        syncState(filterState);
     };
 
     tagSelect?.addEventListener('change', () => {
@@ -297,8 +358,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(locationSelect, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
             !selectedValue
@@ -314,8 +375,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(tagSelect, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
             !selectedValue
@@ -331,8 +392,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(tagSelect, '');
-        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(locationSelect, '');
 
         applyFilter(
             !selectedValue
@@ -342,12 +403,23 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagTom, '');
+        setSelectValue(tagSelect, '');
-        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(locationSelect, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter({ type: 'all', value: '' });
     });
 
-    applyFilter(currentFilter);
+    const urlState = readUrlState();
+    const storedState = readStoredState();
+    const initialState = rawValueToFilterState(urlState || storedState);
+
+    applyControlState(initialState);
+    applyFilter(initialState);
+
+    window.addEventListener('popstate', () => {
+        const stateFromUrl = rawValueToFilterState(readUrlState());
+        applyControlState(stateFromUrl);
+        applyFilter(stateFromUrl);
+    });
 </script>

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;