Wrap select filters in dedicated container

contao/dca/tl_module.php

@@ -7,7 +7,7 @@ use Contao\StringUtil;
 
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
-$GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 
@@ -120,3 +120,40 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventTypeTags'] = [
         },
     ],
 ];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['eventListDomId'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options_callback' => static function (): array {
+        $rows = Database::getInstance()
+            ->prepare('SELECT id, name, cssID FROM tl_module WHERE type=? ORDER BY name ASC, id ASC')
+            ->execute('eventlist')
+            ->fetchAllAssoc();
+
+        $options = [];
+
+        foreach ($rows as $row) {
+            $moduleId = (int) ($row['id'] ?? 0);
+
+            if ($moduleId <= 0) {
+                continue;
+            }
+
+            $cssId = StringUtil::deserialize($row['cssID'] ?? null, true);
+            $domId = trim((string) ($cssId[0] ?? ''));
+            $domId = '' !== $domId ? $domId : sprintf('mod_eventlist_%d', $moduleId);
+            $moduleName = trim((string) ($row['name'] ?? ''));
+
+            if ('' === $moduleName) {
+                $moduleName = sprintf('Eventliste %d', $moduleId);
+            }
+
+            $options[$domId] = sprintf('%s [%s]', $moduleName, $domId);
+        }
+
+        return $options;
+    },
+    'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
+];

contao/languages/de/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event-Ordner', 'Bitte wähle
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Seite mit Nutzungsbedingungen', 'Optional: Seite mit den Nutzungsbedingungen, die im Frontend beim Zustimmungs-Label verlinkt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend Benutzer ID', 'ID des Backend-Benutzers, der als Autor für frontendseitig angelegte Events gesetzt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['ID des Newsarchivs', 'Archiv-ID (pid), in das frontendseitig angelegte Events gespeichert werden.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'Wählen Sie die ID der Eventliste, die durch das Event-Filter-Modul gefiltert werden soll.'];
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];

contao/languages/en/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event folder', 'Please selec
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Terms page', 'Optional: page containing the terms of use linked from the frontend consent label.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend user ID', 'Backend user ID that should be set as author for events created from the frontend.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['News archive ID', 'Archive ID (pid) where events created from the frontend should be stored.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Select the event list ID that should be filtered by the event filter module.'];
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];

contao/templates/frontend/event_filter.html.twig

@@ -1,12 +1,15 @@
-<div id="eventfilters">
+<div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
-    <button type="button" data-filter-tag="all">Alle</button>
+    <div class="tag-buttons">
+        <button type="button" data-filter-tag="all" class="active" aria-pressed="true">Alle</button>
 
         {% for tag in tagButtons|default([]) %}
-        <button type="button" data-filter-tag="{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</button>
+            <button type="button" data-filter-tag="{{ tag.id }}" aria-pressed="false">{{ tag.title }} ({{ tag.count }})</button>
         {% endfor %}
+    </div>
 
+    <div class="select-filters">
         <div class="widget-select places">
-        <label for="location-filter">Orte:</label>
+            <label for="location-filter" class="visually-hidden">Orte:</label>
             <select id="location-filter">
                 <option value="all">Orte</option>
                 {% for location in locations|default([]) %}
@@ -16,7 +19,7 @@
         </div>
 
         <div class="widget-select org">
-        <label for="org-filter">Veranstalter:</label>
+            <label for="org-filter" class="visually-hidden">Veranstalter:</label>
             <select id="org-filter">
                 <option value="all">Veranstalter</option>
                 {% for organization in organizations|default([]) %}
@@ -25,3 +28,234 @@
             </select>
         </div>
     </div>
