Switch event filter selects back to native controls

contao/templates/frontend/event_filter.html.twig

@@ -2,8 +2,8 @@
     <div class="select-filters">
         <div class="widget-select category">
             <label for="tag-filter" class="visually-hidden">Kategorie wählen</label>
-            <select id="tag-filter">
-                <option value="all" data-placeholder="true">Kategorie wählen</option>
+            <select id="tag-filter" placeholder="Kategorie wählen" autocomplete="off">
+                <option value="">Kategorie wählen</option>
                 {% for tag in tagButtons|default([]) %}
                     <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
@@ -12,8 +12,8 @@
 
         <div class="widget-select places">
             <label for="location-filter" class="visually-hidden">Ort wählen</label>
-            <select id="location-filter">
-                <option value="all" data-placeholder="true">Ort wählen</option>
+            <select id="location-filter" placeholder="Ort wählen" autocomplete="off">
+                <option value="">Ort wählen</option>
                 {% for location in locations|default([]) %}
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
@@ -22,8 +22,8 @@
 
         <div class="widget-select org">
             <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
-            <select id="org-filter">
-                <option value="all" data-placeholder="true">Veranstalter wählen</option>
+            <select id="org-filter" placeholder="Veranstalter wählen" autocomplete="off">
+                <option value="">Veranstalter wählen</option>
                 {% for organization in organizations|default([]) %}
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
@@ -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>
@@ -68,23 +68,21 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ss-main {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+    #eventfilters .widget-select.active select {
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
-    #eventfilters .ss-main:focus-visible {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+    #eventfilters select:focus-visible {
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
     #eventfilters .eventfilter-reset[hidden] {
         display: none;
     }
-</style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
-<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+</style>
 
 <script type="module">
     const filters = document.getElementById('eventfilters');
@@ -111,31 +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: 'all' };
+    let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
-    const initSlimSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
-            return null;
+    const hasOptionValue = (selectElement, value) => {
+        if (!selectElement) {
+            return false;
         }
 
-        return new window.SlimSelect({
-            select: selectElement,
-            settings: {
-                showSearch: false,
-                allowDeselect: false,
-            },
-        });
+        return Array.from(selectElement.options).some((option) => option.value === value);
     };
 
-    const tagSlim = initSlimSelect(tagSelect);
-    const locationSlim = initSlimSelect(locationSelect);
-    const orgSlim = initSlimSelect(orgSelect);
+    const rawValueToFilterState = (rawValue) => {
+        const value = (rawValue || '').trim();
 
-    const setSelectValue = (selectElement, slimInstance, 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;
         }
@@ -147,11 +232,7 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
-                slimInstance.setSelected(value);
-            } else {
-                selectElement.value = value;
-            }
+            selectElement.value = value;
         } finally {
             queueMicrotask(() => {
                 suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
@@ -190,9 +271,9 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        const hasActiveTag = type === 'tag' && value !== 'all';
-        const hasActiveLocation = type === 'location' && value !== 'all';
-        const hasActiveOrg = type === 'org' && value !== 'all';
+        const hasActiveTag = type === 'tag' && Boolean(value);
+        const hasActiveLocation = type === 'location' && Boolean(value);
+        const hasActiveOrg = type === 'org' && Boolean(value);
 
         tagWidget?.classList.toggle('active', hasActiveTag);
         locationWidget?.classList.toggle('active', hasActiveLocation);
@@ -209,7 +290,7 @@
         .filter(Boolean);
 
     const matches = (eventItem, filterState) => {
-        if (filterState.value === 'all') {
+        if (!filterState.value || filterState.type === 'all') {
             return true;
         }
 
@@ -225,10 +306,6 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
-        if (filterState.type === 'all') {
-            return true;
-        }
-
         return true;
     };
 
@@ -271,6 +348,7 @@
         });
 
         updateStatus(filterState);
+        syncState(filterState);
     };
 
     tagSelect?.addEventListener('change', () => {
@@ -280,12 +358,12 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'tag', value: selectedValue.replace('tag-', '') },
         );
     });
@@ -297,12 +375,12 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
@@ -314,23 +392,34 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
 
         applyFilter(
-            selectedValue === 'all'
-                ? { type: 'all', value: 'all' }
+            !selectedValue
+                ? { type: 'all', value: '' }
                 : { type: 'org', value: selectedValue.replace('org-', '') },
         );
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagSlim, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
 
-        applyFilter({ type: 'all', value: 'all' });
+        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,18 +53,12 @@ class OrganizationListingTemplateDataListener
 
         $organizationIds = array_values(array_unique(array_values($rowToOrganizationIdMap)));
         $organizationTagMap = $this->fetchOrganizationTagMap($organizationIds);
-        $organizationLogoUuidMap = $this->fetchOrganizationLogoUuidMap($organizationIds);
+        $organizationLogoMap = $this->fetchOrganizationLogoMap($organizationIds);
 
-        $organizationTagIdsMap = [];
         $organizationTagLabelMap = [];
-        $rowTagIdsMap = [];
         $rowTagIdsList = [];
 
