refactor(member-events): group editor actions in dedicated wrapper

contao/templates/frontend/event_filter.html.twig

@@ -8,6 +8,7 @@
                     <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="tag" aria-label="Kategorie-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select places">
@@ -18,6 +19,7 @@
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="location" aria-label="Ort-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select org">
@@ -28,11 +30,10 @@
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="org" aria-label="Veranstalter-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
-
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
@@ -73,12 +74,37 @@
         outline-offset: 3px;
     }
 
+    #eventfilters .widget-select.active::before {
+        display: none;
+    }
+
     #eventfilters select:focus-visible {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
 
-    #eventfilters .eventfilter-reset[hidden] {
+    #eventfilters .widget-select {
+        position: relative;
+    }
+
+    #eventfilters .eventfilter-clear {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: 1em;
+        line-height: 1;
+    }
+
+    #eventfilters .eventfilter-clear[hidden] {
         display: none;
     }
 
@@ -107,7 +133,9 @@
     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 clearTagButton = filters.querySelector('[data-eventfilter-clear="tag"]');
+    const clearLocationButton = filters.querySelector('[data-eventfilter-clear="location"]');
+    const clearOrgButton = filters.querySelector('[data-eventfilter-clear="org"]');
     const status = filters.querySelector('#eventfilter-status');
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
@@ -279,9 +307,25 @@
         locationWidget?.classList.toggle('active', hasActiveLocation);
         orgWidget?.classList.toggle('active', hasActiveOrg);
 
-        if (resetButton) {
-            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        if (clearTagButton) {
+            clearTagButton.hidden = !hasActiveTag;
         }
+
+        if (clearLocationButton) {
+            clearLocationButton.hidden = !hasActiveLocation;
+        }
+
+        if (clearOrgButton) {
+            clearOrgButton.hidden = !hasActiveOrg;
+        }
+    };
+
+    const resetAllFilters = () => {
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter({ type: 'all', value: '' });
     };
 
     const parseIdList = (rawValue) => (rawValue ?? '')
@@ -402,13 +446,9 @@
         );
     });
 
-    resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, '');
-        setSelectValue(locationSelect, '');
-        setSelectValue(orgSelect, '');
-
-        applyFilter({ type: 'all', value: '' });
-    });
+    clearTagButton?.addEventListener('click', resetAllFilters);
+    clearLocationButton?.addEventListener('click', resetAllFilters);
+    clearOrgButton?.addEventListener('click', resetAllFilters);
 
     const urlState = readUrlState();
     const storedState = readStoredState();

contao/templates/frontend/event_map.html.twig

@@ -112,4 +112,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=20260227a"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>

contao/templates/frontend/member_events.html.twig

@@ -16,30 +16,32 @@
           </span>
 
           {% if isEditor %}
-            <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="toggle_published">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
-            </form>
+            <div class="member-events-actions">
+              <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="toggle_published">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
+              </form>
 
-            {% if item.editUrl %}
-              <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
-            {% endif %}
+              {% if item.editUrl %}
+                <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
+              {% endif %}
 
-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="duplicate">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
-            </form>
+              <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="duplicate">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
+              </form>
 
-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="delete">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
-            </form>
+              <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="delete">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
+              </form>
+            </div>
           {% endif %}
         </li>
       {% endfor %}
@@ -69,30 +71,32 @@
           </span>
 
           {% if isEditor %}
-            <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="toggle_published">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
-            </form>
+            <div class="member-events-actions">
+              <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="toggle_published">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
+              </form>
 
-            {% if item.editUrl %}
-              <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
-            {% endif %}
+              {% if item.editUrl %}
+                <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
+              {% endif %}
 
-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="duplicate">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
-            </form>
+              <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="duplicate">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
+              </form>
 
-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="delete">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
-            </form>
+              <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="delete">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
+              </form>
+            </div>
           {% endif %}
         </li>
       {% endfor %}

public/assets/map-module.js

@@ -21,8 +21,60 @@ const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
 const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
 const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
 const SATELLITE_ATTRIBUTION = '© Esri, Maxar';
+const PROTOMAPS_SOURCE_ID = 'protomaps';
+const DEFAULT_BASE_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
+const PROTOMAPS_PM_TILES_URL = 'pmtiles://https://maps.mummert.media/tiles/world.pmtiles';
+const PROTOMAPS_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
+const PROTOMAPS_GLYPHS_URL = 'https://maps.mummert.media/fonts/{fontstack}/{range}.pbf';
+const PROTOMAPS_SPRITE_URL = 'https://maps.mummert.media/sprites/v4/light';
+const PROTOMAPS_FLAVOR_URL = 'https://maps.mummert.media/metadaten/flavors/bio.json';
+const PROTOMAPS_BASEMAPS_ESM_URLS = [
+    'https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/+esm',
+    'https://esm.sh/@protomaps/basemaps@5',
+];
+const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';
 
 let dependenciesPromise = null;
