Carousel done !

altf4arnold · Mar 31, 2024 · 58448e8 · 58448e8
1 parent 0af61db
commit 58448e8
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/static/animation.css b/static/animation.css
@@ -13,7 +13,7 @@
     margin: 0;
     position: absolute;
     top: 0;
-    transition: top 0.5s ease-in-out;
+    transition: top 1s ease-in-out;
 }
 
 /* Style for individual items in the carousel */

diff --git a/static/scroll.js b/static/scroll.js
@@ -1,17 +1,47 @@
-const carouselList = document.getElementById('carouselList');
-const items = carouselList.getElementsByClassName('carousel-item');
-const itemHeight = items[0].offsetHeight;
-const totalItems = items.length;
-let currentIndex = 0;
+// JavaScript for autoscrolling all carousels simultaneously
+const carouselContainers = document.querySelectorAll('.carousel-container');
+const carousels = [];
 
-function scrollCarousel() {
-    currentIndex++;
-    if (currentIndex === totalItems) {
-        currentIndex = 0;
+carouselContainers.forEach(container => {
+  const carouselList = container.querySelector('.carousel-list');
+  const items = carouselList.getElementsByClassName('carousel-item');
+  const itemHeight = items[0].offsetHeight;
+  const totalItems = items.length;
+  let currentIndex = 0;
+  let isResetting = false;
+
+  // Push each carousel object into an array
+  carousels.push({
+    carouselList,
+    itemHeight,
+    totalItems,
+    currentIndex,
+    isResetting
+  });
+});
+
+function scrollAllCarousels() {
+  carousels.forEach(carousel => {
+    carousel.currentIndex++;
+    if (carousel.currentIndex === carousel.totalItems) {
+      carousel.isResetting = true;
+      carousel.currentIndex = 0;
+      carousel.carouselList.style.transition = 'top 0.5s ease-in-out'; // Enable transition for smooth scrolling
+      carousel.carouselList.style.top = `${-carousel.itemHeight}px`; // Start scroll animation
+    }
+    if (carousel.isResetting && carousel.currentIndex === 0) {
+      // If resetting and back to the top, reset the top position instantly without animation
+      carousel.isResetting = false;
+      carousel.carouselList.style.transition = 'none'; // Disable transition for instant reset
+      carousel.carouselList.style.top = '0px'; // Reset to the top instantly
+      setTimeout(() => {
+        carousel.carouselList.style.transition = ''; // Re-enable transition
+      }, 50); // Add a slight delay before re-enabling transition to ensure it takes effect
     }
-    const displacement = -currentIndex * itemHeight;
-    carouselList.style.top = displacement + 'px';
+    const displacement = -carousel.currentIndex * carousel.itemHeight;
+    carousel.carouselList.style.top = `${displacement}px`;
+  });
 }
 
-// Set interval for autoscrolling (adjust timing as needed)
-const scrollInterval = setInterval(scrollCarousel, 2000);
+// Set interval for autoscrolling all carousels simultaneously
+setInterval(scrollAllCarousels, 3000);
diff --git a/templates/screen.html b/templates/screen.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/animation.css">
+    <meta http-equiv="refresh" content="30">
     <title>{{ airport["icao"] }} Departure Schedule</title>
 </head>
 <body>
@@ -42,8 +43,8 @@ <h1 class="pl-8 lg:pl-0 text-white text-2xl">{{ airport["name"] }} Airport Depar
         <tr class="bg-gray-100 border-b">
             {% endif %}
             <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-                <div class="carousel-container">
-                    <ul class="carousel-list" id="carouselList">
+                <div class="carousel-container carousel{{ i }}">
+                    <ul class="carousel-list" id="carouselList{{ i }}">
                         {% for ident in flight[i]["ident"] %}
                         <li class="carousel-item">{{ ident }}</li>
                         {% endfor %}