fix(map): simplify filters and restore style toggle behavior

contao/dca/tl_module.php

@@ -9,7 +9,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,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
-$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapShowExternalOrganizations,mapShowEvents,mapEventColor,mapOrganizationColorScheme,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapShowExternalOrganizations,mapShowEvents,mapEventColor,mapOrganizationColor,mapCenterMode;{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';
 
@@ -195,12 +195,12 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapEventColor'] = [
     'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
 ];
 
-$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColorScheme'] = [
-    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'],
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColor'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'],
     'exclude' => true,
     'inputType' => 'text',
-    'eval' => ['maxlength' => 1024, 'tl_class' => 'clr long'],
-    'sql' => ['type' => 'string', 'length' => 1024, 'default' => ''],
+    'eval' => ['maxlength' => 7, 'rgxp' => 'hexcolor', 'colorpicker' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
 ];
 
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterMode'] = [

contao/languages/de/tl_module.php

@@ -17,7 +17,7 @@ $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anze
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Externe Organisationen anzeigen', 'Wenn aktiviert, werden externe Organisationen (isExternal=1) zusätzlich auf der Karte dargestellt. Standard: nein.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Veranstaltungen anzeigen', 'Wenn aktiviert, werden Event- (inkl. Orts-) Marker auf der Karte dargestellt.'];
 $GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event-Farbe (Kreise/Linien)', 'Farbe für Event-Cluster, Event-Punkte und Spiderfy-Verbindungslinien (Hex, z. B. #BC5067).'];
-$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Farbschema (Organisationstypen)', 'Kommagetrennte Farben für Organisationstypen/Tags, z. B. ff6600,77dd33,ff99bb. Markerfarbe richtet sich nach dem ersten Tag.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'] = ['Organisationsfarbe', 'Einheitliche Farbe für alle Organisations-Marker (Hex, z. B. #BC5067).'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Karten-Zentrierung', 'Wählen Sie, ob die Karte anhand der Marker oder mit festen Koordinaten zentriert werden soll.'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 	'markers' => 'Anhand der Marker (alle Marker sichtbar)',

contao/languages/en/tl_module.php

@@ -17,7 +17,7 @@ $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations'
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Show external organizations', 'If enabled, external organizations (isExternal=1) are additionally rendered on the map. Default: no.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Show events', 'If enabled, event markers (including related locations) are rendered on the map.'];
 $GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event color (circles/lines)', 'Color for event clusters, event points and spiderfy connector lines (hex, e.g. #BC5067).'];
-$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Color scheme (organization types)', 'Comma-separated colors for organization type tags, e.g. ff6600,77dd33,ff99bb. Marker color follows the first tag.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'] = ['Organization color', 'Unified color for all organization markers (hex, e.g. #BC5067).'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Map centering', 'Choose whether the map should center by markers or fixed coordinates.'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 	'markers' => 'By markers (fit all visible markers)',

contao/templates/frontend/event_map.html.twig

@@ -9,12 +9,13 @@
 >
     <button
         type="button"
-        class="eventmanager-map-filter__toggle"
+        class="eventmanager-map-filter__toggle is-expanded"
         data-map-filter-toggle="1"
         aria-expanded="true"
         aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
     >
-        Bereiche ausblenden
+        <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>
 
     <div
@@ -23,29 +24,43 @@
         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 %}
             {% for tag in tags %}
                 <button
                     type="button"
-                    class="eventmanager-map-filter__tag is-active"
+                    class="eventmanager-map-filter__tag"
                     data-map-tag-filter="{{ tag.id|e('html_attr') }}"
-                    aria-pressed="true"
+                    aria-pressed="false"
                 >{{ tag.label|e }}</button>
             {% endfor %}
         {% endif %}
         <button
             type="button"
-            class="eventmanager-map-filter__tag is-active"
+            class="eventmanager-map-filter__tag"
             data-map-event-toggle="1"
-            aria-pressed="true"
+            aria-pressed="false"
         >Veranstaltungen</button>
-    </div>
 
-    <div class="eventmanager-map-filter__actions">
-        <button type="button" data-map-filter-action="all">Alle auswählen</button>
-        <button type="button" data-map-filter-action="none">Alle abwählen</button>
-        <button type="button" data-map-style-mode="street" aria-pressed="true">Straße</button>
-        <button type="button" data-map-style-mode="satellite" aria-pressed="false">Satellit</button>
+        <button
+            type="button"
+            class="eventmanager-map-filter__tag"
+            data-map-style-mode="street"
+            aria-pressed="true"
+        >Straße</button>
+
+        <button
+            type="button"
+            class="eventmanager-map-filter__tag"
+            data-map-style-mode="satellite"
+            aria-pressed="false"
+        >Satellit</button>
     </div>
 </section>
 
@@ -57,7 +72,7 @@
     data-map-style="{{ mapStyleUrl|e('html_attr') }}"
     data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
     data-map-event-color="{{ mapEventColor|default('#BC5067')|e('html_attr') }}"
-    data-map-organization-colors="{{ mapOrganizationColorScheme|default('')|e('html_attr') }}"
+    data-map-organization-color="{{ mapOrganizationColor|default('#BC5067')|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') }}"
@@ -71,8 +86,7 @@
         margin-bottom: .75rem;
     }
 
-    .eventmanager-map-filter__group,
-    .eventmanager-map-filter__actions {
+    .eventmanager-map-filter__group {
         display: flex;
         flex-wrap: wrap;
         gap: .5rem;
@@ -89,4 +103,4 @@
 </style>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226"></script>