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

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

/**
 * Application entrypoint
 */
domReady(async () => {

  window.addEventListener('load', function() {
    setTimeout(function() {
      window.scrollTo(0, 0);
    }, 0);
  });

  window.addEventListener('resize', function() {
    setTimeout(function() {
      window.scrollTo(0, 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}%`;
  }

  let editButtons = document.querySelectorAll(".edit-button");
  for (let editButton of editButtons) {
    let editContainer = editButton.parentElement;
    editContainer.style.height = `${editContainer.previousElementSibling.offsetHeight}px`;
  }
  // 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;
    }
  }

  // C'EST LA POUR LES PRIVACY POLICY
  // texte d'explication du login popup
  // et privacy policy
  let loginPopupText = document.getElementById('content_login_popup');
  let privacyText = document.getElementById('content_privacy').innerHTML;
  loginPopupText = loginPopupText.innerText;
  let loginPopupTextWrapper = document.getElementsByClassName('xoo-el-sidebar');
  if (loginPopupTextWrapper[0]) {
    loginPopupTextWrapper[0].innerHTML = `<p>${loginPopupText}</p>`;
  }
  let policyDropdown = document.createElement('div');
  policyDropdown.style.width = "100%";
  policyDropdown.style.cursor = "pointer";
  policyDropdown.style.fontWeight = "bold";
  policyDropdown.style.display = "flex";
  policyDropdown.style.justifyContent = "space-between";
  policyDropdown.style.backgroundColor = "white";
  policyDropdown.style.padding = "20px 30px";
  let policyDropdownTitle = document.createElement('p');
  policyDropdownTitle.style.padding = "0";
  let policyDropdownPlus = document.createElement('p');
  policyDropdownPlus.style.padding = "0";
  policyDropdownPlus.innerText = '+';
  policyDropdownTitle.innerText = "Politique de confidentialité";
  policyDropdown.appendChild(policyDropdownTitle);
  policyDropdown.appendChild(policyDropdownPlus);
  let privacyPolicyContent = document.createElement('div');
  privacyPolicyContent.innerHTML = privacyText;
  privacyPolicyContent.style.width = "100%";
  privacyPolicyContent.style.padding = "0px";
  let policyParagraphs = privacyPolicyContent.querySelectorAll('p, h2');
  for (let policyParagraph of policyParagraphs) {
    policyParagraph.style.padding = '0';
    policyParagraph.style.marginBottom = '15px';
  }
  privacyPolicyContent.style.height = "0px";
  privacyPolicyContent.style.overflow = "hidden";
  let policyOpen = false;
  policyDropdown.addEventListener('click', togglePolicy);
  if (loginPopupTextWrapper[0]) {
    loginPopupTextWrapper[0].appendChild(policyDropdown);
    loginPopupTextWrapper[0].style.overflowY = "scroll";
    loginPopupTextWrapper[0].appendChild(privacyPolicyContent);
  }


  function togglePolicy() {
    if (policyOpen) {
      privacyPolicyContent.style.height = "0px";
      privacyPolicyContent.style.padding = "0px";
      policyOpen = false;
    } else {
      privacyPolicyContent.style.height = "auto";
      privacyPolicyContent.style.padding = "10px 20px";
      policyOpen = true;
    }
  }


  // 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;
  let partBlockHeights = [];
  let activePartIndex = 0;
  
  function getAllHeights() {
    partBlockHeights = [];
    tlContainer = document.querySelector('#timeline_container');
    let header = document.querySelector('header'), footer = document.querySelector('footer');
    tlContainer.style.height = `calc(100vh - ${header.offsetHeight}px - ${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() {
        isScrollingFromGrab = false;
        titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
    }
  }
  drawFriseRects();

  window.addEventListener('resize', () => {
    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;

  let grabbing = false;

  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.marginTop = '-8px';
  titreFriseEl.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
  let main = document.querySelector('#main');
  main.prepend(titreFriseEl);

  // création et togle des titres au survol des div de la timeline
  function drawFixedTitles() {
    let tlContainer = document.querySelector('#timeline_container');
    let fixedTitlesContainer = document.createElement('div');
    fixedTitlesContainer.setAttribute('id', 'fixedTitlesContainer');
    main.prepend(fixedTitlesContainer);
    for (let index = 0; index < titresFrise.length; index++) {
      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);
    }
  }
  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);
    }
  }


  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // ICI IL Y A LE GRAB DU CURSEUR DE LA TL
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  // make the cursor move on scroll
  let cursor = document.querySelector('#cursor');
  cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
  cursor.style.cursor = 'grab';
  let titres = document.querySelector('#titres_frise');
  titres.style.cursor = 'grab';
  let partRects = document.querySelectorAll('#timeline_container div');
  partRects = Array.from(partRects);
  partRects = partRects.reverse();
  partRects[0].style.width = '32px';
  document.addEventListener("scroll", () => {
    if (!grabbing) {
      displayCurrentPartTitle(getCurrentPartFromScroll());
      moveCursorFromScroll(getCurrentPartFromScroll());
    }
  });

  function makeElementDraggable(element, relatedEl) {
    let offsetY;
  
    element.addEventListener('mousedown', (e) => {
      let elTransformY;
      if (!element.style.transform) {
        elTransformY = 0;
      } else {
        elTransformY = +element.style.transform.split('(')[1].split('p')[0];
      }
      e.preventDefault();
      grabbing = true;
      offsetY = e.clientY - elTransformY;
      element.style.cursor = 'grabbing';
    });
  
    document.addEventListener('mousemove', (e) => {
      if (grabbing) {
        if (e.clientY < tlContainerHeight + tlContainer.offsetTop && e.clientY > tlContainer.offsetTop) {
          const y = e.clientY - offsetY;
          element.style.transform = `translateY(${y}px)`;
          relatedEl.style.transform = `translateY(${y}px)`;
          if (!isNaN(y)) displayCurrentPartTitle(getCurrentPartFromCursor(y));
        } else if (e.clientY < tlContainer.offsetTop + 10) {
          element.style.transform = `translateY(0px)`;
          relatedEl.style.transform = `translateY(0px)`;
        } else if (e.clientY >= tlContainerHeight + tlContainer.offsetTop) {
          element.style.transform = `translateY(${tlContainerHeight}px)`;
          relatedEl.style.transform = `translateY(${tlContainerHeight}px)`;
        }
      }
    });
  
    document.addEventListener('mouseup', () => {
      if (grabbing) scrollOnGrab(element);
      element.style.cursor = 'grab';
      grabbing = false;
    });
  }

  makeElementDraggable(cursor, titres);
  makeElementDraggable(titres, cursor);

  // get heights of parts dans le tableau et dans la timeline
  function getSteps() {
    let tlElSteps = [];
    for (let i = 0; i < partRects.length; i++) {
      tlElSteps.push(partRects[i].offsetTop);
    }
    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
    });
  }


  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // ICI IL Y A LE SCROLL DU GRAB
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  let isScrollingFromGrab = false;

  function scrollOnGrab(el) {
   let scrollValue = 
      ((getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp] - getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp - 1]) * getCursorPositionInTimelinePart(el).proportionInPart)
      + getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp];
    isScrollingFromGrab = true;
    window.scrollTo({ top: scrollValue, behavior: 'smooth' });
    setTimeout(() => {
      isScrollingFromGrab = false;
    }, 2000);
  }

  function getCursorPositionInTimelinePart(el) {
    let elTransformY;
    if (!el.style.transform) {
      elTransformY = 0;
    } else {
      elTransformY = +el.style.transform.split('(')[1].split('p')[0];
    }

    let tlPartHeight, tlPartBottom, tlPartTop, proportionInPart, stepAfterMouseUp;
    for (let j = 0; j < partRects.length; j++) {
      if (j === getCurrentPartFromCursor(elTransformY)) {
        tlPartHeight = partRects[j].getBoundingClientRect().height;
        tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
        tlPartTop = tlPartBottom - tlPartHeight;
        proportionInPart = ((tlPartHeight - (elTransformY - tlPartTop)) / tlPartHeight) * -1;
        if (proportionInPart > 0 && proportionInPart < 1) {
          stepAfterMouseUp = j;
          return {stepAfterMouseUp, proportionInPart};
        } else {
          stepAfterMouseUp = j;
          proportionInPart = 0;
          return {stepAfterMouseUp, proportionInPart};
        }
      } 
    }
  }


  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // ICI IL Y A LE RAPPORT SCROLL / TIMELINE
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  function moveCursorFromScroll(currentPartIndex) {
    if (!isScrollingFromGrab) {
      let currentScroll = window.scrollY;
      
      let cursorTopValue = 0;
      let tlPartHeight, tlPartBottom;
      
      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 === currentPartIndex) break;
      }
  
      let currentScrollPartBottom = getSteps().scrollSteps[currentPartIndex - 1] ? getSteps().scrollSteps[currentPartIndex - 1] : 0;
      let currentScrollPartHeight;
      if (getSteps().scrollSteps[currentPartIndex + 1]) {
        currentScrollPartHeight = getSteps().scrollSteps[currentPartIndex + 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)`;
      }
    }
  }

  let prevPartIndex = 0;
  let lastCallTimestamp = 0;

  function displayCurrentPartTitle(currentPartIndex) {
    if (isNaN(currentPartIndex)) currentPartIndex = 0;
    const currentTime = performance.now();
    if (currentTime - lastCallTimestamp >= 400) {
      lastCallTimestamp = currentTime;
      titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el); // ICI POUR METTRE LE TEMPS BIEN
    }
    let mainEl = titres.children[1];
    let subEl = titres.lastElementChild;
    if (mainEl.innerText != titresFrise[currentPartIndex]?.main || subEl.innerText != titresFrise[currentPartIndex]?.sub) {
      mainEl.innerText = titresFrise[currentPartIndex]?.main;
      subEl.innerText = titresFrise[currentPartIndex]?.sub;
      partRects[prevPartIndex].style.width = '22px';
      partRects[currentPartIndex].style.width = '32px';
    }
    activePartIndex = currentPartIndex;
    prevPartIndex = currentPartIndex;
  }

  function getCurrentPartFromScroll() {
    let currentScroll = window.scrollY;
    for (let i = 0; i < getSteps().scrollSteps.length; i++) {
      if (
        (currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
        && currentScroll + window.innerHeight / 2 <= getSteps().scrollSteps[i + 1]) ||
        (currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
        && i === getSteps().scrollSteps.length - 1)
      ) {
        return(i);
      }
    }
  }

  function getCurrentPartFromCursor(cursorTransformY) {
    for (let i = 0; i < getSteps().tlElSteps.length; i++) {
     if (cursorTransformY >= getSteps().tlElSteps[i] && cursorTransformY < getSteps().tlElSteps[i + 1]) {
        return(i);
      } else if (cursorTransformY > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
        return(getSteps().tlElSteps.length - 1);
     }
    }
  }

  ///////////////////////////////////////
  // ICI LE GETCURRENTTIME !!!!!!!!!!!!!!
  ///////////////////////////////////////

  function getCurrentTime(titleEl) {
    let nextRow = titleEl?.nextElementSibling;
    if (!grabbing) {
      while(nextRow) {
        if (nextRow.offsetTop > window.scrollY &&
            nextRow.classList.contains('isContentPart')) {
              return(nextRow.firstElementChild.innerText);
            }
        nextRow = nextRow.nextElementSibling;
      }
    } else {
      let cursor = document.querySelector('#cursor');
      let allRowsUnder = [];
      nextRow = nextRow.nextElementSibling.nextElementSibling;
      while(nextRow) {
        if (nextRow.classList.contains('isMainPart') || nextRow.classList.contains('isSubPart')) {
          break;
        }
        allRowsUnder.push(nextRow);
        nextRow = nextRow.nextElementSibling;
      }
      return allRowsUnder[Math.floor(allRowsUnder.length * getCursorPositionInTimelinePart(cursor).proportionInPart)].firstElementChild.innerText;
    }
  }


  // désactive le loading quand les éléments sont affichés correctement
  setTimeout(() => {
    let loadingEl = document.getElementById('loading');
    loadingEl.style.opacity = "0";
    setTimeout(() => {
      loadingEl.style.display = "none";
    }, 200);
  }, 100);


  // recherche
  let searchableContent = document.querySelectorAll('tr td:not(:first-of-type):not(:last-of-type)');
  let searchInput = document.querySelector('input[type="search"]');
  let searchResults = document.querySelector('#search_results');
  let isResultOpen = false;
  let resultAmount = 0;
  let resultAmountText = document.querySelector('#result_amount');
  let hilightedWords;
  let typingTimer;
  let currentSelectedWord = 0;
  let downArrow = document.querySelector('#search_results div div img:first-of-type');
  let upArrow = document.querySelector('#search_results div div img:last-of-type');

  let thereAreResults = false;
  let inputIsActive = false;

  searchInput.addEventListener('focus', () => { inputIsActive = true; toggleSearchResults(); });
  searchInput.addEventListener('blur', () => { inputIsActive = false; });

  searchInput.addEventListener('keydown', function(e) {
    triggerSearch();
  });

  function triggerSearch() {
    setTimeout(() => {

      hilightedWords = [];

      removeHighlightTags();
      
      resultAmount = 0;
      
      let input = searchInput.value.toLowerCase();
      
      if (searchInput.value.length >= 3) {

        thereAreResults = true;

        clearTimeout(typingTimer);

        typingTimer = setTimeout(function() {

          searchInContent(input);

/*           if (!isResultOpen) {
            toggleSearchResults();
          }
 */  
          let currentScroll = window.scrollY;

          if (hilightedWords.length != 0) {
            
            searchResults.querySelector('div p:first-of-type').style.display = "block";
            searchResults.querySelector('div p:last-of-type').style.display = "none";

            for (let i = 0; i < hilightedWords.length; i++) {

              let wordBoundingTop = hilightedWords[i].getBoundingClientRect().top;

              if (hilightedWords.length <= 1) {
                let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
                window.scrollTo({ top: scrollValue, behavior: 'smooth' });
                currentSelectedWord = 1;
                resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
                upArrow.classList.add('disabled');
                downArrow.classList.add('disabled');
              } else {
                if (currentScroll < hilightedWords[i].getBoundingClientRect().top && i === 0) {
    
                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
                  currentSelectedWord = 1;
                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
                  upArrow.classList.add('disabled');
                  downArrow.classList.remove('disabled');
                  break;
    
                } else if (
                  currentScroll < wordBoundingTop + currentScroll && currentScroll > hilightedWords[i - 1]?.getBoundingClientRect().top + currentScroll
                ) {
      
                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
                  currentSelectedWord = i + 1;
                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
                  upArrow.classList.remove('disabled');
                  downArrow.classList.remove('disabled');
                  break;
    
                } else if (currentScroll > wordBoundingTop && i === hilightedWords.length - 1) {
      
                  let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
                  window.scrollTo({ top: scrollValue, behavior: 'smooth' });
                  currentSelectedWord = hilightedWords.length;
                  resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
                  upArrow.classList.remove('disabled');
                  downArrow.classList.add('disabled');
                  break;
    
                }
  
              }
              
            }  

          } else {
            searchResults.querySelector('div p:first-of-type').style.display = "none";
            searchResults.querySelector('div p:last-of-type').style.display = "block";
            upArrow.classList.add('disabled');
            downArrow.classList.add('disabled');
          }

        }, 800);

      } else {
        removeHighlightTags();
        thereAreResults = false;

        searchResults.querySelector('div p:first-of-type').style.display = "none";
        searchResults.querySelector('div p:last-of-type').style.display = "block";
        upArrow.classList.add('disabled');
        downArrow.classList.add('disabled');
/*         if (isResultOpen) {
          toggleSearchResults();
        }
 */      }
    }, 10);
  }

  function searchInContent(input) {
    for (let content of searchableContent) {

      if (content.innerText != '') {

        for (let textEl of content.children) {

          if (textEl.innerText !== '') {

            if (textEl.innerHTML.toLowerCase().includes(input)) {
              
              let splitContent = textEl.innerHTML.toLowerCase().split(input);
              
              let processedText = '';
              
              for (let i = 0; i < splitContent.length; i++) {

                if (splitContent[0] !== '' || splitContent[splitContent.length - 1] !== '') {

                  if (i === 0) {
                    processedText += textEl.innerHTML.substring(0, splitContent[i].length);

                  } else {
                    let amountOfTextToConcatenate = 0;
                    for (let j = 0; j <= i - 1; j ++) {
                      amountOfTextToConcatenate += splitContent[j].length + input.length;
                    }
                    processedText += 
                      '<span class="highlight">' + 
                      textEl.innerHTML.substring(amountOfTextToConcatenate - input.length, amountOfTextToConcatenate) +
                      '</span>' +
                      textEl.innerHTML.substring(
                        amountOfTextToConcatenate, amountOfTextToConcatenate + splitContent[i].length
                      );

                  }
                } else if (splitContent[splitContent.length - 1] === '' && splitContent[0] === '') {
                  processedText = '<span class="highlight">' + textEl.innerHTML.substring(splitContent[i - 1].length, splitContent[i - 1].length + input.length) + '</span>';

                }

              }

              textEl.innerHTML = processedText;

              hilightedWords = document.querySelectorAll('.highlight');
              resultAmount = hilightedWords.length;

            }

          }

        }
      }
    }

    resultAmountText.innerText = resultAmount;
  }

  function removeHighlightTags() {
    for (let content of searchableContent) {
      if (content.innerHTML.includes('<span class="highlight">')) {
        content.innerHTML = content.innerHTML.replace(/<span class="highlight">|<\/span>/g, '');
      }
    }
  }

  function toggleSearchResults() {
    if (thereAreResults || inputIsActive) {
      searchResults.style.display = "block";
      searchResults.style.opacity = 1;
      searchResults.style.maxHeight = "1000px";
      isResultOpen = true;
    } else {
      searchResults.style.opacity = 0;
      searchResults.style.maxHeight = "0px";
      isResultOpen = false;
      setTimeout(() => {
        searchResults.style.display = "none";
      }, 300);
    }
  }

  upArrow.addEventListener('click', function (el) {
    if (!el.target.classList.contains('disabled')) {
      let currentScroll = window.scrollY;
      currentSelectedWord--;

      let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;

      let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
      window.scrollTo({ top: scrollValue, behavior: 'smooth' });
      resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];

      if (currentSelectedWord === 1) {
        upArrow.classList.add('disabled');
        downArrow.classList.remove('disabled');
      } else {
        upArrow.classList.remove('disabled');
        downArrow.classList.remove('disabled');
      }
      
    }
  });

  downArrow.addEventListener('click', function (el) {
    if (!el.target.classList.contains('disabled')) {
      let currentScroll = window.scrollY;
      currentSelectedWord++;

      let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;

      let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
      window.scrollTo({ top: scrollValue, behavior: 'smooth' });
      resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];

      if (currentSelectedWord === hilightedWords.length) {
        downArrow.classList.add('disabled');
        upArrow.classList.remove('disabled');
      } else {
        downArrow.classList.remove('disabled');
        upArrow.classList.remove('disabled');
      }
    }
  });

  let tagsDiv = document.querySelector('#search_results > div:last-of-type');

  window.addEventListener('click', function (el) {
    if (!searchResults.contains(el.target) && isResultOpen && el.target != searchInput && el.target != tagsDiv) {
      toggleSearchResults();
    }
  });

  let searchWordList = document.querySelector('#content_search_tag');
  searchWordList = searchWordList.innerText.substring(1, searchWordList.innerText.length - 1).split(', ');

  for (let tag of searchWordList) {
    let tagWrapper = document.createElement('p');
    tagWrapper.innerText = tag;
    tagWrapper.addEventListener('click', function () {
      searchInput.value = tag;
      triggerSearch();
    });
    tagsDiv.appendChild(tagWrapper);
  }

});

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