From d3aceced88f193c77e5179e7e153aac8e23d1aa5 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Mon, 15 Jan 2024 23:48:03 +0100
Subject: [PATCH] Frontend: Added updateTimeLine() which reset the position of
 the slidestring array each time a resizing occurs. Updated CSS so that the
 sidebar is not shown if in mobile mode.

---
 frontend/src/lib/components/slideshow.svelte | 313 +++++++++++--------
 frontend/src/lib/css/cv.css                  |  43 ++-
 frontend/src/lib/js/slideshow.js             |  10 +
 frontend/src/routes/+page.svelte             |   8 +-
 4 files changed, 222 insertions(+), 152 deletions(-)

diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte
index 0c805c2..b207b09 100644
--- a/frontend/src/lib/components/slideshow.svelte
+++ b/frontend/src/lib/components/slideshow.svelte
@@ -1,153 +1,190 @@
 <script>
-    import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
-    import "$lib/css/slideshow.css";
-    import { onMount } from "svelte";
-    import {
-        createTimeLine,
-        slideContainerCount,
-        slideTimelineCount,
-        slideStringCount,
-    } from "$lib/js/slideshow.js";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
+  import "$lib/css/slideshow.css";
+  import { onMount } from "svelte";
+  import {
+    createTimeLine,
+    updateTimeLine,
+    slideContainerCount,
+    slideTimelineCount,
+    slideStringCount,
+  } from "$lib/js/slideshow.js";
 
-    // Exported values
-    export let data = [];
-    export let type;
-    export let timeline = false;
-    export let reverse = false;
-    if(reverse) {
-        data = data.reverse();
-    }
+  // Exported values
+  export let data = [];
+  export let type;
+  export let timeline = false;
+  export let reverse = false;
+  if (reverse) {
+    data = data.reverse();
+  }
 
-    // Slideshow global variables
+  // Resizing variables
+  let resizing = false;
 
-    let slideshow_index = 0;
-    let slideshow_hidden = [];
+  // Slideshow global variables
+  let slideshow_index = 0;
+  let slideshow_hidden = [];
 
-    let slideshowTimeline;
-    let slideshowElements;
+  let slideshowTimeline;
+  let slideshowElements;
+  let slideshowBubbles;
 