+let basemapsApiPromise = null;
+const protomapsStylePromises = new Map();
+
+const getBasemapsApi = async () => {
+    if (basemapsApiPromise) {
+        return basemapsApiPromise;
+    }
+
+    basemapsApiPromise = (async () => {
+        for (const url of PROTOMAPS_BASEMAPS_ESM_URLS) {
+            try {
+                const module = await import(url);
+                const moduleApi = module && 'object' === typeof module
+                    ? (module.layers ? module : (module.default && module.default.layers ? module.default : null))
+                    : null;
+
+                if (moduleApi && 'function' === typeof moduleApi.layers) {
+                    return moduleApi;
+                }
+            } catch (error) {
+                continue;
+            }
+        }
+
+        await loadScript(PROTOMAPS_BASEMAPS_UMD_URL);
+
+        if (window.basemaps && 'function' === typeof window.basemaps.layers) {
+            return window.basemaps;
+        }
+
+        throw new Error('Failed to load Protomaps basemaps API');
+    })();
+
+    basemapsApiPromise = basemapsApiPromise.catch((error) => {
+        basemapsApiPromise = null;
+        throw error;
+    });
+
+    return basemapsApiPromise;
+};
 
 const ensureStylesheet = (href) => {
     if (!href) {
@@ -94,6 +146,69 @@ const ensureDependencies = async () => {
     return dependenciesPromise;
 };
 
+const getProtomapsStyle = async (baseStyleUrl = DEFAULT_BASE_STYLE_URL) => {
+    const normalizedBaseStyleUrl = String(baseStyleUrl || DEFAULT_BASE_STYLE_URL).trim() || DEFAULT_BASE_STYLE_URL;
+
+    if (protomapsStylePromises.has(normalizedBaseStyleUrl)) {
+        return protomapsStylePromises.get(normalizedBaseStyleUrl);
+    }
+
+    const stylePromise = (async () => {
+        const baseStyleResponse = await fetch(normalizedBaseStyleUrl, { credentials: 'omit' });
+
+        if (!baseStyleResponse.ok) {
+            throw new Error(`Failed to load base map style: ${baseStyleResponse.status}`);
+        }
+
+        const baseStyle = await baseStyleResponse.json();
+        const baseSources = baseStyle?.sources && 'object' === typeof baseStyle.sources
+            ? baseStyle.sources
+            : {};
+        const protomapsSource = baseSources[PROTOMAPS_SOURCE_ID] && 'object' === typeof baseSources[PROTOMAPS_SOURCE_ID]
+            ? baseSources[PROTOMAPS_SOURCE_ID]
+            : {
+                type: 'vector',
+                attribution: PROTOMAPS_ATTRIBUTION,
+                url: PROTOMAPS_PM_TILES_URL,
+            };
+
+        try {
+            const basemapsApi = await getBasemapsApi();
+            const flavorResponse = await fetch(PROTOMAPS_FLAVOR_URL, { credentials: 'omit' });
+
+            if (!flavorResponse.ok) {
+                throw new Error(`Failed to load Protomaps flavor: ${flavorResponse.status}`);
+            }
+
+            const flavor = await flavorResponse.json();
+            const generatedLayers = basemapsApi.layers(PROTOMAPS_SOURCE_ID, flavor, { lang: 'de' });
+
+            return {
+                ...baseStyle,
+                version: 8,
+                glyphs: baseStyle?.glyphs || PROTOMAPS_GLYPHS_URL,
+                sprite: baseStyle?.sprite || PROTOMAPS_SPRITE_URL,
+                sources: {
+                    ...baseSources,
+                    [PROTOMAPS_SOURCE_ID]: protomapsSource,
+                },
+                layers: generatedLayers,
+            };
+        } catch (error) {
+            return baseStyle;
+        }
+    })();
+
+    const cachedStylePromise = stylePromise.catch((error) => {
+        protomapsStylePromises.delete(normalizedBaseStyleUrl);
+        throw error;
+    });
+
+    protomapsStylePromises.set(normalizedBaseStyleUrl, cachedStylePromise);
+
+    return cachedStylePromise;
+};
+
 const rewriteGlyphUrl = (url) => {
     if (!url) {
         return url;
@@ -1152,7 +1267,7 @@ const initSingleMap = (container) => {
     container.dataset.mapInitialized = '1';
 
     ensureDependencies()
-        .then(() => {
+        .then(async () => {
             if (typeof maplibregl === 'undefined') {
                 return;
             }
@@ -1163,7 +1278,8 @@ const initSingleMap = (container) => {
                 window.__eventmanagerPmtilesRegistered = true;
             }
 
-            const style = container.dataset.mapStyle || 'https://maps.mummert.media/metadaten/world-light.json';
+            const baseStyleUrl = container.dataset.mapStyle || DEFAULT_BASE_STYLE_URL;
+            const style = await getProtomapsStyle(baseStyleUrl);
             const map = new maplibregl.Map({
                 container,
                 style,