add ticketing url

assets/css/src/calendar-strip.css

@@ -34,10 +34,29 @@
 
 .calendar-strip__date {
   position: absolute;
+  overflow: hidden;
   left: 0;
   top: 100%;
   width: 100%;
-  height: 10rem;
-  background-color: var(--color-yellow);
+  height: 0;
+  padding: 0 var(--margin-body);
+  background-color: #fff;
   z-index: -1;
+  transition: height .2s ease-in-out;
+  border-bottom: var(--border);
+}
+.calendar-strip__date.open {
+  height: 10rem;
+}
+
+.calendar-strip__sessions {
+  padding: 2rem 0;
+}
+
+.calendar-strip__session {
+  display: flex;
+}
+
+.calendar-strip__session > div {
+  width: 100%;
 }

assets/css/src/generic.css

@@ -0,0 +1,3 @@
+body.progress * {
+  cursor: progress !important;
+}

assets/css/src/variables.css

@@ -6,6 +6,8 @@
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;
 
+  --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
   --margin-body: 3.86rem;
 
   --color-pink: #ed268f;

assets/css/style.css

@@ -1,5 +1,6 @@
 @import url("src/reset.css");
 @import url("src/variables.css");
 @import url("src/text.css");
+@import url("src/generic.css");
 @import url("src/nav.css");
 @import url("src/calendar-strip.css");

assets/js/calendar.js

@@ -39,6 +39,7 @@ async function getMapadoDates(monthNumb) {
     { name: 'ticketing', subfields: [
         { name: "@id", },
         { name: "title", },
+        { name: "slug", },
         { name: "venue", subfields: [
             { name: "@id" },
             { name: "address" },
@@ -70,14 +71,32 @@ async function getMapadoDates(monthNumb) {
   );
 
   const mapadoDates = eventDates.map((eventDate) => {
-    const date = eventDate.startDate.slice(0, 10);
-    const splittedDate = date.split("-");
-    const day = splittedDate[2];
     return {
-      day: day,
-      name: eventDate.ticketing.title,
+      day: getDay(eventDate),
+      title: eventDate.ticketing.title,
+      startTime: getStartTime(eventDate),
+      ticketingUrl: getTicketingUrl(eventDate)
     };
   });
 
   return mapadoDates;
 }
+
+function getDay(eventDate) {
+  const date = eventDate.startDate.slice(0, 10);
+  const splittedDate = date.split("-");
+  const day = splittedDate[2];
+  return day
+}
+
+function getStartTime(eventDate) {
+  const rawTime = eventDate.startDate.slice(11, 19);
+  const time = dayjs(`2000-01-01T${rawTime}`);
+  const formattedTime = time.format('HH[h]mm');
+  return formattedTime
+}
+
+function getTicketingUrl(eventDate) {
+  const baseUrl = "https://cdn-besancon.mapado.com/event/"
+  return baseUrl + eventDate.ticketing.slug
+}

site/snippets/calendar-strip.php

@@ -1,25 +1,35 @@
 <div 
   class="calendar-strip"
+  @mouseleave="open = false"
   x-data="{
     monthNumb: dayjs().month(),
     token: '<?= $site->mapadoToken() ?>',
     contractId: '<?= $site->mapadoContractId() ?>',
     dates: [],
+    targetSessions: [],
+    open: false,
 
     get monthName() {
       return dayjs().month(this.monthNumb).format('MMMM');
     },
 
     async updateDates() {
+      document.body.classList.toggle('progress')
       this.dates = getDatesInMonth(this.monthNumb);
 
       const mapadoDates = await getMapadoDates(this.monthNumb)
       mapadoDates.forEach(mapadoDate => {
         const day = parseInt(mapadoDate.day)
-        this.dates[day].push(mapadoDate.name)
+        this.dates[day].push(mapadoDate)
       })
 
       console.log('dates', this.dates)
+      document.body.classList.toggle('progress')
+    },
+
+    handleDayHover() {
+      this.targetSessions = this.date;
+      if (this.date.length > 0) {this.open = true} else {this.open = false}
     }
   }"
 
@@ -33,11 +43,28 @@
   <ul class="calendar-strip__days">
     <template x-for="(date, index) in dates">
       <li class="calendar-strip__day">
-        <button x-text="index" :disabled="date.length === 0 ? true : false" title="Voir les événements"></button>
+        <button 
+          x-text="index" 
+          :disabled="date.length === 0 ? true : false" 
+          :title="date.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+          @mouseenter="handleDayHover()"
+        ></button>
       </li>
     </template>
   </ul>
   <button class="calendar-strip__calendar-btn">calendrier</button>
-  <div class="calendar-strip__date"></div>
+  <div class="calendar-strip__date" :class="open ? 'open' : ''">
+    <ul class="calendar-strip__sessions">
+      <template x-for="session in targetSessions">
+        <li class="calendar-strip__session">
+          <div x-html="`${session.day} ${monthName}<br><br>${session.startTime}`"></div>
+          <div x-html="`<strong>${session.title}</strong>`"></div>
+          <div></div>
+          <div></div>
+          <div xhtml=""></div>
+        </li>
+      </template>
+    </ul>
+  </div>
 </div>