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>
 

package.json

@@ -24,6 +24,6 @@
     "@roots/sage": "6.12.2"
   },
   "dependencies": {
-    "caniuse-lite": "^1.0.30001504"
+    "caniuse-lite": "^1.0.30001513"
   }
 }

resources/views/index.blade.php

@@ -2,21 +2,17 @@
 
 @section('content')
 
-<style>
+  <div class="fixed left-0 top-48 h-2/3 w-8 flex flex-col-reverse" id="timeline_container"></div>
-  tr {
+
-    border-bottom: 1px solid #000;
+  <svg class="fixed left-0 top-48 h-4 -mt-1 w-10 fill-jlg-white cursor-grab active:cursor-grabbing" id="cursor">
-  }
+    <polygon points="32,4 32,6 40,10 40,0" />
-  tbody tr:last-child {
+    <rect width="32" height="2" y="4" />
-    border-bottom: none;
+  </svg>
-  }
+
-  td {
-      padding-left: 10px; /* ou margin-left: 10px; */
-    }
-</style>
 
   <table class="w-full bg-jlg-dark-blue flex justify-center">
     <thead>
-      <tr class="border-jlg-white h-64 top-0 w-full lg:w-2/3 fixed flex items-stretch justify-around text-left lg:text-xl uppercase bg-jlg-dark-blue">
+      <tr class="border-jlg-white border-b h-64 top-0 w-full lg:w-2/3 fixed flex items-stretch justify-around text-left lg:text-xl uppercase bg-jlg-dark-blue">
         <th class="flex items-end justify-start"></th>
         <th class="flex items-end justify-start pb-4">Images</th>
         <th class="flex items-end justify-start pb-4">Voix Off et In</th>
@@ -24,7 +20,7 @@
         <th class="flex items-end justify-start pb-4">Écrits</th>
       </tr>
     </thead>
-    <tbody class="w-full lg:w-2/3 block bg-jlg-dark-blue">
+    <tbody class="w-full mb-48 lg:w-2/3 block bg-jlg-dark-blue">
       <?php
         $args = array(
           'post_type' => 'post',
@@ -37,15 +33,31 @@
         $query = new WP_Query($args);
         if ($query->have_posts()) :
           while ($query->have_posts()) : $query->the_post();
-      ?>
+            if (get_post_meta(get_the_ID(), 'Minutage', true)) : ?>
-          <tr class="border-jlg-white font-authentic-60 w-full flex flex-row py-6">
+              <tr class="border-jlg-white border-b font-authentic-60 w-full flex flex-row py-6 isContentPart">
-            <td class="block text-sm pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Minutage', true) }}</td>
+                <td class="block text-sm pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Minutage', true) }}</td>
-            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Images', true) }}</td>
+                <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Images', true) }}</td>
-            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}</td>
+                <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}</td>
-            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}</td>
+                <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}</td>
-            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}</td>
+                <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}</td>
-          </tr>
+              </tr>
-       <?php
+            <?php elseif (get_post_meta(get_the_ID(), 'isMainPart', true)) : ?>
+              <tr class="border-jlg-white border-b font-authentic-90 uppercase w-full flex flex-row py-6 isMainPart">
+                <td class="pl-0 flex">
+                  <div class="w-2 h-5 bg-jlg-white mr-3"></div>
+                  <div>{{ get_post_meta(get_the_ID(), 'isMainPart', true) }}</div>
+                </td>
+              </tr>
+            <? elseif (get_post_meta(get_the_ID(), 'isSubPart', true)) : ?>
+              <tr class="border-jlg-white border-b font-authentic-60 w-full flex flex-row py-6 isSubPart">
+                <td class="pl-0 flex">
+                  <div class="w-2 h-5 bg-jlg-white mr-3"></div>
+                  <div>{{ get_post_meta(get_the_ID(), 'isSubPart', true) }}</div>
+                </td>
+              </tr>
+            <?php endif; ?>
+        
+      <?php
           endwhile;
         endif;
         wp_reset_postdata();

resources/views/layouts/app.blade.php

@@ -4,7 +4,7 @@
 
 @include('sections.header')
 
-  <main id="main" class="main bg-jlg-dark-blue w-full z-0 mt-64">
+  <main id="main" class="main bg-jlg-dark-blue w-full z-0 mt-56">
     @yield('content')
   </main>
 

yarn.lock

@@ -4007,10 +4007,15 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001504:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001504"
+  version "1.0.30001513"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz#eaf77e5c852dfa5f82c4924468c30602ac53744a"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz"
-  integrity sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q==
+  integrity sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww==
+
+caniuse-lite@^1.0.30001513:
+  version "1.0.30001513"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz#382fe5fbfb0f7abbaf8c55ca3ac71a0307a752e9"
+  integrity sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww==
 
 ccount@^2.0.0:
   version "2.0.1"