905 lines
33 KiB
JavaScript
905 lines
33 KiB
JavaScript
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);
|