Ana Sayfa Keşfet Yardım
Giriş Yap
valentin_le_moign
/
partition-jlg-theme
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

debug et améliorations de la TL

Valentin 1 yıl önce
ebeveyn
56e1867e19
işleme
7c5625f363
22 değiştirilmiş dosya ile 447 ekleme ve 233 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 1 222
      index.php
  2. 0 0
      resources/fonts/fonts/.gitkeep
  3. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.otf
  4. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff
  5. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff2
  6. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.otf
  7. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff
  8. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff2
  9. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.otf
  10. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff
  11. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff2
  12. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.otf
  13. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff
  14. BIN
      resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff2
  15. BIN
      resources/fonts/fonts/libre-caslon/LibreCaslonText-Italic.woff
  16. BIN
      resources/fonts/fonts/libre-caslon/LibreCaslonText-Regular.woff
  17. BIN
      resources/fonts/fonts/libre-caslon/librecaslondisplay-regular.otf
  18. BIN
      resources/fonts/fonts/libre-caslon/librecaslontext-italic.otf
  19. BIN
      resources/fonts/fonts/libre-caslon/librecaslontext-regular.otf
  20. 436 1
      resources/scripts/app.js
  21. 5 5
      resources/views/index.blade.php
  22. 5 5
      resources/views/sections/footer.blade.php

+ 1 - 222
index.php
Dosyayı Görüntüle 

@@ -6,7 +6,7 @@
 
     <?php wp_head(); ?>
 
     <?php wp_head(); ?>
 
   </head>
 
   </head>
 
 
 
-  <body <?php body_class(); ?>>
 
+  <body <?php body_class(); ?> style="background-color: #010d19;">
 
     <?php wp_body_open(); ?>
 
     <?php wp_body_open(); ?>
 
     <?php do_action('get_header'); ?>
 
     <?php do_action('get_header'); ?>
 
 
 
@@ -16,227 +16,6 @@
 
 
 
     <script>
 
     <script>
 
       document.addEventListener('DOMContentLoaded', function () {
 
       document.addEventListener('DOMContentLoaded', function () {
 
-        // CLEANER LE TABLEAU
 
-        let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
 
-        minHeadTh.style.width = `${100 / 8}%`;
 
-
 
-        let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)");
 
-        for (let otherHeadTh of otherHeadThs) {
 
-          otherHeadTh.style.width = `${100 / 8 * 1.75}%`;
 
-        }
 
-        
-        let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
 
-        for (let minTableTd of minTableTds) {
 
-          if (minTableTd.parentNode.childElementCount != 1) {
 
-            minTableTd.style.width = `${100 / 8}%`;
 
-          }
 
-        }
 
-
 
-        let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
 
-        for (let otherTableTd of otherTableTds) {
 
-          otherTableTd.style.width = `${100 / 8 * 1.75}%`;
 
-        }
 
-        // HEADER AU SCROLL
 
-        let tableHead = document.querySelector("thead tr");
 
-        let tHeadHeight = tableHead.offsetHeight;
 
-        window.onscroll = () => {
 
-          tableHead.style.minHeight = `${document.querySelector("header").offsetHeight + 72}px`;
 
-          let scroll = window.pageYOffset;
 
-          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 = [];
 
-        let activePartIndex;
 
-
 
-        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();
 
-        
-        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();
 
-        });
 
-        
-        // 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;
 
-          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
 
-        // smoothscroll au clic sur une partie
 
       }, false);
 
       }, false);
 
     </script>
 
     </script>

+ 0 - 0
resources/fonts/fonts/.gitkeep
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff2
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff2
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff2
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff2
Dosyayı Görüntüle


BIN
resources/fonts/fonts/libre-caslon/LibreCaslonText-Italic.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/libre-caslon/LibreCaslonText-Regular.woff
Dosyayı Görüntüle


BIN
resources/fonts/fonts/libre-caslon/librecaslondisplay-regular.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/libre-caslon/librecaslontext-italic.otf
Dosyayı Görüntüle


