210 lines
No EOL
8.7 KiB
PHP
210 lines
No EOL
8.7 KiB
PHP
<?php snippet('header') ?>
|
|
<div
|
|
class="program-methods"
|
|
x-data="{
|
|
setInitialTab() {
|
|
const queryString = window.location.search;
|
|
if (queryString.length === 0) return 'Programme';
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const tab = urlParams.get('tab');
|
|
return tab;
|
|
},
|
|
disableEmptySections() {
|
|
setTimeout(() => {
|
|
const sections = document.querySelectorAll('.collapsable')
|
|
sections.forEach(section => {
|
|
const sessions = section.querySelector('.sessions li')
|
|
const toggleBtn = section.querySelector('.toggle')
|
|
|
|
if (sessions) {
|
|
toggleBtn.removeAttribute('disabled')
|
|
toggleBtn.setAttribute('title', '')
|
|
toggleBtn.querySelector('.arrow-right').classList.remove('unvisible')
|
|
} else {
|
|
toggleBtn.setAttribute('disabled', true)
|
|
toggleBtn.setAttribute('title', 'aucune séance')
|
|
toggleBtn.querySelector('.arrow-right').classList.add('unvisible')
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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' });
|
|
},
|
|
getFilter(string) {
|
|
return string.split('—')[1]
|
|
}
|
|
}"
|
|
>
|
|
<div class="program-data"
|
|
x-data="{
|
|
tab: setInitialTab(),
|
|
filter: null
|
|
}"
|
|
x-init="
|
|
disableEmptySections()
|
|
$watch('tab', value => {
|
|
disableEmptySections()
|
|
})
|
|
"
|
|
>
|
|
|
|
|
|
<section class="filters">
|
|
<button
|
|
x-data="{title: 'Calendrier'}"
|
|
x-text="title"
|
|
:class="tab === title ? 'strong' : ''"
|
|
@click="
|
|
tab = title
|
|
|
|
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): ?>
|
|
<button
|
|
x-data="{
|
|
title: '<?= $filter ?>',
|
|
get filterTitle() {
|
|
return 'Calendrier — ' + this.title
|
|
}
|
|
}"
|
|
x-text="title"
|
|
:class="tab === filterTitle ? 'strong' : ''"
|
|
@click="
|
|
tab = filterTitle; filter = title
|
|
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('tab', tab);
|
|
window.history.pushState({}, '', url);
|
|
setTimeout(scrollToNextClosestDate, 100)
|
|
"
|
|
></button>
|
|
<?php endforeach ?>
|
|
</section>
|
|
<section class="page-title">
|
|
<h1 x-text="tab"></h1>
|
|
</section>
|
|
|
|
<!-- Programme -->
|
|
<template x-if="tab === 'Programme'">
|
|
<div class="program-content__events">
|
|
<section class="yellow">
|
|
<h2>Prochainement — <?= $page->children()->first()->title() ?></h2>
|
|
</section>
|
|
<?php snippet('events-grid', ['events' => $events['next'], 'columns' => 3]) ?>
|
|
<?php if ($events['previous']->count() > 0): ?>
|
|
<section class="yellow">
|
|
<h2>Événements passés</h2>
|
|
</section>
|
|
<?php snippet('events-grid', ['events' => $events['previous'], 'columns' => 3]) ?>
|
|
<?php endif ?>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Calendrier -->
|
|
<template x-if="tab.includes('Calendrier')">
|
|
<div class="program-content__events">
|
|
<section class="collapsable-sections">
|
|
<?php
|
|
$currentMonth = date('n');
|
|
foreach($currentSeasonSessions as $month => $sessions): ?>
|
|
<?php
|
|
$open = getMonthNumber($month) == $currentMonth || getMonthNumber($month) == $currentMonth + 1;
|
|
?>
|
|
<?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"
|
|
x-init="
|
|
scrollToNextClosestDate()
|
|
console.log(getFilter(tab))
|
|
"
|
|
>
|
|
<?php
|
|
foreach($sessions as $session):
|
|
$date = new DateTime($session['date']);
|
|
$formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::NONE, IntlDateFormatter::NONE);
|
|
$formattedDate = $formatter->formatObject($date, "d MMMM");
|
|
?>
|
|
<template x-if="tab === 'Calendrier' || ('<?= $session['categories'] ?>'.length > 0 && '<?= $session['categories'] ?>'.includes(getFilter(tab)))">
|
|
<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>
|
|
<p><?= $session['time'] ?></p>
|
|
</div>
|
|
<div class="session__info">
|
|
<p><strong><?= $session['title'] ?></strong></p>
|
|
<p><?= $session['authors'] ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="right-column">
|
|
<div class="mobile-group">
|
|
<div class="session__info">
|
|
<?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
|
|
<p>
|
|
<?php if (strlen($session['duration']) > 0): ?>
|
|
Durée : <?= $session['duration'] ?><br />
|
|
<?php endif ?>
|
|
<?php if (strlen($session['public']) > 0): ?>
|
|
<?= $session['public'] ?>
|
|
<?php endif ?>
|
|
</p>
|
|
<?php endif ?>
|
|
</div>
|
|
<div class="session__info">
|
|
<p><?= $session['place'] ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="session__info session__info--ticket">
|
|
<?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>
|
|
<?php else: ?>
|
|
<a class="ticket-link" title="Entrée libre" disabled tabindex="-1"><?php snippet('ticket') ?>Entrée libre</a>
|
|
<?php endif ?>
|
|
<?php elseif ($session['bookableStock'] == 0): ?>
|
|
<a class="ticket-link" title="Séance complète" disabled tabindex="-1"><?php snippet('ticket') ?>Complet</a>
|
|
<?php elseif ($session['bookableStock'] < (($session['totalStock'] / 100) * 25)): ?>
|
|
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Plus que quelques places !</a>
|
|
<?php else: ?>
|
|
<a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Billetterie</a>
|
|
<?php endif ?>
|
|
</div>
|
|
</div>
|
|
<a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus" tabindex="-1"></a>
|
|
</li>
|
|
</template>
|
|
<?php endforeach ?>
|
|
</ul>
|
|
<?php endslot() ?>
|
|
<?php endsnippet() ?>
|
|
<?php endif ?>
|
|
<?php endforeach ?>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<?php snippet('footer') ?>
|