diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css index f3c1bf6..84cf312 100644 --- a/assets/css/src/calendar-strip.css +++ b/assets/css/src/calendar-strip.css @@ -27,6 +27,10 @@ transition: opacity 0.2s ease-in-out; } +.calendar-strip__day.active { + text-decoration: underline; +} + .calendar-strip__calendar-btn { border: var(--border); padding: 0.2rem 0.5rem; @@ -38,15 +42,15 @@ left: 0; top: 100%; width: 100%; - height: 0; + max-height: 0; padding: 0 var(--margin-body); background-color: #fff; z-index: -1; - transition: height .2s ease-in-out; + transition: max-height 0.3s ease-in-out; border-bottom: var(--border); } .calendar-strip__date.open { - height: 10rem; + max-height: 20rem; } .calendar-strip__sessions { @@ -54,7 +58,11 @@ } .calendar-strip__session { - display: flex; + display: grid; + grid-template-columns: repeat(5, 1fr); +} +.calendar-strip__session:not(:last-child) { + margin-bottom: 4rem; } .calendar-strip__session > div { diff --git a/site/config/routes/month-dates.php b/site/config/routes/month-dates.php index b0731ad..b32b9ea 100644 --- a/site/config/routes/month-dates.php +++ b/site/config/routes/month-dates.php @@ -7,6 +7,15 @@ function getCorrespondingSeasons($request) { ); } +function getTimeDifference($start, $end) { + $start = new DateTime($start); + $end = new DateTime($end); + + $difference = $end->diff($start); + + return $difference->h . "h" . $difference->i; +} + return [ 'pattern' => '/month-dates.json', 'method' => 'POST', @@ -20,18 +29,24 @@ return [ $correspondingSeasons = getCorrespondingSeasons($request); foreach ($correspondingSeasons->children() as $event) { + + $eventInfos = [ + "title" => $event->title()->value(), + "place" => $event->place()->value(), + "authors" => $event->authors()->value() + ]; + if ($event->isMapadoEvent() == 'false') { foreach ($event->sessions()->toStructure() as $session) { $sessionMonth = $session->date()->toDate('Y-m'); if ($sessionMonth === $requestMonth) { - $day = $session->date()->toDate('d'); - $dates[$day][] = [ + $day = intval($session->date()->toDate('d')); + $dates[$day][] = array_merge($eventInfos, [ "day" => $day, - "title" => $event->title()->value(), "time" => $session->time()->value(), "duration" => $event->duration()->value(), - ]; + ]); }; } } @@ -42,6 +57,8 @@ return [ "requestParams" => [], "requestFields" => [ ["name" => "title"], + ["name" => "address"], + ["name" => "slug"], [ "name" => "eventDateList", "subfields" => [ @@ -55,18 +72,27 @@ return [ $mapadoEvent = fetchMapadoEvent($request); + $duration = null; foreach ($mapadoEvent->eventDateList as $session) { $sessionMonth = substr($session->startDate, 0, 7); if ($sessionMonth === $requestMonth) { $day = intval(substr($session->startDate, 8, 2)); - $time = substr($session->startDate, 11, 5); + $startTime = substr($session->startDate, 11, 5); + $eventDateId = explode('/', $session->{'@id'}); + $eventDateId = $eventDateId[count($eventDateId) - 1]; - $dates[$day][] = [ + if (isset($session->endDate) && !$duration) { + $endTime = substr($session->endDate, 11 , 5); + $duration = getTimeDifference($startTime, $endTime); + } + + $dates[$day][] = array_merge($eventInfos, [ "day" => $day, - "title" => $event->title()->value(), - "time" => str_replace(':', 'h', $time) - ]; + "time" => str_replace(':', 'h', $startTime), + "duration" => $duration, + "ticketingUrl" => 'https://cdn-besancon.mapado.com/event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId + ]); } } diff --git a/site/snippets/calendar-strip.php b/site/snippets/calendar-strip.php index de0e5d5..a7e0116 100644 --- a/site/snippets/calendar-strip.php +++ b/site/snippets/calendar-strip.php @@ -24,8 +24,16 @@ }, handleDayHover() { - this.targetSessions = this.date; - if (this.date.length > 0) {this.open = true} else {this.open = false} + + if (this.date.length > 0) { + this.targetSessions = this.date; + this.open = true + } else { + setTimeout(() => { + this.targetSessions = this.date; + }, 100) + this.open = false + } } }" @@ -38,7 +46,7 @@