BIN
resources/fonts/fonts/libre-caslon/librecaslontext-regular.otf
Dosyayı Görüntüle


+ 436 - 1
resources/scripts/app.js
Dosyayı Görüntüle 

@@ -4,7 +4,442 @@ import domReady from '@roots/sage/client/dom-ready';
 
  * Application entrypoint
 
  * Application entrypoint
 
  */
 
  */
 
 domReady(async () => {
 
 domReady(async () => {
 
-  // ...
 
+  // pour régler tous les pb au refresh quand la page est déjà scrollée
 
+  window.scrollTo(0, 0);
 
+
 
+  // CLEANER LE TABLEAU
 
+  let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
 
+  minHeadTh.style.width = `${100 / 8}%`;
 
+
 
+  let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)");
 
+  for (let otherHeadTh of otherHeadThs) {
 
+    otherHeadTh.style.width = `${100 / 8 * 1.75}%`;
 
+  }
 
+  
+  let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
 
+  for (let minTableTd of minTableTds) {
 
+    if (minTableTd.parentNode.childElementCount != 1) {
 
+      minTableTd.style.width = `${100 / 8}%`;
 
+    }
 
+  }
 
+
 
+  let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
 
+  for (let otherTableTd of otherTableTds) {
 
+    otherTableTd.style.width = `${100 / 8 * 1.75}%`;
 
+  }
 
+  // HEADER AU SCROLL
 
+  let tableHead = document.querySelector("thead tr");
 
+  let tHeadHeight = tableHead.offsetHeight;
 
+  tableHead.style.maxHeight = `${tHeadHeight}px`;
 
+  let headerHeight = document.querySelector("header").offsetHeight;
 
+  window.onscroll = () => {
 
+    tableHead.style.minHeight = `${headerHeight + 72}px`;
 
+    let scroll = window.scrollY;
 
+    let headerNewHeight = tHeadHeight - scroll;
 
+    if (headerNewHeight > 72) {
 
+      tableHead.style.height = `${headerHeight + headerNewHeight}px`;
 
+    } else {
 
+      tableHead.style.height = tableHead.style.minHeight;
 
+    }
 
+  }
 
+  // italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT
 
+/*         let tbody = document.querySelector('body main table tbody');
 
+  let tbodyContent = tbody.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.innerHTML = tbodyContent;
 
+*/
 
+
 
+  // titres de parties dans le tableau
 
+  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' : 'cf0118'},
 
+    {'blue1': '0101c4'},
 
+    {'blue2': '01049e'},
 
+    {'blue3': '010678'},
 
+    {'blue4': '010952'},
 
+    {'blue5': '00113c'},
 
+    {'yellow1': 'ade719'},
 
+    {'yellow2': '8cc700'},
 
+    {'yellow3': '74af00'},
 
+    {'yellow4': '5c9900'},
 
+    {'yellow5': '377600'},
 
+    {'pink1': 'cf0118'},
 
+    {'pink2': 'a10418'}
 
+  ];
 
+  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];
 
+  }
 
+
 
+  // set parts rectangles
 
+  function convertToSeconds(timeStr) {
 
+      let [hourStr, minStr] = timeStr.split('h');
 
+      if (!minStr) {
 
+          minStr = hourStr;
 
+          hourStr = '0';
 
+      }
 
+      minStr = minStr.replace('’', ':');
 
+      minStr = minStr.replace("'", ':');
 
+      const [min, sec] = minStr.split(':');
 
+
 
+      return parseInt(hourStr) * 3600 + parseInt(min) * 60 + parseInt(sec);
 
+  }
 
+
 
+  let partTimesNodes = document.querySelectorAll('body #app main tbody tr:not(.isContentPart) + tr:not(.isSubPart) td:first-of-type');
 
+  let partTimes = Array.from(partTimesNodes);
 
+  for (let i = 0; i < partTimes.length; i++) {
 
+    partTimes[i] = convertToSeconds(partTimes[i].innerText);
 
+  }
 
