Prevent recursive select change loops in event filter

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,14 +1,19 @@
-<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="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 }}">{{ 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">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 %}
@@ -16,12 +21,296 @@
         </div>
 
         <div class="widget-select org">
-        <label for="org-filter">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>
+
+    <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 .widget-select.active .ss-main {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    #eventfilters .ss-main:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+</style>
+
+<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+
+<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 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 status = filters.querySelector('#eventfilter-status');
+
+    const animationMs = 220;
+    let hideTimers = new WeakMap();
+    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);
+
+        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 }) => {
+        const hasActiveTag = type === 'tag' && value !== 'all';
+        const hasActiveLocation = type === 'location' && value !== 'all';
+        const hasActiveOrg = type === 'org' && value !== 'all';
+
+        tagWidget?.classList.toggle('active', hasActiveTag);
+        locationWidget?.classList.toggle('active', hasActiveLocation);
+        orgWidget?.classList.toggle('active', hasActiveOrg);
+    };
+
+    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);
+        }
+
+        if (filterState.type === 'all') {
+            return true;
+        }
+
+        return true;
+    };
+
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        let filterText = 'alle';
+
+        if (filterState.type === 'tag' && tagSelect) {
+            const option = tagSelect.options[tagSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Kategorie wählen';
+        }
+
+        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);
+    };
+
+    tagSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = tagSelect.value;
+
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter(
+            selectedValue === '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;
+
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', 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();
     }
@@ -87,12 +89,12 @@ class EventFilterController extends AbstractFrontendModuleController
 
         $rows = $this->connection->executeQuery(
             <<<'SQL'
-                SELECT t.id, t.tag, COUNT(DISTINCT r.item_id) AS total
+                                SELECT t.id, t.tag, COUNT(DISTINCT r.pid) AS total
                 FROM tl_tags_rel r
                 INNER JOIN tl_tags t ON t.id=r.tag_id
                 WHERE r.ptable='tl_calendar_events'
                   AND r.field='tags'
-                  AND r.item_id IN (?)
+                                    AND r.pid IN (?)
                 GROUP BY t.id, t.tag
                 ORDER BY t.tag ASC
             SQL,
@@ -128,9 +130,9 @@ class EventFilterController extends AbstractFrontendModuleController
             <<<'SQL'
                 SELECT l.id, l.title, COUNT(e.id) AS total
                 FROM tl_calendar_events e
-                INNER JOIN tl_location l ON l.id=e.location
+                                INNER JOIN tl_location l ON l.id=e.location_id
                 WHERE e.id IN (?)
-                  AND e.location>0
+                                    AND e.location_id>0
                 GROUP BY l.id, l.title
                 ORDER BY l.title ASC
             SQL,