123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904 |
- 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);
|