-        foreach ($organizationTagMap as $organizationId => $tagData) {
-            if ([] !== ($tagData['ids'] ?? [])) {
-                $organizationTagIdsMap[(string) $organizationId] = implode(',', $tagData['ids']);
-            }
-
+        foreach ($organizationTagMap as $tagData) {
             foreach (($tagData['ids'] ?? []) as $index => $tagId) {
                 $label = trim((string) (($tagData['labels'][$index] ?? '') ?: ''));
 
@@ -79,28 +73,20 @@ class OrganizationListingTemplateDataListener
                 continue;
             }
 
-            $tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => [], 'slugs' => []];
-            $logoUuid = $organizationLogoUuidMap[$organizationId] ?? '';
+            $tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => []];
+            $logoData = $organizationLogoMap[$organizationId] ?? ['uuid' => '', 'isSvg' => false];
+            $logoUuid = (string) ($logoData['uuid'] ?? '');
+            $logoIsSvg = (bool) ($logoData['isSvg'] ?? false);
             $tagIdsCsv = implode(',', $tagData['ids']);
             $tagLabelsCsv = implode(', ', $tagData['labels']);
-            $tagSlugsCsv = implode(',', $tagData['slugs']);
 
             $tbody[$rowIndex]['tag_ids']['content'] = $tagIdsCsv;
             $tbody[$rowIndex]['tag_labels']['content'] = $tagLabelsCsv;
-            $tbody[$rowIndex]['tag_slugs']['content'] = $tagSlugsCsv;
             $tbody[$rowIndex]['tags']['content'] = $tagLabelsCsv;
 
-            $tbody[$rowIndex]['tag_ids'] = $tagIdsCsv;
-            $tbody[$rowIndex]['tag_labels'] = $tagLabelsCsv;
-            $tbody[$rowIndex]['tag_slugs'] = $tagSlugsCsv;
-            $tbody[$rowIndex]['tags'] = $tagLabelsCsv;
-
-            if ('' !== $tagIdsCsv) {
-                $rowTagIdsMap[(string) $rowIndex] = $tagIdsCsv;
-            }
-
             if ('' !== $logoUuid) {
                 $tbody[$rowIndex]['logo_uuid']['content'] = $logoUuid;
+                $tbody[$rowIndex]['logo_is_svg']['content'] = $logoIsSvg ? '1' : '';
             }
         }
 
@@ -119,7 +105,7 @@ class OrganizationListingTemplateDataListener
         if (null !== $this->logger) {
             $rowsWithoutTagIds = 0;
 
-            foreach ($rowToOrganizationIdMap as $rowIndex => $organizationId) {
+            foreach ($rowToOrganizationIdMap as $organizationId) {
                 if (!isset($organizationTagMap[$organizationId]) || [] === ($organizationTagMap[$organizationId]['ids'] ?? [])) {
                     ++$rowsWithoutTagIds;
                 }
@@ -135,9 +121,7 @@ class OrganizationListingTemplateDataListener
             }
         }
 
-        $template->organization_tag_ids_map = $organizationTagIdsMap;
         $template->organization_tag_label_map = $organizationTagLabelMap;
-        $template->organization_row_tag_ids_map = $rowTagIdsMap;
         $template->organization_row_tag_ids_list = $rowTagIdsList;
 
         $template->tbody = $tbody;
@@ -229,7 +213,7 @@ class OrganizationListingTemplateDataListener
     }
 
     /** @param list<int> $organizationIds
-     *  @return array<int, array{ids: list<string>, labels: list<string>, slugs: list<string>}>
+     *  @return array<int, array{ids: list<string>, labels: list<string>}>
      */
     private function fetchOrganizationTagMap(array $organizationIds): array
     {
@@ -237,46 +221,25 @@ class OrganizationListingTemplateDataListener
             return [];
         }
 
