From f63e1f951fd44cf18696006b3a30979737b3d88a Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 7 Jan 2024 16:53:53 +0100
Subject: [PATCH] Enable animation correctly and randomly

---
 themes/tsc_vfl/assets/css/main.scss           |  5 ++-
 .../tsc_vfl/layouts/partials/page/header.html |  2 +-
 themes/tsc_vfl/static/js/slider.js            | 35 +++++++++++++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index 1ed6d50..8ecdf4f 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/themes/tsc_vfl/assets/css/main.scss
@@ -79,7 +79,10 @@ h1 {
                 position: absolute;
                 z-index: 0;
                 opacity: 1;
-                transition: opacity 2.5s ease-in-out;
+                
+                &.animated {
+                    transition: opacity 2.5s ease-in-out;
+                }
 
                 &.hidden {
                     opacity: 0;
diff --git a/themes/tsc_vfl/layouts/partials/page/header.html b/themes/tsc_vfl/layouts/partials/page/header.html
index 08701bd..60894a0 100644
--- a/themes/tsc_vfl/layouts/partials/page/header.html
+++ b/themes/tsc_vfl/layouts/partials/page/header.html
@@ -9,7 +9,7 @@
     </div>
     <div class="slider">
         <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
-        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="slider-img">
+        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
         <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">
diff --git a/themes/tsc_vfl/static/js/slider.js b/themes/tsc_vfl/static/js/slider.js
index cecef57..1f93d03 100644
--- a/themes/tsc_vfl/static/js/slider.js
+++ b/themes/tsc_vfl/static/js/slider.js
@@ -1,16 +1,31 @@
 $(function () {
     var index = 0
     const maxIndex = 5
-    const delay = 7000
-    function showImage(idx) {
-        // console.log("switching to index", idx)
+    const delay = 6000
+    const shuffeledIndices = []
+
+    for(let i=0; i<=maxIndex; i++){
+        shuffeledIndices.push(i)
+    }
+
+    // Shuffle by Fisher-Yates algorithm
+    for(let i=maxIndex; i>= 0; i--) {
+        const j = Math.floor(Math.random() * (i+1))
+        const tmp = shuffeledIndices[j]
+        shuffeledIndices[j] = shuffeledIndices[i]
+        shuffeledIndices[i] = tmp
+    }
+
+    function showImage(idxidx) {
+        const idx = shuffeledIndices[idxidx]
+        console.log("switching to index", idx, ' using idxidx ', idxidx)
         const imgs = $('#header .slider .slider-img')
         imgs.eq(idx).removeClass('hidden')
         imgs.filter((i, e) => {return i != idx}).addClass('hidden')
         const dots = $('#header .slider .dots .dot')
         dots.removeClass('active')
-        dots.eq(idx).addClass('active')
-        index = idx
+        dots.eq(idxidx).addClass('active')
+        index = idxidx
     }
     function getNextIndex() {
         const ret = index + 1
@@ -25,7 +40,15 @@ $(function () {
         showImage(newIdx)
         setTimeout(nextImage, delay)
     }
-    // setTimeout(nextImage, delay)
+
+    showImage(0)
+
+    // Start the animaions delayed to allow for showing the first image directly
+    setTimeout(() => {
+        $('#header .slider .slider-img').addClass('animated')
+    }, 150)
+
+    setTimeout(nextImage, delay)
     $('#header .slider .dots .dot').click(function (evt) {
         // console.log(evt)
         const newIdx = $(evt.target).data('index')