Add list_default_organisationen template: UUID-based logos, improved tag filter

contao/templates/frontend/event_filter.html.twig

@@ -1,14 +1,19 @@
 <div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
-    <button type="button" data-filter-tag="all" class="active">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,9 +21,9 @@
         </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 %}
@@ -26,7 +31,24 @@
         </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>
+
 <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));
@@ -46,13 +68,24 @@
         pointer-events: none;
     }
 
-    #eventfilters .active,
+    #eventfilters .widget-select.active .ss-main {
-    #eventfilters select.active {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
+
+    #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');
 
@@ -70,13 +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);
@@ -109,16 +190,16 @@
     };
 
     const setActiveControl = ({ type, value }) => {
-        tagButtons.forEach((button) => {
+        const hasActiveTag = type === 'tag' && value !== 'all';
-            button.classList.toggle('active', type === 'tag' && button.dataset.filterTag === value);
+        const hasActiveLocation = type === 'location' && value !== 'all';
-        });
+        const hasActiveOrg = type === 'org' && value !== 'all';
 
-        if (locationSelect) {
+        tagWidget?.classList.toggle('active', hasActiveTag);
-            locationSelect.classList.toggle('active', type === 'location');
+        locationWidget?.classList.toggle('active', hasActiveLocation);
-        }
+        orgWidget?.classList.toggle('active', hasActiveOrg);
 
-        if (orgSelect) {
+        if (resetButton) {
-            orgSelect.classList.toggle('active', type === 'org');
+            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
         }
     };
 
@@ -144,7 +225,37 @@
             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) => {
@@ -158,49 +269,68 @@
                 hideEvent(eventItem);
             }
         });
+
+        updateStatus(filterState);
     };
 
