partition-jlg-theme/resources/scripts/app.js

import domReady from '@roots/sage/client/dom-ready';

/**
 * Application entrypoint
 */
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;
    }
  }
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);