Scope view transitions to event list and prevent page shift

contao/templates/frontend/event_edit.html.twig

@@ -17,8 +17,8 @@
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
-    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script type="module" src="{{ asset('bundles/eventmanager/editor.js') }}?v=1"></script>
-    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/eventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -78,51 +78,51 @@
           aria-controls="{{ form.teaser.vars.id }}-editor"
         >
           <button type="button" data-action="paragraph" title="Absatz">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Absatz</span>
           </button>
           <button type="button" data-action="h2" title="Überschrift H2">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">H2</span>
           </button>
           <button type="button" data-action="h3" title="Überschrift H3">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">H3</span>
           </button>
           <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Fett</span>
           </button>
           <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Kursiv</span>
           </button>
           <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Unterstrichen</span>
           </button>
           <button type="button" data-action="bulletList" title="Liste">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Liste</span>
           </button>
           <button type="button" data-action="orderedList" title="Nummerierte Liste">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Nummerierte Liste</span>
           </button>
           <button type="button" data-action="indent" title="Einzug vergrößern">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Einzug vergrößern</span>
           </button>
           <button type="button" data-action="outdent" title="Einzug verkleinern">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Einzug verkleinern</span>
           </button>
           <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Rückgängig</span>
           </button>
           <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Wiederholen</span>
           </button>
         </div>

contao/templates/frontend/event_filter.html.twig

@@ -37,6 +37,69 @@
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
+<style>
+    .event-filter-target-list {
+        view-transition-name: event-filter-list;
+        contain: layout paint;
+    }
+
+    html {
+        scrollbar-gutter: stable both-edges;
+    }
+
+    body {
+        overflow-y: scroll;
+    }
+
+    @keyframes event-filter-vt-fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes event-filter-vt-fade-out {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        ::view-transition-group(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+            animation: none;
+        }
+
+        ::view-transition-group(event-filter-list) {
+            animation-duration: 240ms;
+            animation-timing-function: ease;
+        }
+
+        ::view-transition-old(event-filter-list),
+        ::view-transition-new(event-filter-list) {
+            animation-duration: 240ms;
+            animation-timing-function: ease;
+            mix-blend-mode: normal;
+        }
+
+        ::view-transition-old(event-filter-list) {
+            animation-name: event-filter-vt-fade-out;
+        }
+
+        ::view-transition-new(event-filter-list) {
+            animation-name: event-filter-vt-fade-in;
+        }
+    }
+</style>
+
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -116,9 +179,62 @@
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
+    const supportsViewTransitions = typeof document.startViewTransition === 'function';
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    let activeViewTransition = null;
+    let isViewTransitionMutation = false;
+    let hasAppliedInitialFilter = false;
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
+    const runWithLayoutTransition = (mutation) => {
+        if (!supportsViewTransitions || prefersReducedMotion) {
+            mutation();
+            return;
+        }
+
+        if (activeViewTransition) {
+            mutation();
+            return;
+        }
+
+        try {
+            const transition = document.startViewTransition(() => {
+                isViewTransitionMutation = true;
+
+                try {
+                    mutation();
+                } finally {
+                    isViewTransitionMutation = false;
+                }
+            });
+
+            activeViewTransition = transition;
+
+            transition.ready.catch(() => {
+                // Can reject when the transition is skipped.
+            });
+
+            transition.updateCallbackDone.catch(() => {
+                // Keep skipped/aborted update callbacks from surfacing as uncaught.
+            });
+
+            transition.finished
+                .catch(() => {
+                    // Browsers can skip overlapping transitions; ignore these rejections.
+                })
+                .finally(() => {
+                    if (activeViewTransition === transition) {
+                        activeViewTransition = null;
+                    }
+                });
+        } catch (error) {
+            mutation();
+        }
+    };
+
+    const shouldMutateVisibilityImmediately = () => supportsViewTransitions && !prefersReducedMotion;
+
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -251,21 +367,38 @@
         }
     };
 