-        $scope = $this->resolveTagRelationScope($organizationIds);
-
-        $conditions = ['r.pid IN (?)'];
-        $params = [$organizationIds];
-        $types = [ArrayParameterType::INTEGER];
-
-        if ('' === $scope['ptable']) {
-            $conditions[] = "(r.ptable = '' OR r.ptable IS NULL)";
-        } else {
-            $conditions[] = 'r.ptable = ?';
-            $params[] = $scope['ptable'];
-            $types[] = ParameterType::STRING;
-        }
-
-        if ('' === $scope['field']) {
-            $conditions[] = "(r.field = '' OR r.field IS NULL)";
-        } else {
-            $conditions[] = 'r.field = ?';
-            $params[] = $scope['field'];
-            $types[] = ParameterType::STRING;
-        }
-
         $rows = $this->connection->executeQuery(
-            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label FROM tl_tags_rel r INNER JOIN tl_tags t ON t.id = r.tag_id WHERE '.implode(' AND ', $conditions).' ORDER BY r.pid ASC, r.tag_id ASC',
-            $params,
-            $types,
+            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+             FROM tl_tags_rel r
+             INNER JOIN tl_tags t ON t.id = r.tag_id
+             WHERE r.ptable = ? AND r.field = ? AND r.pid IN (?)
+             ORDER BY r.pid ASC, r.tag_id ASC',
+            ['tl_organization', 'tags', $organizationIds],
+            [ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
         )->fetchAllAssociative();
 
-        if ([] === $rows && '' !== $scope['field']) {
-            $fieldFreeConditions = array_values(array_filter($conditions, static fn (string $condition): bool => 'r.field = ?' !== $condition));
-            $fieldFreeParams = $params;
-            $fieldFreeTypes = $types;
-
-            array_pop($fieldFreeParams);
-            array_pop($fieldFreeTypes);
-
+        if ([] === $rows) {
             $rows = $this->connection->executeQuery(
-                'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label FROM tl_tags_rel r INNER JOIN tl_tags t ON t.id = r.tag_id WHERE '.implode(' AND ', $fieldFreeConditions).' ORDER BY r.pid ASC, r.tag_id ASC',
-                $fieldFreeParams,
-                $fieldFreeTypes,
+                'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+                 FROM tl_tags_rel r
+                 INNER JOIN tl_tags t ON t.id = r.tag_id
+                 WHERE r.ptable = ? AND r.pid IN (?)
+                 ORDER BY r.pid ASC, r.tag_id ASC',
+                ['tl_organization', $organizationIds],
+                [ParameterType::STRING, ArrayParameterType::INTEGER],
             )->fetchAllAssociative();
         }
 
@@ -295,73 +258,30 @@ class OrganizationListingTemplateDataListener
             $seen[$organizationId][$tagId] = true;
             $map[$organizationId]['ids'][] = (string) $tagId;
             $map[$organizationId]['labels'][] = $label;
-
-            $slug = $this->slugify($label);
-
-            if ('' !== $slug) {
-                $map[$organizationId]['slugs'][] = $slug;
-            }
         }
 
         foreach ($map as $organizationId => $tagData) {
             $map[$organizationId]['ids'] = array_values(array_unique($tagData['ids'] ?? []));
             $map[$organizationId]['labels'] = array_values(array_unique($tagData['labels'] ?? []));
-            $map[$organizationId]['slugs'] = array_values(array_unique($tagData['slugs'] ?? []));
         }
 
         return $map;
     }
 
     /** @param list<int> $organizationIds
-     *  @return array{ptable: string, field: string}
+     *  @return array<int, array{uuid: string, isSvg: bool}>
      */
-    private function resolveTagRelationScope(array $organizationIds): array
-    {
-        $rows = $this->connection->executeQuery(
-            "SELECT COALESCE(NULLIF(TRIM(r.ptable), ''), '') AS ptable_scope, COALESCE(NULLIF(TRIM(r.field), ''), '') AS field_scope, COUNT(DISTINCT r.pid) AS pid_count, COUNT(*) AS rel_count FROM tl_tags_rel r WHERE r.pid IN (?) GROUP BY COALESCE(NULLIF(TRIM(r.ptable), ''), ''), COALESCE(NULLIF(TRIM(r.field), ''), '') ORDER BY pid_count DESC, rel_count DESC",
-            [$organizationIds],
-            [ArrayParameterType::INTEGER],
-        )->fetchAllAssociative();
-
-        if ([] === $rows) {
-            return ['ptable' => 'tl_organization', 'field' => 'tags'];
-        }
-
-        foreach ($rows as $row) {
-            if ('tl_organization' === (string) ($row['ptable_scope'] ?? '') && 'tags' === (string) ($row['field_scope'] ?? '')) {
-                return ['ptable' => 'tl_organization', 'field' => 'tags'];
-            }
-        }
-
-        foreach ($rows as $row) {
-            if ('tl_organization' === (string) ($row['ptable_scope'] ?? '')) {
-                return ['ptable' => 'tl_organization', 'field' => (string) ($row['field_scope'] ?? '')];
-            }
-        }
-
-        foreach ($rows as $row) {
-            if ('tags' === (string) ($row['field_scope'] ?? '')) {
-                return ['ptable' => (string) ($row['ptable_scope'] ?? ''), 'field' => 'tags'];
-            }
-        }
-
-        return [
-            'ptable' => (string) ($rows[0]['ptable_scope'] ?? 'tl_organization'),
-            'field' => (string) ($rows[0]['field_scope'] ?? 'tags'),
-        ];
-    }
-
-    /** @param list<int> $organizationIds
-     *  @return array<int, string>
-     */
-    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();
@@ -371,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;
@@ -409,24 +339,4 @@ class OrganizationListingTemplateDataListener
         return '';
     }
 
-    private function slugify(string $value): string
-    {
-        $value = trim(mb_strtolower($value));
-
-        if ('' === $value) {
-            return '';
-        }
-
-        $value = strtr($value, [
-            'ä' => 'ae',
-            'ö' => 'oe',
-            'ü' => 'ue',
-            'ß' => 'ss',
-        ]);
-
-        $value = preg_replace('/[^a-z0-9]+/u', '-', $value) ?? '';
-        $value = trim($value, '-');
-
-        return $value;
-    }
 }