valentin_le_moign
/
partition-jlg-theme


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <?php do_action('get_header'); ?>

    <div id="app" class="banner bg-jlg-dark-blue text-jlg-white font-authentic flex w-full flex-col justify-center items-center">
      <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
    </div>

    <script>
      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 = [];

        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>

    <?php do_action('get_footer'); ?>
    <?php wp_footer(); ?>
  </body>
</html>