#13 program > calendar : scroll to closest next event

assets/css/src/collapsable-section.css

@@ -51,6 +51,7 @@
 }
 
 .sessions--detailed .session {
+  scroll-margin-block-start: 7.7rem;
   grid-template-columns: 1.5fr 2fr 1fr 1fr 2.5fr !important;
 }
 
@@ -84,6 +85,10 @@
 }
 
 @media screen and (max-width: 1085px) {
+  .sessions--detailed .session {
+    scroll-margin-block-start: 7rem;
+  }
+
   .collapsable__content .session {
     grid-template-columns: 1fr 1fr !important;
     column-gap: 9vw;

site/templates/program.php

@@ -27,6 +27,24 @@
           }
         })
       })
+    },
+    scrollToNextClosestDate() {
+      const nodes = document.querySelectorAll('.sessions [data-date]');
+      const today = new Date();
+      
+      const nodesWithDates = Array.from(nodes).map(node => {
+        const dateStr = node.getAttribute('data-date');
+        const date = new Date(dateStr);
+        return { node, date };
+      }).filter(({ date }) => date >= today);
+
+      if (nodesWithDates.length === 0) return;
+
+      const nextClosestNode = nodesWithDates.reduce((closest, current) => {
+        return current.date < closest.date ? current : closest;
+      });
+
+      nextClosestNode.node.scrollIntoView({ behavior: 'smooth' });
     }
   }"
 >
@@ -55,6 +73,7 @@
           const url = new URL(window.location.href);
           url.searchParams.set('tab', tab);
           window.history.pushState({}, '', url);
+          setTimeout(scrollToNextClosestDate, 100)
           "
       ></button>
       <?php foreach($page->categories()->split() as $filter): ?>
@@ -73,6 +92,7 @@
             const url = new URL(window.location.href);
             url.searchParams.set('tab', tab);
             window.history.pushState({}, '', url);
+            setTimeout(scrollToNextClosestDate, 100)
           "
         ></button>
       <?php endforeach ?>
@@ -110,7 +130,13 @@
             <?php if (count($sessions) > 0): ?>
               <?php snippet('collapsable-section', ['title' => $month, 'padding' => false, 'open' => $open], slots: true) ?>
                 <?php slot('content') ?>
-                <ul class="sessions sessions--detailed">
+
+                <ul 
+                  class="sessions sessions--detailed"
+                  x-init="
+                    scrollToNextClosestDate()
+                  "
+                >
                   <?php
                     foreach($sessions as $session):
                       $date = new DateTime($session['date']);
@@ -118,7 +144,7 @@
                       $formattedDate = $formatter->formatObject($date, "d MMMM");
                   ?>
                     <template x-if="tab === 'Calendrier' || ('<?= $session['categories'] ?>'.length > 0 && tab.includes('<?= $session['categories'] ?>'))">
-                    <li class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>">
+                    <li id="<?= Str::slug($session['title']) ?>" class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>" data-date="<?= $session['date'] ?>">
                       <div class="left-column">
                         <div class="session__info">
                           <p><?= $formattedDate ?></p>
@@ -148,11 +174,6 @@
                           </div>
                         </div>
                         <div class="session__info session__info--ticket">
-                          <?php 
-                            // if (str_contains($session['title'], 'Atelier')) {
-                            //   throw new Exception(json_encode($session), 1);
-                            // }
-                           ?>
                           <?php if ($session['bookableStock'] === 'free'): ?>
                             <?php if (strlen($session['ticketingUrl']) > 0): ?>
                               <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Billetterie</a>