-    tagButtons.forEach((button) => {
+    tagSelect?.addEventListener('change', () => {
-        button.addEventListener('click', () => {
+        if (suppressedChangeEvents > 0) {
-            if (locationSelect) {
+            return;
-                locationSelect.value = 'all';
         }
 
-            if (orgSelect) {
+        const selectedValue = tagSelect.value;
-                orgSelect.value = 'all';
-            }
 
-            applyFilter({ type: 'tag', value: button.dataset.filterTag ?? 'all' });
+        setSelectValue(locationSelect, locationSlim, 'all');
-        });
+        setSelectValue(orgSelect, orgSlim, 'all');
-    });
-
-    locationSelect?.addEventListener('change', () => {
-        const selectedValue = locationSelect.value;
-
-        if (orgSelect) {
-            orgSelect.value = '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) {
+        setSelectValue(tagSelect, tagSlim, 'all');
-            locationSelect.value = '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>

templates/list_default_organisationen.html.twig

@@ -0,0 +1,258 @@
+{% extends '@Contao/block_searchable.html.twig' %}
+
+{% set wrapperAttributes = attrs()
+    .addClass(['ce_table', 'listing'])
+    .mergeWith(wrapperAttributes|default)
+%}
+
+{% block content %}
+
+    {% set legacyTagLabels = {
+        '10': 'Sport',
+        '11': 'Kultur',
+        '12': 'Politik',
+        '13': 'Soziales',
+        '14': 'Freizeit',
+        '15': 'Bildung',
+        '16': 'Religion',
+        '17': 'Natur',
+        '18': 'Gesellschaft'
+    } %}
+
+    {% if searchable %}
+        <div class="list_search">
+            <form method="get">
+                <div class="formbody">
+                    <input type="hidden" name="order_by" value="{{ order_by }}">
+                    <input type="hidden" name="sort" value="{{ sort }}">
+                    {% if per_page %}
+                        <input type="hidden" name="per_page" value="{{ per_page }}">
+                    {% endif %}
+                    <div class="widget widget-select">
+                        <label for="ctrl_search" class="invisible">{{ fields_label }}</label>
+                        <select name="search" id="ctrl_search" class="select">
+                            {{ search_fields|raw }}
+                        </select>
+                    </div>
+                    <div class="widget widget-text">
+                        <label for="ctrl_for" class="invisible">{{ keywords_label }}</label>
+                        <input type="text" name="for" id="ctrl_for" class="text" value="{{ for }}">
+                    </div>
+                    <div class="widget widget-submit">
+                        <button type="submit" class="submit">{{ search_label }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endif %}
+
+    {% if per_page %}
+        <div class="list_per_page">
+            <form method="get">
+                <div class="formbody">
+                    <input type="hidden" name="order_by" value="{{ order_by }}">
+                    <input type="hidden" name="sort" value="{{ sort }}">
+                    <input type="hidden" name="search" value="{{ search }}">
+                    <input type="hidden" name="for" value="{{ for }}">
+                    <div class="widget widget-select">
+                        <label for="ctrl_per_page" class="invisible">{{ per_page_label }}</label>
+                        <select name="per_page" id="ctrl_per_page" class="select">
+                            <option value="10"{% if 10 == per_page %} selected{% endif %}>10</option>
+                            <option value="20"{% if 20 == per_page %} selected{% endif %}>20</option>
+                            <option value="30"{% if 30 == per_page %} selected{% endif %}>30</option>
+                            <option value="50"{% if 50 == per_page %} selected{% endif %}>50</option>
+                            <option value="100"{% if 100 == per_page %} selected{% endif %}>100</option>
+                            <option value="250"{% if 250 == per_page %} selected{% endif %}>250</option>
+                            <option value="500"{% if 500 == per_page %} selected{% endif %}>500</option>
+                        </select>
+                    </div>
+                    <div class="widget widget-submit">
+                        <button type="submit" class="submit">{{ per_page_label }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endif %}
+
+    {% if searchable and for and not tbody|default %}
+        {{ no_results }}
+    {% else %}
+        {% set tagOptions = {} %}
+
+        {% for row in tbody|default([]) %}
+            {% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
+            {% set tagsPrepared = tagsRaw|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
+            {% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
+
+            {% for part in tagParts %}
+                {% set tagValue = part|striptags|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': ''})|trim %}
+
+                {% if legacyTagLabels[tagValue] is defined %}
+                    {% set tagLabel = legacyTagLabels[tagValue] %}
+                {% elseif tagValue matches '/^\\d+$/' %}
+                    {% set tagLabel = '' %}
+                {% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
+                    {% set tagLabel = tagValue %}
+                {% else %}
+                    {% set tagLabel = '' %}
+                {% endif %}
+
+                {% if tagLabel is not empty %}
+                    {% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
+
+                    {% if tagSlug is not empty and tagOptions[tagSlug] is not defined %}
+                        {% set tagOptions = tagOptions|merge({ (tagSlug): tagLabel }) %}
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.css">
+
+        <div id="orgfilters" class="controls filters">
+            <label for="org-tag-filter" class="visually-hidden">Nach Typ filtern</label>
+            <select id="org-tag-filter" class="select" data-placeholder="Typ wählen">
+                <option value="">Alle</option>
+                {% for slug, label in tagOptions %}
+                    <option value="{{ slug }}">{{ label }}</option>
+                {% endfor %}
+            </select>
+            <button type="button" id="org-filter-reset" class="submit" style="display:none;">Filter zurücksetzen</button>
+        </div>
+
+        <div id="org">
+            <div id="org-list">
+                {% for row in tbody|default([]) %}
+                    {% set tagSlugsRaw = row.tag_slugs.content|default('')|trim %}
+                    {% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
+                    {% set tagsPrepared = tagsRaw|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
+                    {% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
+
+                    {% set tagClasses = [] %}
+                    {% set tagSlugs = [] %}
+
+                    {% if tagSlugsRaw is not empty %}
+                        {% for slug in tagSlugsRaw|split(',') %}
+                            {% set cleanedSlug = slug|trim %}
+
+                            {% if cleanedSlug is not empty %}
+                                {% set tagSlugs = tagSlugs|merge([cleanedSlug]) %}
+                                {% set tagClasses = tagClasses|merge(['tag-' ~ cleanedSlug]) %}
+                            {% endif %}
+                        {% endfor %}
+                    {% endif %}
+
+                    {% for part in tagParts if tagSlugsRaw is empty %}
+                        {% set tagValue = part|striptags|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': ''})|trim %}
+
+                        {% if legacyTagLabels[tagValue] is defined %}
+                            {% set tagLabel = legacyTagLabels[tagValue] %}
+                        {% elseif tagValue matches '/^\\d+$/' %}
+                            {% set tagLabel = '' %}
+                        {% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
+                            {% set tagLabel = tagValue %}
+                        {% else %}
+                            {% set tagLabel = '' %}
+                        {% endif %}
+
+                        {% if tagLabel is not empty %}
+                            {% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
+
+                            {% if tagSlug is not empty %}
+                                {% set tagClasses = tagClasses|merge(['tag-' ~ tagSlug]) %}
+                                {% set tagSlugs = tagSlugs|merge([tagSlug]) %}
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {% set title = row.title.content|default('') %}
+                    {% set logoUuid = row.logo_uuid.content|default('')|trim %}
+                    {% set lastCol = row|last %}
+
+                    <div class="org-item{% if tagClasses|length %} {{ tagClasses|join(' ') }}{% endif %}"{% if tagSlugs|length %} data-tags="{{ tagSlugs|join(',') }}"{% endif %}>
+                        <div class="wrapper">
+                            {% if logoUuid is not empty %}
+                                <div class="logo">{{ ('{{figure::' ~ logoUuid ~ '}}')|insert_tag_raw }}</div>
+                            {% endif %}
+
+                            {% if title is not empty %}
+                                <div class="title">{{ title|sanitize_html }}</div>
+                            {% endif %}
+
+                            {% if details and lastCol and lastCol.url|default %}
+                                <a class="details" href="{{ lastCol.url }}" title="{{ title|striptags }} - Details"></a>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    {% endif %}
+
+    {% if pagination is defined %}
+        {{ pagination|raw }}
+    {% endif %}
+
+    <script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+    <script>
+        (function () {
+            const selectElement = document.querySelector('#org-tag-filter');
+            const resetButton = document.querySelector('#org-filter-reset');
+            const items = Array.from(document.querySelectorAll('#org-list .org-item'));
+
+            if (!selectElement || !items.length || typeof SlimSelect === 'undefined') {
+                return;
+            }
+
+            const slim = new SlimSelect({
+                select: selectElement,
+                settings: {
+                    allowDeselect: true,
+                    showSearch: false,
+                    placeholderText: 'Alle'
+                }
+            });
+
+            const applyFilter = function (selectedTag) {
+                const activeTag = selectedTag || '';
+
+                if (!activeTag) {
+                    items.forEach(function (item) {
+                        item.style.removeProperty('display');
+                    });
+
+                    if (resetButton) {
+                        resetButton.style.display = 'none';
+                    }
+
+                    return;
+                }
+
+                items.forEach(function (item) {
+                    const itemTags = (item.getAttribute('data-tags') || '').split(',').filter(Boolean);
+                    item.style.display = itemTags.includes(activeTag) ? '' : 'none';
+                });
+
+                if (resetButton) {
+                    resetButton.style.display = activeTag ? '' : 'none';
+                }
+            };
+
+            selectElement.addEventListener('change', function () {
+                applyFilter(selectElement.value || '');
+            });
+
+            if (resetButton) {
+                resetButton.addEventListener('click', function () {
+                    slim.setSelected('');
+                    applyFilter('');
+                });
+            }
+
+            if (selectElement.value) {
+                applyFilter(selectElement.value);
+            }
+        })();
+    </script>
+
+{% endblock %}