-    // Timeline global variables
-    let slideshow;
-    let bubbles = [];
-    onMount(() => {
-        /*    Slideshow    */
-        //global writer count
-        const currentSlideCount = $slideContainerCount;
-        // Sliced array from currentSlideCount to data.length
-        slideshowElements = Array.from(
-            document.querySelectorAll(".slide-container")
-        ).slice(currentSlideCount, currentSlideCount + data.length);
-        // Updating with the current length
-        slideContainerCount.update((value) => {
-            return value + data.length;
-        });
-
-        if (timeline) {
-            /*    SlideTimeline    */
-            //global writer count
-            const currentTimelineCount = $slideTimelineCount;
-            // Creating the string between the bubbles
-            const slideshowBubbles = Array.from(
-                document.querySelectorAll(".slide-bubble")
-            ).slice(currentTimelineCount, currentTimelineCount + data.length);
-
-            // Creating strings
-            for (const element of slideshowBubbles) {
-                bubbles.push({
-                    left: element.offsetLeft,
-                    top: element.offsetTop,
-                });
-            }
-            const stringTimelineElements = createTimeLine(bubbles);
-            for (const div of stringTimelineElements) {
-                slideshow.appendChild(div);
-            }
-            // Updating with the current length
-            slideTimelineCount.update((value) => {
-                return value + data.length;
-            });
-            //global writer count
-            const currentStringCount = $slideStringCount;
-            // Sliced array from currentTimelineCount to data.length
-            slideshowTimeline = Array.from(
-                document.querySelectorAll(".slide-string")
-            ).slice(
-                currentStringCount,
-                currentStringCount + stringTimelineElements.length
-            );
-            // Updating with the current length
-            slideStringCount.update((value) => {
-                return value + stringTimelineElements.length;
-            });
-        }
+  // Timeline global variables
+  let slideshow;
+  let bubbles = [];
+  onMount(() => {
+    /*    Slideshow    */
+    //global writer count
+    const currentSlideCount = $slideContainerCount;
+    // Sliced array from currentSlideCount to data.length
+    slideshowElements = Array.from(
+      document.querySelectorAll(".slide-container"),
+    ).slice(currentSlideCount, currentSlideCount + data.length);
+    // Updating with the current length
+    slideContainerCount.update((value) => {
+      return value + data.length;
     });
 
-    function slideCards() {
-        // Set or reset slideshow index, hidden array and timeling.
-        if (slideshow_index >= data.length - 1) {
-            slideshow_hidden = [];
-            slideshow_index = 0;
-            if (timeline) {
-                for (const timeline of slideshowTimeline) {
-                    timeline.style.backgroundColor = "";
-                }
-            }
-        } else {
-            slideshow_hidden.push(slideshow_index);
-            slideshow_index++;
-        }
+    if (timeline) {
+      /*    SlideTimeline    */
+      //global writer count
+      const currentTimelineCount = $slideTimelineCount;
+      // Creating the string between the bubbles
+      slideshowBubbles = Array.from(
+        document.querySelectorAll(".slide-bubble"),
+      ).slice(currentTimelineCount, currentTimelineCount + data.length);
 
-        // Incrementing the transformValue for each element
-        let transformValue = 0;
-        for (const id of slideshow_hidden) {
-            transformValue += slideshowElements[id].clientWidth;
-        }
-
-        // Translating elements
-        console.log(slideshowTimeline)
-        slideshowElements.forEach((element, id) => {
-            /* Slideshow translating*/
-            let newtransformValue = transformValue;
-            if (slideshow_hidden.includes(id)) {
-                // 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
-                newtransformValue *= 1.1;
-            }
-            element.style.transform = `translateX(-${newtransformValue}px)`;
-
-            /* Slideshow Timeline trnaslating */
-            if (timeline) {
-                if (slideshowTimeline[id] != undefined) {
-                    slideshowTimeline[
-                        id
-                    ].style.transform = `translateX(-${transformValue}px)`;
-                    if (slideshow_hidden.includes(id)) {
-                        slideshowTimeline[id].style.backgroundColor =
-                            "var(--color-background)";
-                    }
-                }
-            }
+      // Creating strings
+      for (const element of slideshowBubbles) {
+        bubbles.push({
+          left: element.offsetLeft,
+          top: element.offsetTop,
         });
+      }
+
+      createTimelineStrings();
     }
+  });
+
+  function slideCards() {
+    // Set or reset slideshow index, hidden array and timeling.
+    if (slideshow_index >= data.length - 1) {
+      resetSlideCards();
+    } else {
+      slideshow_hidden.push(slideshow_index);
+      slideshow_index++;
+    }
+
+    // Incrementing the transformValue for each element
+    let transformValue = 0;
+    for (const id of slideshow_hidden) {
+      transformValue += slideshowElements[id].clientWidth;
+    }
+
+    // Translating elements
+    slideshowElements.forEach((element, id) => {
+      /* Slideshow translating*/
+      let newtransformValue = transformValue;
+      if (slideshow_hidden.includes(id)) {
+        // 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
+        newtransformValue *= 1.1;
+      }
+      element.style.transform = `translateX(-${newtransformValue}px)`;
+
+      /* Slideshow Timeline translating */
+      if (timeline) {
+        if (slideshowTimeline[id] != undefined) {
+          slideshowTimeline[id].style.transform =
+            `translateX(-${transformValue}px)`;
+          if (slideshow_hidden.includes(id)) {
+            slideshowTimeline[id].style.backgroundColor =
+              "var(--color-background)";
+          }
+        }
+      }
+    });
+  }
+
+  function resetSlideCards() {
+    return new Promise((resolve) => {
+      slideshow_hidden = [];
+      slideshow_index = 0;
+      for (const element of slideshowElements) {
+        element.style.transform = "";
+      }
+      if (timeline) {
+        for (const timeline of slideshowTimeline) {
+          timeline.style.backgroundColor = "";
+          timeline.style.transform = "";
+        }
+      }
+
+      resolve();
+    });
+  }
+
+  function createTimelineStrings() {
+    const stringTimelineElements = createTimeLine(bubbles);
+    for (const div of stringTimelineElements) {
+      slideshow.appendChild(div);
+    }
+    // Updating with the current length
+    slideTimelineCount.update((value) => {
+      return value + data.length;
+    });
+
+    //global writer count
+    const currentStringCount = $slideStringCount;
+    /* Sliced array from currentTimelineCount to data.length
+        Everytime a slideshow created the slide string, the queryselector all will get all the elements
+        We do not want that and only want the slide-string we are interested in
+        Starting from the oldest count, finishing by our actual length */
+    slideshowTimeline = Array.from(
+      document.querySelectorAll(".slide-string"),
+    ).slice(
+      currentStringCount,
+      currentStringCount + stringTimelineElements.length,
+    );
+    // Updating with the current length
+    slideStringCount.update((value) => {
+      return value + stringTimelineElements.length;
+    });
+  }
+
+  async function changeSize() {
+    if (timeline && !resizing) {
+      resizing = true;
+
+      await resetSlideCards();
+      await new Promise(resolve => setTimeout(resolve, 400));
+      updateTimeLine(slideshowTimeline, slideshowBubbles);
+      resizing = false;
+      //global writer count
+    }
+  }
 </script>
 
+<svelte:window on:resize={changeSize} />
+
 <div class="slideshow" bind:this={slideshow}>
-    <button class="slideshow_btn" on:click={slideCards}>
-        <div>
-            <SvgIcon
-                size="45"
-                path={slideshow_index >= data.length - 1
-                    ? mdiChevronLeft
-                    : mdiArrowRight}
-                type="mdi"
-            />
-        </div>
-    </button>
-    {#each data as selected_data, index (index)}
-        <svelte:component
-            this={type}
-            data={selected_data}
-            active={index == slideshow_index ? true : false}
-        />
-    {/each}
+  <button class="slideshow_btn" on:click={slideCards}>
+    <div>
+      <SvgIcon
+        size="45"
+        path={slideshow_index >= data.length - 1
+          ? mdiChevronLeft
+          : mdiArrowRight}
+        type="mdi"
+      />
+    </div>
+  </button>
+  {#each data as selected_data, index (index)}
+    <svelte:component
+      this={type}
+      data={selected_data}
+      active={index == slideshow_index ? true : false}
+    />
+  {/each}
 </div>
diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index 1cd87a7..97cc9c0 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -11,21 +11,38 @@ html {
     flex-direction: row;
 }
 
-.sidebar {
-    position: absolute;
-    width: 16rem;
-    height: 75rem;
-    background-color: var(--color-special);
-    z-index: 2;
-    transition: all 0s ease 0s;
+
+@media screen and (min-width: 1200px)
+{
+    .sidebar {
+        position: absolute;
+        width: 16rem;
+        height: 75rem;
+        background-color: var(--color-special);
+        z-index: 2;
+        transition: all 0s ease 0s;
+    }
+
+    .fake-sidebar {
+        width: 100%;
+        flex-basis: 20rem;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+        background-color: var(--color-special);
+        z-index: 1;
+    }
 }
 
-.fake-sidebar {
-    width: 100%;
-    flex-basis: 20rem;
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-    background-color: var(--color-special);
-    z-index: 1;
+@media screen and (max-width: 1200px)
+{
+    .sidebar {
+        position: absolute;
+        width: 16rem;
+        height: 75rem;
+        background-color: var(--color-special);
+        z-index: 2;
+        transition: all 0s ease 0s;
+        visibility: hidden;
+    }
 }
 
 .profile-picture-container {
diff --git a/frontend/src/lib/js/slideshow.js b/frontend/src/lib/js/slideshow.js
index 786ed2e..8734142 100644
--- a/frontend/src/lib/js/slideshow.js
+++ b/frontend/src/lib/js/slideshow.js
@@ -16,6 +16,16 @@ export function createTimeLine(positionsArray) {
   return divArray;
 }
 
+export function updateTimeLine(slideStringArray, positionsArray) {
+  for (let i = 0; i < positionsArray.length - 1; i++)
+  {
+    const left = positionsArray[i].offsetLeft + (2.5 * 16);
+    const top = positionsArray[i].offsetTop + 16;
+    slideStringArray[i].style.left = `${left}px`;
+    slideStringArray[i].style.top = `${top}px`;
+  }
+}
+
 export let slideContainerCount = writable(0);
 export let slideTimelineCount = writable(0);
 export let slideStringCount = writable(0);
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 79e0e35..952b3d8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -64,9 +64,15 @@
 			sidebar.style.top = '';
 		}
 	}
+
+	// Mobile check
+	$: innerWidth = 0;
+	function mobileCheck() {
+		//console.log(innerWidth);
+	}
 </script>
 
-<svelte:window bind:scrollY bind:innerHeight on:scroll={sidebarScrollingHandler} />
+<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
 
 {#if data.status == 0}
 	<div class="container-cv">