Fixed translation of tiles

index.html

@@ -24,6 +24,7 @@
         <h2 id="startTime">
             Mon parcours
         </h2>
+
         <div class="timeline" id="timeline">
             <div class="container left">
                 <div class="content">
@@ -113,7 +114,7 @@
 
         <h2 id="projetPerso">Mes projets personnels</h2>
 
-        <div id="project" class="project">
+        <div id="project" class="project" hidden="hidden">
 
             <div class="cards" id="cards">
                 <div class="project-container" id="project-card-0">
@@ -126,10 +127,10 @@
                     2
                 </div>
             </div>
-            <div class="left-arrow arrow" onclick="slide('left')">
+            <div class="left-arrow arrow" id="project-button-left">
                 <p>left arrow</p>
             </div>
-            <div class="right-arrow arrow" onclick="slide('right')">
+            <div class="right-arrow arrow" id="project-button-right">
                 <p>right arrow</p>
             </div>
 

src/css/style.css

@@ -146,7 +146,7 @@ a, a:visited{
     padding: 20px 30px;
     background-color: black;
     position: relative;
-    border-radius: 6px;
+    border-radius: 10px;
     border: solid white;
 }
 

src/js/annimateTimeLine.ts

@@ -49,14 +49,13 @@ function changeWidth()
 
 
     // get each maximum card size
-    let cardSizes: number[] = []
 
     // fill the cardSizes array with original height of each card
     function calculateCardSizes(){
         timeLineElm.style.height = `${0.8*window.screen.height}px`;
         console.log("taille de la fenetre: " + window.screen.height)
         console.log("taille de la barre" + timeLineElm.style.height);
-        cardSizes = []
+        let cardSizes: number[] = []
         for (let i = 0; i<nb_div; i++){
             let cardElem = document.getElementById("card"+i);
             cardElem.style.transform = 'scale(1)';
@@ -65,12 +64,10 @@ function changeWidth()
             let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
             cardSizes.push(cardSize);
         }
-
+        return cardSizes;
-
-
     }
 
-    calculateCardSizes()
+    let cardSizes: number[] = calculateCardSizes();
 
     function scaleAllCards(scrollVal: number){
         console.log(timeLineElm.style.height);
@@ -91,11 +88,14 @@ function changeWidth()
             let cardElem = document.getElementById("card"+i);
 
             let s = getSize(i, scrollVal*speedFactor);
-            cardElem.style.display = s<0.01 ? "none" : ""
+            //cardElem.style.display = s<0.01 ? "none" : ""
             cardElem.style.transform = `scale(${s})`
             cardElem.style.transform = `scale(${s})`
 
-            cardElem.style.height = `${cardSizes[i] * (s+Math.max(scaleOffset, 0))}px`
+            //cardElem.style.height = `${cardSizes[i] * (s+Math.max(scaleOffset, 0))}px`
+            cardElem.style.height = `${cardSizes[i] * s}px`
+            cardElem.style.paddingTop = `${Math.min(cardSizes[i] * s, 10)}px`
+            cardElem.style.paddingBottom = `${Math.min(cardSizes[i] * s, 10)}px`
             if (window.matchMedia("(max-width: 1000px)").matches)
                 cardElem.style.left = `${15*(2-s)}px` // 15px + the size missing to the circle
 
@@ -130,7 +130,7 @@ function changeWidth()
         if(spacer1.style.height.replace("px", "") < "100"){
             spacer1.style.height = - spacer1.getBoundingClientRect().bottom + "px";
         }
-
+        document.getElementById("project").hidden = false;
     }
 
 
@@ -161,6 +161,7 @@ function changeWidth()
 
             }
 
+            document.getElementById("project").hidden = true;
             scaleAllCards(scrollVal);
         }
         else {

src/js/projectSlide.ts

@@ -1,6 +1,10 @@
 let nbProjectCards = 3;
 
-function setupPage(){
+function setupPage2(){
+    let slideFunction = slideContainer();
+    document.getElementById("project-button-left").addEventListener("click", () => slideFunction("left") );
+    document.getElementById("project-button-right").addEventListener("click", () => slideFunction("right"));
+
     for (let i = 0; i < nbProjectCards; i++){
 
         for (let p = 0; p<i; p++) {
@@ -18,20 +22,40 @@ function setupPage(){
 }
 
 
+function slideContainer(){
 
+    let currentProject: number = 0;
+    const projectWidth = window.innerWidth;
     function slide(side: string){
-    let factor = side === "left" ? 1 : -1
+        let factor = side === "left" ? 1 : -1;
+        const nextCard: number = (currentProject - factor + nbProjectCards) % nbProjectCards; // Small hack to ensure that the value is always positive
 
-    for (let i = 0; i < nbProjectCards; i++){
+        console.log(`Sliding: ${side}. Current Card: ${currentProject}. Next Card: ${nextCard}`)
-        let cardElem = document.getElementById("project-card-" + i);
-        console.log(cardElem.style.translate)
-        let val = window.innerWidth * factor + parseInt(cardElem.style.translate === "" ? "0" : cardElem.style.translate) + "px"
-        console.log("sliding to:" +  val)
 
-        cardElem.style.translate = val
+        const CurrentCardElem = document.getElementById("project-card-" + currentProject);
-        cardElem.style.transition = "1s"
+        const NextCardElm = document.getElementById("project-card-" + nextCard);
+
+        setProjectCardToPosition(NextCardElm, factor);
+        setTimeout(() => {
+            moveProjectCardToPosition(CurrentCardElem, factor);
+            moveProjectCardToPosition(NextCardElm, 0);
+        }, 1)
+
+        currentProject = nextCard;
     }
 
+    function setProjectCardToPosition(elm: HTMLElement, direction: number){
+        elm.style.visibility = "hidden"
+        elm.style.translate = -1 * direction * projectWidth + "px";
+        elm.style.transition = "0s"
+    }
+    function moveProjectCardToPosition(elm: HTMLElement, direction: number){
+        elm.style.translate = direction * projectWidth + "px";
+        elm.style.transition = "1s"
+        elm.style.visibility = "visible"
+    }
+    return slide;
 }
 
-addEventListener("load", setupPage)
+
+addEventListener("load", setupPage2)