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;
position: absolute;
top: 0;
transition: top 0.5s ease-in-out;
transition: top 1s ease-in-out;
}
/* Style for individual items in the carousel */

56
static/scroll.js
View file

@ -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
}
const displacement = -currentIndex * itemHeight;
carouselList.style.top = displacement + 'px';
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 = -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);

5
templates/screen.html
View file

@ -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 @@
<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 %}