+  let lastTime = document.querySelectorAll('body #app main tbody tr:last-of-type td:first-of-type');
 
+  partTimes.push(convertToSeconds(lastTime[0].innerText));
 
+  let partDurations = [];
 
+  for (let i = 0; i < partTimes.length - 1; i++) {
 
+    partDurations.push(partTimes[i + 1] - partTimes[i]);
 
+  }
 
+  let totalTime = convertToSeconds(lastTime[0].innerText);
 
+
 
+  let tlContainer, tlContainerHeight;
 
+  var bodyHeight = document.querySelector('body').offsetHeight;
 
+  let partBlockHeights = [];
 
+  let activePartIndex = 0;
 
+
 
+  function getAllHeights() {
 
+    partBlockHeights = [];
 
+    tlContainer = document.querySelector('#timeline_container');
 
+    tlContainer.style.height = `calc(100vh - ${document.querySelector('header').offsetHeight}px - ${document.querySelector('footer').offsetHeight}px - 60px)`;
 
+    tlContainer.style.top = `${document.querySelector('header').offsetHeight + 30}px`;
 
+    tlContainerHeight = tlContainer.offsetHeight;
 
+    for (let partDuration of partDurations) {
 
+      partBlockHeights.push(partDuration / totalTime * tlContainerHeight);
 
+    }
 
+  }
 
+  getAllHeights();
 
+  
+  function drawFriseRects() {
 
+    for (let i = 0; i < partBlockHeights.length; i++) {
 
+      let partDiv = document.createElement('div');
 
+      partDiv.style.width = "22px";
 
+      partDiv.style.height = partBlockHeights[i] + "px";
 
+      partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
 
+      partDiv.style.borderBottom = "solid 1px #010d19";
 
+      partDiv.style.borderTop = "solid 1px #010d19";
 
+      partDiv.style.transition = "width 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];
 
+        if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
 
+          el.style.width = "32px";
 
+          toggleTitleHover(i, 'show');
 
+        }
 
+      });
 
+      tlContainer.children[0].addEventListener("mouseleave", function() {
 
+        let el = tlContainer.children[tlContainer.children.length - 1 - i];
 
+        if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
 
+          el.style.width = "22px";
 
+        }
 
+        toggleTitleHover(i, 'hide');
 
+      });
 
+      tlContainer.children[0].addEventListener("click", function() {
 
+        titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
+      });
 
+    }
 
+  }
 
+  drawFriseRects();
 
+
 
+  window.addEventListener('resize', () => {
 
+    bodyHeight = document.querySelector('body').offsetHeight;
 
+    while(tlContainer.lastChild) {
 
+      tlContainer.removeChild(tlContainer.lastChild);
 
+    }
 
+    getAllHeights();
 
+    drawFriseRects();
 
+  });
 
+  
+  // titres parties frise
 
+  let titreFriseEl = document.createElement('div');
 
+
 
+  let elements = Array.from(document.querySelectorAll('.isMainPart, .isSubPart'));
 
+
 
+  let mainWithoutSubAfter = [];
 
+  let mainWithSubAfter = [];
 
+  let subWithoutMainBefore = [];
 
+
 
+  let lastMain = null;
 
+
 
+  for (let i = 0; i < elements.length; i++) {
 
+    let current = elements[i];
 
+    let next = elements[i + 1];
 
+
 
+    if (current.classList.contains('isMainPart')) {
 
+      lastMain = current;
 
+      if (next && next.classList.contains('isSubPart')) {
 
+        mainWithSubAfter.push({ index: i, main: current.innerText, sub: next.innerText, el: elements[i] });
 
+      } else {
 
+        mainWithoutSubAfter.push({ index: i, main: current.innerText, sub: "", el: elements[i] });
 
+      }
 
+    }
 
+
 
+    if (current.classList.contains('isSubPart')) {
 
+      let prevMain = lastMain && lastMain.classList.contains('isMainPart') ? lastMain.innerText : "";
 
+      subWithoutMainBefore.push({ index: i, main: prevMain, sub: current.innerText, el: elements[i] });
 
+    }
 
+  }
 
