avancées sur la frise

2023-07-13 00:42:08 +02:00
parent 6746be702c
commit 56e1867e19
1 changed files with 91 additions and 21 deletions
@@ -109,6 +109,7 @@
        let partsHeight = [];
        let prevHeight = 0;
        let partBlockHeights = [];
+        let activePartIndex;

        function getAllHeights() {
          tlContainer = document.querySelector('#timeline_container');
@@ -131,42 +132,111 @@
          }
        }
        getAllHeights();
+        
+        function drawFriseRects() {
+          for (let i = 0; i < partBlockHeights.length; i++) {
+            let partDiv = document.createElement('div');
+            partDiv.style.width = "32px";
+            partDiv.style.height = partBlockHeights[i] + "px";
+            partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
+            partDiv.style.borderBottom = "solid 1.5px #010d19";
+            partDiv.style.opacity = "0.6";
+            partDiv.style.transition = "opacity 0.3s ease-out";
+            partDiv.style.cursor = "pointer";
+            tlContainer.prepend(partDiv);
+            tlContainer.children[0].addEventListener("mouseenter", function() {
+              let el = tlContainer.children[tlContainer.children.length - 1 - i];
+              el.style.opacity = "1";
+            });
+            tlContainer.children[0].addEventListener("mouseleave", function() {
+              let el = tlContainer.children[tlContainer.children.length - 1 - i];
+              if (Array.from(el.parentNode.children).indexOf(el) != activePartIndex) {
+                el.style.opacity = "0.7";
+              }
+            });
+          }
+        }
+        drawFriseRects();
+
        window.addEventListener("resize", (event) => {
          getAllHeights();
+          tlContainer.innerHTML = '';
+          drawFriseRects();
        });
        
-        for (let i = 0; i < partBlockHeights.length; i++) {
-          let partDiv = document.createElement('div');
-          partDiv.style.width = "32px";
-          partDiv.style.height = partBlockHeights[i] + "px";
-          partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
-          partDiv.style.borderBottom = "solid 1.5px #010d19";
-          partDiv.style.opacity = "0.7";
-          partDiv.style.transition = "opacity 0.3s ease-out";
-          partDiv.style.cursor = "pointer";
-          tlContainer.prepend(partDiv);
-          console.log(tlContainer.children[0].style.opacity)
-          tlContainer.children[0].addEventListener("mouseenter", function() {
-            tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "1";
-          });
-          tlContainer.children[0].addEventListener("mouseleave", function() {
-            tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "0.7";
-          });
-        }
        // make the cursor move on scroll
        let scrollValue, cursorTop;
+        let cursor = document.querySelector('#cursor');
+        cursor.style.transform = `translateY(${window.scrollY / bodyHeight * tlContainerHeight}px)`;
+        getActivePart();
        document.addEventListener("scroll", (event) => {
          scrollValue = window.scrollY;
          let diffSize = scrollValue / bodyHeight * tlContainerHeight;
-          document.querySelector('#cursor').style.transform = `translateY(${diffSize}px)`;
+          cursor.style.transform = `translateY(${diffSize}px)`;
          cursorTop = cursorTop + diffSize;
+          getActivePart();
        });
+        // make the cursor draggable
+        let isCursorGrabbed = false;
+        let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
+        let prevCursorPos = 0;
+        cursor.addEventListener("mousedown", (event) => {
+          if (!isCursorGrabbed) {
+            event.preventDefault();
+            isCursorGrabbed = true;
+            prevCursorPos = event.clientY;
+          }
+        });
+        window.addEventListener("mousemove", (event) => {
+          if (isCursorGrabbed) {
+            event.preventDefault();
+            let newPos = cursorPrevTranslateAmount + (event.clientY - prevCursorPos);
+            if (event.clientY < tlContainerHeight + tlContainer.offsetTop && event.clientY > tlContainer.offsetTop) {
+              cursor.style.transform = `translateY(${newPos}px)`;
+              window.scrollBy(0, (event.clientY - prevCursorPos) * (bodyHeight / tlContainerHeight));
+              cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
+              getActivePart();
+            } else if (event.clientY <= tlContainer.offsetTop) {
+              cursor.style.transform = "translateY(0px)";
+              window.scroll(0, 0);
+              cursorPrevTranslateAmount = 0;
+            } else if (event.clientY >= tlContainerHeight + tlContainer.offsetTop) {
+              cursor.style.transform = `translateY(${tlContainerHeight}px)`;
+              window.scroll(0, bodyHeight);         
+              cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
+            }
+            prevCursorPos = event.clientY;
+          }
+        });
+        window.addEventListener("mouseup", (event) => {
+          if (isCursorGrabbed) {
+            isCursorGrabbed = false;
+          }
+        });
+        // lighten active part rectangle
+        function getActivePart() {
+          let partRects = tlContainer.children;
+          let cursorYPos = cursor.getBoundingClientRect().top + cursor.clientHeight / 2;
+          if (cursorYPos >= Object.values(partRects)[0].getBoundingClientRect().bottom) {
+            for (let partRect of partRects) {
+              partRect.style.opacity = 0.6;
+            }
+            Object.values(partRects)[0].style.opacity = 1;
+          } else {
+            for (let i = 0; i < partRects.length; i++) {
+              if (cursorYPos >= partRects[i].getBoundingClientRect().top && cursorYPos < partRects[i].getBoundingClientRect().top + partRects[i].clientHeight) {
+                partRects[i].style.opacity = 1;
+                activePartIndex = i;
+              } else {
+                partRects[i].style.opacity = 0.6;
+              }
+            }
+          }
+        }

        // TODO
        // ajouter le titre collé au curseur et le temps total en bas
-        // drag and drop curseur
        // smoothscroll au clic sur une partie
-        // détection partie à allumer
      }, false);
    </script>