|
@@ -4,8 +4,18 @@ 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);
|
|
|
+
|
|
|
+ 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");
|
|
@@ -27,6 +37,12 @@ domReady(async () => {
|
|
|
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;
|
|
@@ -42,22 +58,65 @@ domReady(async () => {
|
|
|
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++;
|
|
|
+
|
|
|
+ // 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;
|
|
|
}
|
|
|
}
|
|
|
- tbody.innerHTML = tbodyContent;
|
|
|
-*/
|
|
|
+
|
|
|
|
|
|
// titres de parties dans le tableau
|
|
|
let mainpartTitless = document.querySelectorAll('.isMainPart');
|
|
@@ -128,7 +187,7 @@ domReady(async () => {
|
|
|
}
|
|
|
let totalTime = convertToSeconds(lastTime[0].innerText);
|
|
|
|
|
|
- let tlContainer, tlContainerHeight, bodyHeight;
|
|
|
+ let tlContainer, tlContainerHeight;
|
|
|
let partBlockHeights = [];
|
|
|
let activePartIndex = 0;
|
|
|
|
|
@@ -139,7 +198,6 @@ domReady(async () => {
|
|
|
tlContainer.style.height = `calc(100vh - ${header.offsetHeight}px - ${footer.offsetHeight}px - 60px)`;
|
|
|
tlContainer.style.top = `${document.querySelector('header').offsetHeight + 30}px`;
|
|
|
tlContainerHeight = tlContainer.offsetHeight;
|
|
|
- bodyHeight = document.querySelector('body').offsetHeight;
|
|
|
for (let partDuration of partDurations) {
|
|
|
partBlockHeights.push(partDuration / totalTime * tlContainerHeight);
|
|
|
}
|
|
@@ -172,6 +230,7 @@ domReady(async () => {
|
|
|
toggleTitleHover(i, 'hide');
|
|
|
});
|
|
|
tlContainer.children[0].addEventListener("click", function() {
|
|
|
+ isScrollingFromGrab = false;
|
|
|
titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
});
|
|
|
}
|
|
@@ -197,6 +256,8 @@ domReady(async () => {
|
|
|
|
|
|
let lastMain = null;
|
|
|
|
|
|
+ let grabbing = false;
|
|
|
+
|
|
|
for (let i = 0; i < elements.length; i++) {
|
|
|
let current = elements[i];
|
|
|
let next = elements[i + 1];
|
|
@@ -302,6 +363,11 @@ domReady(async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
+ // 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`;
|
|
@@ -312,8 +378,7 @@ domReady(async () => {
|
|
|
partRects = Array.from(partRects);
|
|
|
partRects = partRects.reverse();
|
|
|
partRects[0].style.width = '32px';
|
|
|
- let grabbing = false;
|
|
|
- document.addEventListener("scroll", (event) => {
|
|
|
+ document.addEventListener("scroll", () => {
|
|
|
if (!grabbing) {
|
|
|
displayCurrentPartTitle(getCurrentPartFromScroll());
|
|
|
moveCursorFromScroll(getCurrentPartFromScroll());
|
|
@@ -324,9 +389,15 @@ domReady(async () => {
|
|
|
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 - +element.style.top.slice(0, -2);
|
|
|
+ offsetY = e.clientY - elTransformY;
|
|
|
element.style.cursor = 'grabbing';
|
|
|
});
|
|
|
|
|
@@ -334,74 +405,29 @@ domReady(async () => {
|
|
|
if (grabbing) {
|
|
|
if (e.clientY < tlContainerHeight + tlContainer.offsetTop && e.clientY > tlContainer.offsetTop) {
|
|
|
const y = e.clientY - offsetY;
|
|
|
- element.style.top = `${y}px`;
|
|
|
- relatedEl.style.top = `${y}px`;
|
|
|
+ element.style.transform = `translateY(${y}px)`;
|
|
|
+ relatedEl.style.transform = `translateY(${y}px)`;
|
|
|
if (!isNaN(y)) displayCurrentPartTitle(getCurrentPartFromCursor(y));
|
|
|
- } else if (e.clientY <= tlContainer.offsetTop) {
|
|
|
- element.style.top = `${tlContainer.offsetTop}px`;
|
|
|
- relatedEl.style.top = `${tlContainer.offsetTop}px`;
|
|
|
+ } 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.top = `${tlContainerHeight + tlContainer.offsetTop}px`;
|
|
|
- relatedEl.style.top = `${tlContainerHeight + tlContainer.offsetTop}px`;
|
|
|
+ element.style.transform = `translateY(${tlContainerHeight}px)`;
|
|
|
+ relatedEl.style.transform = `translateY(${tlContainerHeight}px)`;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
|
- grabbing = false;
|
|
|
+ if (grabbing) scrollOnGrab(element);
|
|
|
element.style.cursor = 'grab';
|
|
|
+ grabbing = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
makeElementDraggable(cursor, titres);
|
|
|
makeElementDraggable(titres, cursor);
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-/* let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
|
|
|
- // make the cursor draggable
|
|
|
- let prevMousePos = 0;
|
|
|
- cursor.addEventListener("mousedown", (event) => {
|
|
|
- if (!grabbing) {
|
|
|
- event.preventDefault();
|
|
|
- grabbing = true;
|
|
|
- prevMousePos = event.clientY;
|
|
|
- }
|
|
|
- });
|
|
|
- window.addEventListener("mousemove", (event) => {
|
|
|
- if (grabbing) {
|
|
|
- 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 (grabbing) {
|
|
|
- grabbing = false;
|
|
|
- }
|
|
|
- });
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
// get heights of parts dans le tableau et dans la timeline
|
|
|
function getSteps() {
|
|
|
let tlElSteps = [];
|
|
@@ -422,45 +448,102 @@ domReady(async () => {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function moveCursorFromScroll(currentPartIndex) {
|
|
|
- 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;
|
|
|
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
+ // 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 {
|
|
|
- currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
|
|
|
+ elTransformY = +el.style.transform.split('(')[1].split('p')[0];
|
|
|
}
|
|
|
- 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 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) {
|
|
|
- titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el);
|
|
|
+ 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) {
|
|
@@ -487,26 +570,332 @@ domReady(async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function getCurrentPartFromCursor(cursorTop) {
|
|
|
+ function getCurrentPartFromCursor(cursorTransformY) {
|
|
|
for (let i = 0; i < getSteps().tlElSteps.length; i++) {
|
|
|
- if (cursorTop - tlContainer.offsetTop >= getSteps().tlElSteps[i] && cursorTop - tlContainer.offsetTop < getSteps().tlElSteps[i + 1]) {
|
|
|
+ if (cursorTransformY >= getSteps().tlElSteps[i] && cursorTransformY < getSteps().tlElSteps[i + 1]) {
|
|
|
return(i);
|
|
|
- } else if (cursorTop - tlContainer.offsetTop > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
|
|
|
+ } else if (cursorTransformY > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
|
|
|
return(getSteps().tlElSteps.length - 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ ///////////////////////////////////////
|
|
|
+ // ICI LE GETCURRENTTIME !!!!!!!!!!!!!!
|
|
|
+ ///////////////////////////////////////
|
|
|
+
|
|
|
function getCurrentTime(titleEl) {
|
|
|
let nextRow = titleEl?.nextElementSibling;
|
|
|
- while(nextRow) {
|
|
|
- if (nextRow.offsetTop > window.scrollY &&
|
|
|
- nextRow.classList.contains('isContentPart')) {
|
|
|
- return(nextRow.firstElementChild.innerText);
|
|
|
+ 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;
|
|
|
}
|
|
|
- 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);
|
|
|
+ }
|
|
|
+
|
|
|
});
|
|
|
|
|
|
/**
|