Skyscreen/flight-screen-info
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Carousel done !

Browse source
This commit is contained in:
Arnold Dechamps 2024-04-01 01:42:34 +02:00
parent 0af61db7f2
commit 58448e8d0a
No known key found for this signature in database
GPG key ID: AE66543374E41C89
3 changed files with 47 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/animation.css
View file

@ -13,7 +13,7 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 0; top: 0;
transition: top 0.5s ease-in-out; transition: top 1s ease-in-out;
} }
/* Style for individual items in the carousel */ /* Style for individual items in the carousel */

56
static/scroll.js
View file

@ -1,17 +1,47 @@
const carouselList = document.getElementById('carouselList'); // JavaScript for autoscrolling all carousels simultaneously
const items = carouselList.getElementsByClassName('carousel-item'); const carouselContainers = document.querySelectorAll('.carousel-container');
const itemHeight = items[0].offsetHeight; const carousels = [];
const totalItems = items.length;
let currentIndex = 0;
function scrollCarousel() { carouselContainers.forEach(container => {
currentIndex++; const carouselList = container.querySelector('.carousel-list');
if (currentIndex === totalItems) { const items = carouselList.getElementsByClassName('carousel-item');
currentIndex = 0; 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
} }
const displacement = -currentIndex * itemHeight; if (carousel.isResetting && carousel.currentIndex === 0) {
carouselList.style.top = displacement + 'px'; // 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 = -carousel.currentIndex * carousel.itemHeight;
carousel.carouselList.style.top = `${displacement}px`;
});
} }
// Set interval for autoscrolling (adjust timing as needed) // Set interval for autoscrolling all carousels simultaneously
const scrollInterval = setInterval(scrollCarousel, 2000); setInterval(scrollAllCarousels, 3000);

5
templates/screen.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/animation.css"> <link rel="stylesheet" href="/static/animation.css">
<meta http-equiv="refresh" content="30">
<title>{{ airport["icao"] }} Departure Schedule</title> <title>{{ airport["icao"] }} Departure Schedule</title>
</head> </head>
<body> <body>
@ -42,8 +43,8 @@
<tr class="bg-gray-100 border-b"> <tr class="bg-gray-100 border-b">
{% endif %} {% endif %}
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"> <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
<div class="carousel-container"> <div class="carousel-container carousel{{ i }}">
<ul class="carousel-list" id="carouselList"> <ul class="carousel-list" id="carouselList{{ i }}">
{% for ident in flight[i]["ident"] %} {% for ident in flight[i]["ident"] %}
<li class="carousel-item">{{ ident }}</li> <li class="carousel-item">{{ ident }}</li>
{% endfor %} {% endfor %}