+  
+  let titresFrise = [...mainWithoutSubAfter, ...mainWithSubAfter, ...subWithoutMainBefore];
 
+
 
+  titresFrise.sort((a, b) => a.index - b.index);
 
+
 
+  for (let i = titresFrise.length - 1; i > 0; i--) {
 
+    let current = titresFrise[i];
 
+    let next = titresFrise[i - 1];
 
+
 
+    if (current.main === next.main && current.sub === next.sub) {
 
+      titresFrise.splice(i, 1);
 
+    }
 
+  }
 
+
 
+  titreFriseEl.setAttribute('id', 'titres_frise');
 
+  titreFriseEl.innerHTML = `<p class="uppercase">${getCurrentTime(titresFrise[0].el)}</p><p>${titresFrise[0].main}</p><p class="font-authentic-60">${titresFrise[0].sub}</p>`;
 
+  titreFriseEl.style.fontSize = "0.9em";
 
+  titreFriseEl.style.zIndex = '0';
 
+  titreFriseEl.style.position = "fixed";
 
+  titreFriseEl.style.left = "60px";
 
+  titreFriseEl.style.width = "10vw";
 
+  titreFriseEl.style.lineHeight = "1.2";
 
+  titreFriseEl.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top - 8}px`;
 
+  let main = document.querySelector('#main');
 
+  main.prepend(titreFriseEl);
 
+
 
+  // make the cursor move on scroll
 
+  let cursor = document.querySelector('#cursor');
 
+  let isCursorGrabbed = false;
 
+  cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
 
+  let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
 
+  document.addEventListener("scroll", (event) => {
 
+    if (!isCursorGrabbed) {
 
+      scrollMovement();
 
+    }
 
+  });
 
+  // make the cursor draggable
 
+  let prevMousePos = 0;
 
+  cursor.addEventListener("mousedown", (event) => {
 
+    if (!isCursorGrabbed) {
 
+      event.preventDefault();
 
+      isCursorGrabbed = true;
 
+      prevMousePos = event.clientY;
 
+    }
 
+  });
 
+  window.addEventListener("mousemove", (event) => {
 
+    if (isCursorGrabbed) {
 
+      event.preventDefault();
 
+      let newPos = cursorPrevTranslateAmount + (event.clientY - prevMousePos);
 
+      if (event.clientY < tlContainerHeight + tlContainer.offsetTop && event.clientY > tlContainer.offsetTop) {
 
+        cursor.style.transform = `translateY(${newPos}px)`;
 
+        window.scrollBy(0, (event.clientY - prevMousePos) * (bodyHeight / tlContainerHeight));
 
+        cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
 
+      } 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);
 
+      }
 
+      prevMousePos = event.clientY;
 
+    }
 
+  });
 
+  window.addEventListener("mouseup", (event) => {
 
+    if (isCursorGrabbed) {
 
+      isCursorGrabbed = false;
 
+    }
 
+  });
 
+
 
+  function getSteps() {
 
+    let partRects = document.querySelectorAll('#timeline_container div');
 
+    let tlElSteps = [];
 
+    let total = 0;
 
+    for (let i = 0; i < partRects.length; i++) {
 
+      total = total + partRects[i].clientHeight;
 
+      if (i === 0) total = total - partRects[0].clientHeight;
 
+      tlElSteps.push(total);
 
+    }
 
+    let titles = document.querySelectorAll('.isMainPart, .isSubPart');
 
+    let scrollSteps = [];
 
+    for (let title of titles) {
 
+      let nextLine = title.nextElementSibling;
 
+      if (!nextLine?.classList.contains('isSubPart')) {
 
+        scrollSteps.push(title.offsetTop);
 
+      }
 
+    }
 
+    return({
 
+      'tlElSteps':tlElSteps,
 
+      'scrollSteps':scrollSteps
 
+    });
 
+  }
 
+
 
+  function drawFixedTitles() {
 
+    let tlContainer = document.querySelector('#timeline_container');
 
+    let fixedTitlesContainer = document.createElement('div');
 
+    fixedTitlesContainer.setAttribute('id', 'fixedTitlesContainer');
 
+    main.prepend(fixedTitlesContainer);
 
+    let index = 0;
 
+    for (let titreFrise of titresFrise) {
 
+      let titreFixedEl = document.createElement('div');
 
+      titreFixedEl.style.position = 'fixed';
 
+      titreFixedEl.style.zIndex = 1;
 
+      titreFixedEl.style.display = 'none';
 
+      titreFixedEl.style.opacity = '0';
 
+      titreFixedEl.style.transition = 'opacity 0.3s ease-out';
 
+      titreFixedEl.style.width = '10vw';
 
+      titreFixedEl.style.top = `${tlContainer.children[index].getBoundingClientRect().top - 8}px`;
 
+      titreFixedEl.style.left = '60px';
 
+      titreFixedEl.style.fontSize = '0.9em';
 
+      titreFixedEl.style.lineHeight = '1.2';
 
+      let titreFixedElContent = document.createElement('p');
 
+      titreFixedElContent.innerHTML = `<p>${titresFrise[titresFrise.length - index - 1].main}</p><p class="font-authentic-60">${titresFrise[titresFrise.length - index - 1].sub}</p>`;
 
+      titreFixedElContent.style.backgroundColor = '#010d19';
 
+      titreFixedEl.append(titreFixedElContent);
 
+      let topGradient = document.createElement('div');
 
+      topGradient.style.height = '10px';
 
+      topGradient.style.width = '100%';
 
+      topGradient.style.background = 'linear-gradient(to bottom, transparent, #010d19)';
 
+      titreFixedEl.prepend(topGradient);
 
+      let bottomGradient = document.createElement('div');
 
+      bottomGradient.style.height = '10px';
 
+      bottomGradient.style.width = '100%';
 
+      bottomGradient.style.background = 'linear-gradient(to top, transparent, #010d19)';
 
+      titreFixedEl.append(bottomGradient);
 
+      fixedTitlesContainer.prepend(titreFixedEl);
 
+      index++;
 
+    }
 
+  }
 
+  drawFixedTitles();
 
+
 
+  function toggleTitleHover(elIndex, state) {
 
+    let fixedTitlesContainer = document.querySelector('#fixedTitlesContainer');
 
+    let el = fixedTitlesContainer.children[elIndex];
 
+    if (state === 'show') {
 
+      el.style.display = 'block';
 
+      setTimeout(() => {
 
+        el.style.opacity = '1';
 
+      }, 1);
 
+    } else if (state === 'hide') {
 
+      el.style.opacity = '0';
 
+      setTimeout(() => {
 
+        el.style.display = 'none';
 
+      }, 300);
 
+    }
 
+  }
 
+
 
+  function cursorMovement() {
 
+  }
 
+  
+  let titres = document.querySelector('#titres_frise');
 
+  let prevPartIndex = 0;
 
+  let partRects = document.querySelectorAll('#timeline_container div');
 
+  partRects = Array.from(partRects);
 
+  partRects = partRects.reverse();
 
+  partRects[0].style.width = '32px';
 
+
 
+  function scrollMovement() {
 
+    let currentScroll = window.scrollY;
 
+    
+    let cursorTopValue = 0;
 
+    let tlPartHeight, tlPartBottom;
 
+
 
+    
+    for (let i = 0; i < getSteps().scrollSteps.length; i++) {
 
+      if ((currentScroll >= getSteps().scrollSteps[i] && currentScroll <= getSteps().scrollSteps[i + 1]) ||
 
+          (currentScroll >= getSteps().scrollSteps[i] && i === getSteps().scrollSteps.length - 1)) {
 
+        // titres et temps
 
+        titres.firstElementChild.innerText = getCurrentTime(titresFrise[i].el);
 
+        let mainEl = titres.children[1];
 
+        let subEl = titres.lastElementChild;
 
+        if (mainEl.innerText != titresFrise[i].main || subEl.innerText != titresFrise[i].sub) {
 
+          mainEl.innerText = titresFrise[i].main;
 
+          subEl.innerText = titresFrise[i].sub;
 
+          partRects[prevPartIndex].style.width = '22px';
 
+          partRects[i].style.width = '32px';
 
+        }
 
+        activePartIndex = i;
 
+        prevPartIndex = i;
 
+        
+        // curseur
 
+        for (let j = 0; j < partRects.length; j++) {
 
+          tlPartHeight = partRects[j].getBoundingClientRect().height
 
+          tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
 
+          cursorTopValue = tlPartBottom;
 
+          // get the amount of the current scrollpart scrolled
 
+          if (j === i) break;
 
+        }
 
+
 
+        let currentScrollPartBottom = getSteps().scrollSteps[i - 1] ? getSteps().scrollSteps[i - 1] : 0;
 
+        let currentScrollPartHeight;
 
+        if (getSteps().scrollSteps[i + 1]) {
 
+          currentScrollPartHeight = getSteps().scrollSteps[i + 1] - currentScrollPartBottom;
 
+        } else {
 
+          currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
 
+        }
 
+        let currentScrollSincePartBottom = currentScroll - currentScrollPartBottom;
 
+        let scrollPartProportion = currentScrollSincePartBottom / currentScrollPartHeight;
 
+
 
+        cursorTopValue = cursorTopValue + tlPartHeight * (tlPartHeight / tlPartHeight * (scrollPartProportion - 0.3));
 
+        
+        if (cursorTopValue > 0) {
 
+          cursor.style.transform = `translateY(${cursorTopValue}px)`;
 
+          titres.style.transform = `translateY(${cursorTopValue}px)`;
 
+        } else {
 
+          cursor.style.transform = `translateY(0px)`;
 
+          titres.style.transform = `translateY(0px)`;
 
+        }
 
+        
+        break;
 
+      }
 
+    }
 
+  }
 
+
 
+  function getCurrentTime(titleEl) {
 
+    let nextRow = titleEl.nextElementSibling;
 
+    while(nextRow) {
 
+      if (nextRow.offsetTop > window.scrollY &&
 
+          nextRow.classList.contains('isContentPart')) {
 
+        return(nextRow.firstElementChild.innerText);
 
+      }
 
+      nextRow = nextRow.nextElementSibling;
 
+    }
 
+  }
 
 });
 
 });
 
 
 
 /**
 
 /**

+ 5 - 5
resources/views/index.blade.php
Dosyayı Görüntüle 

@@ -2,17 +2,17 @@
 
 
 
 @section('content')
 
 @section('content')
 
 
 
-  <div class="fixed left-0 top-48 h-2/3 w-8 flex flex-col-reverse" id="timeline_container"></div>
 
+  <div class="fixed left-0 w-8 flex flex-col-reverse z-1" id="timeline_container"></div>
 
 
 
-  <svg class="fixed left-0 top-48 h-4 -mt-1 w-10 fill-jlg-white cursor-grab active:cursor-grabbing" id="cursor">
 
+  <svg class="fixed left-0 h-4 w-10 mt-[-4px] fill-jlg-white cursor-grab active:cursor-grabbing" id="cursor">
 
     <polygon points="32,4 32,6 40,10 40,0" />
 
     <polygon points="32,4 32,6 40,10 40,0" />
 
     <rect width="32" height="2" y="4" />
 
     <rect width="32" height="2" y="4" />
 
   </svg>
 
   </svg>
 
 
 
 
 
-  <table class="w-full bg-jlg-dark-blue flex justify-center">
 
+  <table class="w-full bg-jlg-dark-blue flex justify-center mt-[70px] z-0 pl-10 lg:pl-[10px]">
 
     <thead>
 
     <thead>
 
-      <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">
 
+      <tr class="border-jlg-white border-b h-64 top-0 w-full lg:w-2/3 fixed z-0 flex items-stretch justify-around text-left uppercase bg-jlg-dark-blue">
 
         <th class="flex items-end justify-start"></th>
 
         <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">Images</th>
 
         <th class="flex items-end justify-start pb-4">Voix Off et In</th>
 
         <th class="flex items-end justify-start pb-4">Voix Off et In</th>
 
@@ -34,7 +34,7 @@
 
         if ($query->have_posts()) :
 
         if ($query->have_posts()) :
 
           while ($query->have_posts()) : $query->the_post();
 
           while ($query->have_posts()) : $query->the_post();
 
             if (get_post_meta(get_the_ID(), 'Minutage', true)) : ?>
 
             if (get_post_meta(get_the_ID(), 'Minutage', true)) : ?>
 
-              <tr class="border-jlg-white border-b font-authentic-60 w-full flex flex-row py-6 isContentPart">
 
+              <tr class="border-jlg-light-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>

+ 5 - 5
resources/views/sections/footer.blade.php
Dosyayı Görüntüle 

@@ -1,4 +1,4 @@
 
-<footer class="fixed w-full h-1/12 py-4 bottom-0 bg-jlg-dark-blue border-t border-jlg-light-white flex justify-between">
 
+<footer class="fixed w-full h-[8vh] py-4 bottom-0 bg-jlg-dark-blue border-t border-jlg-light-white flex justify-between">
 
 <!--   @php(dynamic_sidebar('sidebar-footer'))-->
 
 <!--   @php(dynamic_sidebar('sidebar-footer'))-->
 
   <div class="text-sm">
 
   <div class="text-sm">
 
     <button class="px-4 py-2 rounded-md ml-6 underline underline-offset-8 hover:underline-offset-4 active:underline-offset-8">À PROPOS</button>
 
     <button class="px-4 py-2 rounded-md ml-6 underline underline-offset-8 hover:underline-offset-4 active:underline-offset-8">À PROPOS</button>
 
@@ -6,16 +6,16 @@
 
  </div>
 
  </div>
 
   <div class="mr-6 flex items-center">
 
   <div class="mr-6 flex items-center">
 
     <a href="https://www.thalim.cnrs.fr/?lang=fr" target="_blank" class="w-12 mr-4">
 
     <a href="https://www.thalim.cnrs.fr/?lang=fr" target="_blank" class="w-12 mr-4">
 
-      <img class="w-full h-auto" alt="thalim" src="@asset('images/logos/thalim.png')">
 
+      <img class="w-full h-auto" alt="thalim" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/thalim.png">
 
     </a>
 
     </a>
 
     <a href="http://www.univ-paris3.fr/" target="_blank" class="w-24 mr-4">
 
     <a href="http://www.univ-paris3.fr/" target="_blank" class="w-24 mr-4">
 
-      <img class="w-full h-auto" alt="sorbonne" src="@asset('images/logos/sorbonne.png')">
 
+      <img class="w-full h-auto" alt="sorbonne" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/sorbonne.png">
 
     </a>
 
     </a>
 
     <a href="https://www.cnrs.fr/fr" target="_blank" class="w-12 mr-4">
 
     <a href="https://www.cnrs.fr/fr" target="_blank" class="w-12 mr-4">
 
-      <img class="w-full h-auto" alt="cnrs" src="@asset('images/logos/cnrs.png')">
 
+      <img class="w-full h-auto" alt="cnrs" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/cnrs.png">
 
     </a>
 
     </a>
 
     <a href="https://www.huma-num.fr/" target="_blank" class="w-12">
 
     <a href="https://www.huma-num.fr/" target="_blank" class="w-12">
 
-      <img class="w-full h-auto" alt="humanum" src="@asset('images/logos/huma-num.png')">
 
+      <img class="w-full h-auto" alt="humanum" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/huma-num.png">
 
     </a>
 
     </a>
 
   </div>
 
   </div>
 
 </footer>
 
 </footer>