début de l'ajout de la frise

index.php

@@ -27,7 +27,9 @@
         
         let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
         for (let minTableTd of minTableTds) {
-          minTableTd.style.width = `${100 / 8}%`;
+          if (minTableTd.parentNode.childElementCount != 1) {
+            minTableTd.style.width = `${100 / 8}%`;
+          }
         }
 
         let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
@@ -43,6 +45,128 @@
           let headerNewHeight = tHeadHeight - scroll;
           tableHead.style.height = `${headerNewHeight}px`;
         }
+        // italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT
+        let tbody = document.querySelectorAll('tbody');
+        let tbodyContent = tbody[0].innerHTML;
+        let asteriskCounter = 0;
+        for (let i = 0; i < tbodyContent.length; i++) {
+          if (tbodyContent[i] == "*") {
+            if (asteriskCounter % 2 == 0) {
+              tbodyContent = tbodyContent.substring(0, i) + '<span class="font-caslon italic">' + tbodyContent.substring(i + 1);
+            } else {
+              tbodyContent = tbodyContent.substring(0, i) + '</span>' + tbodyContent.substring(i + 1);
+            }
+            asteriskCounter++;
+          }
+        }
+        tbody[0].innerHTML = tbodyContent;
+
+
+        // titres de parties
+        let mainpartTitless = document.querySelectorAll('.isMainPart');
+        for (let mainpartTitles of mainpartTitless) {
+          if (mainpartTitles.nextElementSibling.classList.contains('isSubPart')) {
+            mainpartTitles.firstElementChild.firstElementChild.style.height = "1.5rem";
+            mainpartTitles.firstElementChild.style.marginBottom = "-0.25rem";
+            mainpartTitles.style.borderBottom = "0";
+            mainpartTitles.style.paddingBottom = "0";
+            mainpartTitles.nextElementSibling.style.paddingTop = "0";
+          }
+        }
+        // couleurs titres
+        let colors = [
+          {'red' : 'e4000c'},
+          {'blue1': '5dfffd'},
+          {'blue2': '0fe5f9'},
+          {'blue3': '11c1f8'},
+          {'blue4': '0779f1'},
+          {'blue5': '040bcb'},
+          {'yellow1': 'ffe113'},
+          {'yellow2': 'f4ff1b'},
+          {'yellow3': 'e2ff0c'},
+          {'yellow4': '93fe0b'},
+          {'yellow5': '17fe0b'},
+          {'pink1': 'e70060'},
+          {'pink2': 'f03cf3'}
+        ];
+        let titles = document.querySelectorAll('.isMainPart, .isSubPart');
+        let partTitles = [];
+        for (let title of titles) {
+          if (!title.nextElementSibling.classList.contains('isSubPart')) {
+            partTitles.push(title);
+          }
+        }
+        for (let i  = 0; i < partTitles.length; i++) {
+          if (partTitles[i].previousElementSibling?.classList.contains('isMainPart')) {
+            partTitles[i].previousElementSibling.firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
+          }
+          partTitles[i].firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
+        }
+        // scroll with cursor
+        // display parts rectangle on timeline
+
+        let tlContainer, tlContainerHeight, bodyHeight;
+        let partsHeight = [];
+        let prevHeight = 0;
+        let partBlockHeights = [];
+
+        function getAllHeights() {
+          tlContainer = document.querySelector('#timeline_container');
+          tlContainerHeight = tlContainer.offsetHeight;
+          bodyHeight = document.querySelector('tbody').offsetHeight;
+          let lastTitle = document.querySelectorAll('.isMainPart');
+          lastTitle = lastTitle[lastTitle.length - 1];
+          for (let i  = 0; i < partTitles.length; i++) {
+            let elTopFromParentTop = partTitles[i].offsetTop - document.querySelector('tbody').offsetTop;
+            let partSize = elTopFromParentTop - prevHeight;
+            prevHeight = elTopFromParentTop;
+            if (i != 0) {
+              partsHeight.push(partSize);
+            }
+          }
+          partsHeight.push(bodyHeight - lastTitle.offsetTop);
+          const partsHeightSum = partsHeight.reduce((partialSum, a) => partialSum + a, 0);
+          for (let partHeight of partsHeight) {
+            partBlockHeights.push(partHeight / bodyHeight * tlContainerHeight);
+          }
+        }
+        getAllHeights();
+        window.addEventListener("resize", (event) => {
+          getAllHeights();
+        });
+        
+        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;
+        document.addEventListener("scroll", (event) => {
+          scrollValue = window.scrollY;
+          let diffSize = scrollValue / bodyHeight * tlContainerHeight;
+          document.querySelector('#cursor').style.transform = `translateY(${diffSize}px)`;
+          cursorTop = cursorTop + diffSize;
+        });
+
+        // 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>