+
+    <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
+</div>
+
+<style>
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .event-filter-target-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1rem;
+    }
+
+    .event-filter-target-list .event {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 220ms ease, transform 220ms ease;
+        will-change: opacity, transform;
+    }
+
+    .event-filter-target-list .event.is-filtered-out {
+        opacity: 0;
+        transform: translateY(6px);
+        pointer-events: none;
+    }
+
+    #eventfilters .active,
+    #eventfilters select.active {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    #eventfilters button:focus-visible,
+    #eventfilters select:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+</style>
+
+<script type="module">
+    const filters = document.getElementById('eventfilters');
+
+    if (!filters) {
+        throw new Error('Event filter requires #eventfilters.');
+    }
+
+    const targetEventListId = filters.dataset.eventlistId || 'eventlist';
+    const list = document.getElementById(targetEventListId);
+
+    if (!list) {
+        console.warn(`[event_filter] Target event list #${targetEventListId} was not found.`);
+    }
+
+    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 locationSelect = filters.querySelector('#location-filter');
+    const orgSelect = filters.querySelector('#org-filter');
+    const status = filters.querySelector('#eventfilter-status');
+
+    const animationMs = 220;
+    let hideTimers = new WeakMap();
+    let currentFilter = { type: 'tag', value: 'all' };
+
+    const clearHideTimer = (eventItem) => {
+        const timer = hideTimers.get(eventItem);
+
+        if (timer) {
+            window.clearTimeout(timer);
+            hideTimers.delete(eventItem);
+        }
+    };
+
+    const showEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.hidden = false;
+
+        requestAnimationFrame(() => {
+            eventItem.classList.remove('is-filtered-out');
+        });
+    };
+
+    const hideEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.classList.add('is-filtered-out');
+
+        const timer = window.setTimeout(() => {
+            eventItem.hidden = true;
+            hideTimers.delete(eventItem);
+        }, animationMs);
+
+        hideTimers.set(eventItem, timer);
+    };
+
+    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');
+        });
+
+        if (locationSelect) {
+            locationSelect.classList.toggle('active', type === 'location');
+        }
+
+        if (orgSelect) {
+            orgSelect.classList.toggle('active', type === 'org');
+        }
+    };
+
+    const parseIdList = (rawValue) => (rawValue ?? '')
+        .split(',')
+        .map((value) => value.trim())
+        .filter(Boolean);
+
+    const matches = (eventItem, filterState) => {
+        if (filterState.value === 'all') {
+            return true;
+        }
+
+        if (filterState.type === 'tag') {
+            return parseIdList(eventItem.dataset.tags).includes(filterState.value);
+        }
+
+        if (filterState.type === 'location') {
+            return eventItem.dataset.location === filterState.value;
+        }
+
+        if (filterState.type === 'org') {
+            return parseIdList(eventItem.dataset.org).includes(filterState.value);
+        }
+
+        return true;
+    };
+
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        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 === 'location' && locationSelect) {
+            const option = locationSelect.options[locationSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Ort';
+        }
+
+        if (filterState.type === 'org' && orgSelect) {
+            const option = orgSelect.options[orgSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Veranstalter';
+        }
+
+        status.textContent = `${visibleCount} Veranstaltungen angezeigt, Filter: ${filterText}.`;
+    };
+
+    const applyFilter = (filterState) => {
+        currentFilter = filterState;
+        setActiveControl(filterState);
+
+        events.forEach((eventItem) => {
+            if (matches(eventItem, filterState)) {
+                showEvent(eventItem);
+            } else {
+                hideEvent(eventItem);
+            }
+        });
+
+        updateStatus(filterState);
+    };
+
+    tagButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            if (locationSelect) {
+                locationSelect.value = 'all';
+            }
+
+            if (orgSelect) {
+                orgSelect.value = 'all';
+            }
+
+            applyFilter({ type: 'tag', value: button.dataset.filterTag ?? 'all' });
+        });
+    });
+
+    locationSelect?.addEventListener('change', () => {
+        const selectedValue = locationSelect.value;
+
+        if (orgSelect) {
+            orgSelect.value = 'all';
+        }
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'tag', value: 'all' }
+                : { type: 'location', value: selectedValue.replace('location-', '') },
+        );
+    });
+
+    orgSelect?.addEventListener('change', () => {
+        const selectedValue = orgSelect.value;
+
+        if (locationSelect) {
+            locationSelect.value = 'all';
+        }
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'tag', value: 'all' }
+                : { type: 'org', value: selectedValue.replace('org-', '') },
+        );
+    });
+
+    applyFilter(currentFilter);
+</script>

src/Controller/Frontend/EventFilterController.php

@@ -27,10 +27,12 @@ class EventFilterController extends AbstractFrontendModuleController
     {
         $calendarIds = array_map('intval', StringUtil::deserialize($model->cal_calendar, true));
         $eventIds = $this->findUpcomingEventIds($calendarIds);
+        $targetEventListId = trim((string) ($model->eventListDomId ?? ''));
 
         $template->set('tagButtons', $this->findTagButtons($eventIds));
         $template->set('locations', $this->findLocations($eventIds));
         $template->set('organizations', $this->findOrganizations($eventIds));
+        $template->set('targetEventListId', '' !== $targetEventListId ? $targetEventListId : 'eventlist');
 
         return $template->getResponse();
     }