|
|
@@ -27,7 +27,9 @@
|
|
|
|
|
|
let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
|
|
|
for (let minTableTd of minTableTds) {
|
|
|
- minTableTd.style.width = `${100 / 8}%`;
|
|
|
+ if (minTableTd.parentNode.childElementCount != 1) {
|
|
|
+ minTableTd.style.width = `${100 / 8}%`;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
|
|
|
@@ -43,6 +45,128 @@
|
|
|
let headerNewHeight = tHeadHeight - scroll;
|
|
|
tableHead.style.height = `${headerNewHeight}px`;
|
|
|
}
|
|
|
+ // italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT
|
|
|
+ let tbody = document.querySelectorAll('tbody');
|
|
|
+ let tbodyContent = tbody[0].innerHTML;
|
|
|
+ let asteriskCounter = 0;
|
|
|
+ for (let i = 0; i < tbodyContent.length; i++) {
|
|
|
+ if (tbodyContent[i] == "*") {
|
|
|
+ if (asteriskCounter % 2 == 0) {
|
|
|
+ tbodyContent = tbodyContent.substring(0, i) + '<span class="font-caslon italic">' + tbodyContent.substring(i + 1);
|
|
|
+ } else {
|
|
|
+ tbodyContent = tbodyContent.substring(0, i) + '</span>' + tbodyContent.substring(i + 1);
|
|
|
+ }
|
|
|
+ asteriskCounter++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tbody[0].innerHTML = tbodyContent;
|
|
|
+
|
|
|
+
|
|
|
+ // titres de parties
|
|
|
+ let mainpartTitless = document.querySelectorAll('.isMainPart');
|
|
|
+ for (let mainpartTitles of mainpartTitless) {
|
|
|
+ if (mainpartTitles.nextElementSibling.classList.contains('isSubPart')) {
|
|
|
+ mainpartTitles.firstElementChild.firstElementChild.style.height = "1.5rem";
|
|
|
+ mainpartTitles.firstElementChild.style.marginBottom = "-0.25rem";
|
|
|
+ mainpartTitles.style.borderBottom = "0";
|
|
|
+ mainpartTitles.style.paddingBottom = "0";
|
|
|
+ mainpartTitles.nextElementSibling.style.paddingTop = "0";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // couleurs titres
|
|
|
+ let colors = [
|
|
|
+ {'red' : 'e4000c'},
|
|
|
+ {'blue1': '5dfffd'},
|
|
|
+ {'blue2': '0fe5f9'},
|
|
|
+ {'blue3': '11c1f8'},
|
|
|
+ {'blue4': '0779f1'},
|
|
|
+ {'blue5': '040bcb'},
|
|
|
+ {'yellow1': 'ffe113'},
|
|
|
+ {'yellow2': 'f4ff1b'},
|
|
|
+ {'yellow3': 'e2ff0c'},
|
|
|
+ {'yellow4': '93fe0b'},
|
|
|
+ {'yellow5': '17fe0b'},
|
|
|
+ {'pink1': 'e70060'},
|
|
|
+ {'pink2': 'f03cf3'}
|
|
|
+ ];
|
|
|
+ let titles = document.querySelectorAll('.isMainPart, .isSubPart');
|
|
|
+ let partTitles = [];
|
|
|
+ for (let title of titles) {
|
|
|
+ if (!title.nextElementSibling.classList.contains('isSubPart')) {
|
|
|
+ partTitles.push(title);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < partTitles.length; i++) {
|
|
|
+ if (partTitles[i].previousElementSibling?.classList.contains('isMainPart')) {
|
|
|
+ partTitles[i].previousElementSibling.firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
|
|
+ }
|
|
|
+ partTitles[i].firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
|
|
+ }
|
|
|
+ // scroll with cursor
|
|
|
+ // display parts rectangle on timeline
|
|
|
+
|
|
|
+ let tlContainer, tlContainerHeight, bodyHeight;
|
|
|
+ let partsHeight = [];
|
|
|
+ let prevHeight = 0;
|
|
|
+ let partBlockHeights = [];
|
|
|
+
|
|
|
+ function getAllHeights() {
|
|
|
+ tlContainer = document.querySelector('#timeline_container');
|
|
|
+ tlContainerHeight = tlContainer.offsetHeight;
|
|
|
+ bodyHeight = document.querySelector('tbody').offsetHeight;
|
|
|
+ let lastTitle = document.querySelectorAll('.isMainPart');
|
|
|
+ lastTitle = lastTitle[lastTitle.length - 1];
|
|
|
+ for (let i = 0; i < partTitles.length; i++) {
|
|
|
+ let elTopFromParentTop = partTitles[i].offsetTop - document.querySelector('tbody').offsetTop;
|
|
|
+ let partSize = elTopFromParentTop - prevHeight;
|
|
|
+ prevHeight = elTopFromParentTop;
|
|
|
+ if (i != 0) {
|
|
|
+ partsHeight.push(partSize);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ partsHeight.push(bodyHeight - lastTitle.offsetTop);
|
|
|
+ const partsHeightSum = partsHeight.reduce((partialSum, a) => partialSum + a, 0);
|
|
|
+ for (let partHeight of partsHeight) {
|
|
|
+ partBlockHeights.push(partHeight / bodyHeight * tlContainerHeight);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getAllHeights();
|
|
|
+ window.addEventListener("resize", (event) => {
|
|
|
+ getAllHeights();
|
|
|
+ });
|
|
|
+
|
|
|
+ for (let i = 0; i < partBlockHeights.length; i++) {
|
|
|
+ let partDiv = document.createElement('div');
|
|
|
+ partDiv.style.width = "32px";
|
|
|
+ partDiv.style.height = partBlockHeights[i] + "px";
|
|
|
+ partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
|
|
+ partDiv.style.borderBottom = "solid 1.5px #010d19";
|
|
|
+ partDiv.style.opacity = "0.7";
|
|
|
+ partDiv.style.transition = "opacity 0.3s ease-out";
|
|
|
+ partDiv.style.cursor = "pointer";
|
|
|
+ tlContainer.prepend(partDiv);
|
|
|
+ console.log(tlContainer.children[0].style.opacity)
|
|
|
+ tlContainer.children[0].addEventListener("mouseenter", function() {
|
|
|
+ tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "1";
|
|
|
+ });
|
|
|
+ tlContainer.children[0].addEventListener("mouseleave", function() {
|
|
|
+ tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "0.7";
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // make the cursor move on scroll
|
|
|
+ let scrollValue, cursorTop;
|
|
|
+ document.addEventListener("scroll", (event) => {
|
|
|
+ scrollValue = window.scrollY;
|
|
|
+ let diffSize = scrollValue / bodyHeight * tlContainerHeight;
|
|
|
+ document.querySelector('#cursor').style.transform = `translateY(${diffSize}px)`;
|
|
|
+ cursorTop = cursorTop + diffSize;
|
|
|
+ });
|
|
|
+
|
|
|
+ // TODO
|
|
|
+ // ajouter le titre collé au curseur et le temps total en bas
|
|
|
+ // drag and drop curseur
|
|
|
+ // smoothscroll au clic sur une partie
|
|
|
+ // détection partie à allumer
|
|
|
}, false);
|
|
|
</script>
|
|
|
|
Valentin