Add conditional reset button for event filters

contao/templates/frontend/event_filter.html.twig

@@ -1,16 +1,19 @@
 <div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
-    <div class="tag-buttons">
-        <button type="button" data-filter-tag="all" class="active" aria-pressed="true">Alle</button>
-
+    <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>
                 {% for tag in tagButtons|default([]) %}
-            <button type="button" data-filter-tag="{{ tag.id }}" aria-pressed="false">{{ tag.title }} ({{ tag.count }})</button>
+                    <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
+            </select>
         </div>
 
         <div class="widget-select places">
-        <label for="location-filter" class="visually-hidden">Orte:</label>
+            <label for="location-filter" class="visually-hidden">Ort wählen</label>
             <select id="location-filter">
-            <option value="all">Orte</option>
+                <option value="all" data-placeholder="true">Ort wählen</option>
                 {% for location in locations|default([]) %}
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
@@ -18,14 +21,17 @@
         </div>
 
         <div class="widget-select org">
-        <label for="org-filter" class="visually-hidden">Veranstalter:</label>
+            <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
             <select id="org-filter">
-            <option value="all">Veranstalter</option>
+                <option value="all" data-placeholder="true">Veranstalter wählen</option>
                 {% for organization in organizations|default([]) %}
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
             </select>
         </div>
+    </div>
+
+    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
 
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
@@ -62,19 +68,24 @@
         pointer-events: none;
     }
 
-    #eventfilters .active,
-    #eventfilters select.active {
+    #eventfilters .widget-select.active .ss-main {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 
-    #eventfilters button:focus-visible,
-    #eventfilters select:focus-visible {
+    #eventfilters .ss-main:focus-visible {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
+
+    #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>
+
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -92,14 +103,61 @@
     list?.classList.add('event-filter-target-list');
 
     const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
-    const tagButtons = Array.from(filters.querySelectorAll('button[data-filter-tag]'));
+    const tagSelect = filters.querySelector('#tag-filter');
     const locationSelect = filters.querySelector('#location-filter');
     const orgSelect = filters.querySelector('#org-filter');
+    const tagWidget = tagSelect?.closest('.widget-select');
+    const locationWidget = locationSelect?.closest('.widget-select');
+    const orgWidget = orgSelect?.closest('.widget-select');
+    const resetButton = filters.querySelector('#eventfilter-reset');
     const status = filters.querySelector('#eventfilter-status');
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
-    let currentFilter = { type: 'tag', value: 'all' };
+    let currentFilter = { type: 'all', value: 'all' };
+    let suppressedChangeEvents = 0;
+
+    const initSlimSelect = (selectElement) => {
+        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+            return null;
+        }
+
+        return new window.SlimSelect({
+            select: selectElement,
+            settings: {
+                showSearch: false,
+                allowDeselect: false,
+            },
+        });
+    };
+
+    const tagSlim = initSlimSelect(tagSelect);
+    const locationSlim = initSlimSelect(locationSelect);
+    const orgSlim = initSlimSelect(orgSelect);
+
+    const setSelectValue = (selectElement, slimInstance, value) => {
+        if (!selectElement) {
+            return;
+        }
+
+        if (selectElement.value === value) {
+            return;
+        }
+
+        suppressedChangeEvents += 1;
+
+        try {
+            if (slimInstance) {
+                slimInstance.setSelected(value);
+            } else {
+                selectElement.value = value;
+            }
+        } finally {
+            queueMicrotask(() => {
+                suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
+            });
+        }
+    };
 
     const clearHideTimer = (eventItem) => {
         const timer = hideTimers.get(eventItem);
@@ -132,18 +190,16 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        tagButtons.forEach((button) => {
-            const isActive = type === 'tag' && button.dataset.filterTag === value;
-            button.classList.toggle('active', isActive);
-            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-        });
+        const hasActiveTag = type === 'tag' && value !== 'all';
+        const hasActiveLocation = type === 'location' && value !== 'all';
+        const hasActiveOrg = type === 'org' && value !== 'all';
 
-        if (locationSelect) {
-            locationSelect.classList.toggle('active', type === 'location');
-        }
+        tagWidget?.classList.toggle('active', hasActiveTag);
+        locationWidget?.classList.toggle('active', hasActiveLocation);
+        orgWidget?.classList.toggle('active', hasActiveOrg);
 
-        if (orgSelect) {
-            orgSelect.classList.toggle('active', type === 'org');
+        if (resetButton) {
+            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
         }
     };
 
@@ -169,6 +225,10 @@
             return parseIdList(eventItem.dataset.org).includes(filterState.value);
         }
 
+        if (filterState.type === 'all') {
+            return true;
+        }
+
         return true;
     };
 
@@ -180,9 +240,9 @@
         const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
         let filterText = 'alle';
 
-        if (filterState.type === 'tag' && filterState.value !== 'all') {
-            const activeButton = tagButtons.find((button) => button.dataset.filterTag === filterState.value);
-            filterText = activeButton ? activeButton.textContent.trim() : `Tag ${filterState.value}`;
+        if (filterState.type === 'tag' && tagSelect) {
+            const option = tagSelect.options[tagSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Kategorie wählen';
         }
 
         if (filterState.type === 'location' && locationSelect) {
@@ -213,47 +273,64 @@
         updateStatus(filterState);
     };
 
-    tagButtons.forEach((button) => {
-        button.addEventListener('click', () => {
-            if (locationSelect) {
-                locationSelect.value = 'all';
+    tagSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
         }
 
-            if (orgSelect) {
-                orgSelect.value = 'all';
-            }
+        const selectedValue = tagSelect.value;
 
-            applyFilter({ type: 'tag', value: button.dataset.filterTag ?? 'all' });
-        });
-    });
-
-    locationSelect?.addEventListener('change', () => {
-        const selectedValue = locationSelect.value;
-
-        if (orgSelect) {
-            orgSelect.value = 'all';
-        }
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
 
         applyFilter(
             selectedValue === 'all'
-                ? { type: 'tag', value: 'all' }
+                ? { type: 'all', value: 'all' }
+                : { type: 'tag', value: selectedValue.replace('tag-', '') },
+        );
+    });
+
+    locationSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = locationSelect.value;
+
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', value: 'all' }
                 : { type: 'location', value: selectedValue.replace('location-', '') },
         );
     });
 
     orgSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
         const selectedValue = orgSelect.value;
 
-        if (locationSelect) {
-            locationSelect.value = 'all';
-        }
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
 
         applyFilter(
             selectedValue === 'all'
-                ? { type: 'tag', value: 'all' }
+                ? { type: 'all', value: 'all' }
                 : { type: 'org', value: selectedValue.replace('org-', '') },
         );
     });
 
+    resetButton?.addEventListener('click', () => {
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter({ type: 'all', value: 'all' });
+    });
+
     applyFilter(currentFilter);
 </script>