Map filters: conditional visibility + initial display handling

This commit is contained in:
Jürgen Mummert
2026-02-26 20:31:45 +01:00
parent fb58c50f18
commit dedf8868b5
6 changed files with 265 additions and 98 deletions
+29 -25
View File
@@ -1,4 +1,9 @@
{% set tags = mapOrganizationTags|default([]) %}
{% set showOrganizations = mapShowOrganizations|default(false) %}
{% set showEvents = mapShowEvents|default(false) %}
{% set showTagButtons = showOrganizations and tags is iterable and tags|length > 0 %}
{% set showEventButton = showOrganizations and showEvents %}
{% set showFilterButtons = showTagButtons or showEventButton %}
<section
id="{{ mapFilterWrapperId|e('html_attr') }}"
@@ -7,16 +12,18 @@
role="region"
aria-label="Kartenfilter"
>
<button
type="button"
class="eventmanager-map-filter__toggle is-expanded"
data-map-filter-toggle="1"
aria-expanded="true"
aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
>
<span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--expand">Filter einblenden</span>
<span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--collapse">Filter ausblenden</span>
</button>
{% if showFilterButtons %}
<button
type="button"
class="eventmanager-map-filter__toggle is-expanded"
data-map-filter-toggle="1"
aria-expanded="true"
aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
>
<span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--expand">Filter einblenden</span>
<span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--collapse">Filter ausblenden</span>
</button>
{% endif %}
<div
id="{{ mapFilterGroupId|e('html_attr') }}"
@@ -24,14 +31,7 @@
role="group"
aria-label="Organisationstypen"
>
<button
type="button"
class="eventmanager-map-filter__tag is-active"
data-map-filter-action="all"
aria-pressed="true"
>Alle</button>
{% if tags is iterable and tags|length > 0 %}
{% if showTagButtons %}
{% for tag in tags %}
<button
type="button"
@@ -41,12 +41,14 @@
>{{ tag.label|e }}</button>
{% endfor %}
{% endif %}
<button
type="button"
class="eventmanager-map-filter__tag"
data-map-event-toggle="1"
aria-pressed="false"
>Veranstaltungen</button>
{% if showEventButton %}
<button
type="button"
class="eventmanager-map-filter__tag"
data-map-event-toggle="1"
aria-pressed="false"
>Veranstaltungen</button>
{% endif %}
<button
type="button"
@@ -73,6 +75,8 @@
data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
data-map-event-color="{{ mapEventColor|default('#BC5067')|e('html_attr') }}"
data-map-organization-color="{{ mapOrganizationColor|default('#BC5067')|e('html_attr') }}"
data-map-initial-display="{{ mapInitialDisplay|default('all')|e('html_attr') }}"
data-map-initial-tag-id="{{ mapInitialTagId|default(0)|e('html_attr') }}"
data-map-center-mode="{{ mapCenterMode|default('markers')|e('html_attr') }}"
data-map-center-lat="{{ mapCenterLat|default('')|e('html_attr') }}"
data-map-center-lng="{{ mapCenterLng|default('')|e('html_attr') }}"
@@ -103,4 +107,4 @@
</style>
<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226"></script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226d"></script>