From ea052d22f0f12100e447e8087aec4b3a66182ffe Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 30 Aug 2024 15:39:40 +0200
Subject: [PATCH] calendar strip add animation

---
 assets/css/src/generic.css       | 18 +++++++++++++++++-
 site/snippets/calendar-strip.php | 11 +++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index 352a47d..841c811 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -2,7 +2,23 @@
   display: none;
 }
 
-body.progress * {
+@keyframes loading {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.calendar-strip__days.progress {
+  cursor: progress !important;
+}
+.calendar-strip__days.progress > li {
+  animation: loading 0.3s;
+}
+.calendar-strip__days.progress button {
   cursor: progress !important;
 }
 
diff --git a/site/snippets/calendar-strip.php b/site/snippets/calendar-strip.php
index e2159e1..26ec518 100644
--- a/site/snippets/calendar-strip.php
+++ b/site/snippets/calendar-strip.php
@@ -15,15 +15,14 @@
     },
 
     async updateDates() {
-      document.body.classList.toggle('progress')
-      this.dates = getDatesInMonth(this.monthNumb);
-
-
+      const daysNode = document.querySelector('.calendar-strip__days')
+      daysNode.classList.toggle('progress')
       
+      this.dates = getDatesInMonth(this.monthNumb);      
       this.dates = await getMergedDates(this.monthNumb, this.dates)
 
       console.log('Merged dates', this.dates)
-      document.body.classList.toggle('progress')
+      document.querySelector('.calendar-strip__days').classList.toggle('progress')
     },
 
     handleDayHover() {
@@ -48,7 +47,7 @@
   </div>
   <ul class="calendar-strip__days">
     <template x-for="(date, index) in dates">
-      <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''">
+      <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
         <button 
           :class="date.full === today ? 'today' : ''"
           :disabled="date.sessions.length === 0 ? true : false"