-    const showEvent = (eventItem) => {
+    const showEvent = (eventItem, { immediateVisibility = false } = {}) => {
         clearHideTimer(eventItem);
+
+        if (immediateVisibility) {
             eventItem.hidden = false;
+            eventItem.classList.remove('is-filtered-out');
+            return;
+        }
+
+        if (eventItem.hidden) {
+            eventItem.hidden = false;
+        }
 
         requestAnimationFrame(() => {
             eventItem.classList.remove('is-filtered-out');
         });
     };
 
-    const hideEvent = (eventItem) => {
+    const hideEvent = (eventItem, { immediateVisibility = false } = {}) => {
         clearHideTimer(eventItem);
+
+        if (immediateVisibility) {
+            eventItem.classList.add('is-filtered-out');
+            eventItem.hidden = true;
+            return;
+        }
+
         eventItem.classList.add('is-filtered-out');
 
         const timer = window.setTimeout(() => {
             eventItem.hidden = true;
+
             hideTimers.delete(eventItem);
         }, animationMs);
 
@@ -332,7 +465,7 @@
             return;
         }
 
-        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        const visibleCount = events.filter((eventItem) => matches(eventItem, filterState)).length;
         let filterText = 'alle';
 
         if (filterState.type === 'tag' && tagSelect) {
@@ -357,13 +490,26 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
+        const immediateVisibility = shouldMutateVisibilityImmediately();
+        const shouldAnimateLayout = immediateVisibility && hasAppliedInitialFilter;
+
+        const mutateVisibility = () => {
             events.forEach((eventItem) => {
                 if (matches(eventItem, filterState)) {
-                showEvent(eventItem);
+                    showEvent(eventItem, { immediateVisibility });
                 } else {
-                hideEvent(eventItem);
+                    hideEvent(eventItem, { immediateVisibility });
                 }
             });
+        };
+
+        if (shouldAnimateLayout) {
+            runWithLayoutTransition(mutateVisibility);
+        } else {
+            mutateVisibility();
+        }
+
+        hasAppliedInitialFilter = true;
 
         updateStatus(filterState);
         syncState(filterState);

contao/templates/frontend/event_map.html.twig

@@ -85,4 +85,4 @@
 ></div>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>
+<script type="module" src="/bundles/eventmanager/assets/map-module.js?v=20260227b"></script>

contao/templates/frontend/member_events.html.twig

@@ -56,7 +56,7 @@
     </form>
   {% endif %}
 
-  <script src="/bundles/mummertmediaeventmanager/assets/member-events-confirm.js?v=20260301a"></script>
+  <script src="/bundles/eventmanager/assets/member-events-confirm.js?v=20260301a"></script>
 
   <h2>Vergangene Veranstaltungen</h2>
   {% if pastEvents is empty %}

contao/templates/frontend/organization_edit.html.twig

@@ -11,8 +11,8 @@
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
-    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script type="module" src="{{ asset('bundles/eventmanager/editor.js') }}?v=1"></script>
-    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/eventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -39,51 +39,51 @@
           aria-controls="{{ form.description.vars.id }}-editor"
         >
           <button type="button" data-action="paragraph" title="Absatz">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Absatz</span>
           </button>
           <button type="button" data-action="h2" title="Überschrift H2">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">H2</span>
           </button>
           <button type="button" data-action="h3" title="Überschrift H3">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">H3</span>
           </button>
           <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Fett</span>
           </button>
           <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Kursiv</span>
           </button>
           <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Unterstrichen</span>
           </button>
           <button type="button" data-action="bulletList" title="Liste">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Liste</span>
           </button>
           <button type="button" data-action="orderedList" title="Nummerierte Liste">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Nummerierte Liste</span>
           </button>
           <button type="button" data-action="indent" title="Einzug vergrößern">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Einzug vergrößern</span>
           </button>
           <button type="button" data-action="outdent" title="Einzug verkleinern">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Einzug verkleinern</span>
           </button>
           <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Rückgängig</span>
           </button>
           <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
-            <img src="{{ asset('bundles/mummertmediaeventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
+            <img src="{{ asset('bundles/eventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
             <span class="visually-hidden">Wiederholen</span>
           </button>
         </div>