studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#13 program > calendar : scroll to closest next event

Browse source
This commit is contained in:
isUnknown 2024-11-04 11:32:33 +01:00
parent adca7d7204
commit 10ceede6e7
2 changed files with 33 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/css/src/collapsable-section.css
View file

@ -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;

35
site/templates/program.php
View file

@ -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>