diff --git a/index.php b/index.php index 13109cf..0720f18 100644 --- a/index.php +++ b/index.php @@ -6,7 +6,7 @@ -
> + style="background-color: #010d19;"> @@ -16,227 +16,6 @@ diff --git a/resources/fonts/fonts/.gitkeep b/resources/fonts/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.otf b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.otf deleted file mode 100644 index 6f1c166..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.otf and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff deleted file mode 100644 index 96c9b86..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff2 b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff2 deleted file mode 100644 index f63724a..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-60.woff2 and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.otf b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.otf deleted file mode 100644 index e1793b6..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.otf and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff deleted file mode 100644 index aa8b159..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff2 b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff2 deleted file mode 100644 index b780887..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-90.woff2 and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.otf b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.otf deleted file mode 100644 index 98f85b5..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.otf and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff deleted file mode 100644 index a300756..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff2 b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff2 deleted file mode 100644 index b05678b..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-60.woff2 and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.otf b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.otf deleted file mode 100644 index 2577f0f..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.otf and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff deleted file mode 100644 index b997fc0..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff and /dev/null differ diff --git a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff2 b/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff2 deleted file mode 100644 index 2f1c730..0000000 Binary files a/resources/fonts/fonts/authentic-sans-90/AUTHENTICSans-Condensed-90.woff2 and /dev/null differ diff --git a/resources/fonts/fonts/libre-caslon/LibreCaslonText-Italic.woff b/resources/fonts/fonts/libre-caslon/LibreCaslonText-Italic.woff deleted file mode 100644 index 6cdbc55..0000000 Binary files a/resources/fonts/fonts/libre-caslon/LibreCaslonText-Italic.woff and /dev/null differ diff --git a/resources/fonts/fonts/libre-caslon/LibreCaslonText-Regular.woff b/resources/fonts/fonts/libre-caslon/LibreCaslonText-Regular.woff deleted file mode 100644 index e4f5c3f..0000000 Binary files a/resources/fonts/fonts/libre-caslon/LibreCaslonText-Regular.woff and /dev/null differ diff --git a/resources/fonts/fonts/libre-caslon/librecaslondisplay-regular.otf b/resources/fonts/fonts/libre-caslon/librecaslondisplay-regular.otf deleted file mode 100644 index 17be567..0000000 Binary files a/resources/fonts/fonts/libre-caslon/librecaslondisplay-regular.otf and /dev/null differ diff --git a/resources/fonts/fonts/libre-caslon/librecaslontext-italic.otf b/resources/fonts/fonts/libre-caslon/librecaslontext-italic.otf deleted file mode 100644 index 506438a..0000000 Binary files a/resources/fonts/fonts/libre-caslon/librecaslontext-italic.otf and /dev/null differ diff --git a/resources/fonts/fonts/libre-caslon/librecaslontext-regular.otf b/resources/fonts/fonts/libre-caslon/librecaslontext-regular.otf deleted file mode 100644 index d737ce1..0000000 Binary files a/resources/fonts/fonts/libre-caslon/librecaslontext-regular.otf and /dev/null differ diff --git a/resources/scripts/app.js b/resources/scripts/app.js index 6711ed1..8ba1691 100644 --- a/resources/scripts/app.js +++ b/resources/scripts/app.js @@ -4,7 +4,442 @@ 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); + + // CLEANER LE TABLEAU + let minHeadTh = document.querySelector("#main table thead tr th:first-of-type"); + minHeadTh.style.width = `${100 / 8}%`; + + let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)"); + for (let otherHeadTh of otherHeadThs) { + otherHeadTh.style.width = `${100 / 8 * 1.75}%`; + } + + let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type"); + for (let minTableTd of minTableTds) { + if (minTableTd.parentNode.childElementCount != 1) { + minTableTd.style.width = `${100 / 8}%`; + } + } + + let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)"); + for (let otherTableTd of otherTableTds) { + otherTableTd.style.width = `${100 / 8 * 1.75}%`; + } + // HEADER AU SCROLL + let tableHead = document.querySelector("thead tr"); + let tHeadHeight = tableHead.offsetHeight; + 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; + } + } + // 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) + '' + tbodyContent.substring(i + 1); + } else { + tbodyContent = tbodyContent.substring(0, i) + '' + tbodyContent.substring(i + 1); + } + asteriskCounter++; + } + } + tbody.innerHTML = tbodyContent; +*/ + + // 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; + var bodyHeight = document.querySelector('body').offsetHeight; + let partBlockHeights = []; + let activePartIndex = 0; + + function getAllHeights() { + partBlockHeights = []; + tlContainer = document.querySelector('#timeline_container'); + tlContainer.style.height = `calc(100vh - ${document.querySelector('header').offsetHeight}px - ${document.querySelector('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() { + titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }); + } + } + drawFriseRects(); + + window.addEventListener('resize', () => { + bodyHeight = document.querySelector('body').offsetHeight; + 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; + + 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 = `${getCurrentTime(titresFrise[0].el)}
${titresFrise[0].main}
${titresFrise[0].sub}
`; + 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.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top - 8}px`; + let main = document.querySelector('#main'); + main.prepend(titreFriseEl); + + // make the cursor move on scroll + let cursor = document.querySelector('#cursor'); + let isCursorGrabbed = false; + cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`; + let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11); + document.addEventListener("scroll", (event) => { + if (!isCursorGrabbed) { + scrollMovement(); + } + }); + // make the cursor draggable + let prevMousePos = 0; + cursor.addEventListener("mousedown", (event) => { + if (!isCursorGrabbed) { + event.preventDefault(); + isCursorGrabbed = true; + prevMousePos = event.clientY; + } + }); + window.addEventListener("mousemove", (event) => { + if (isCursorGrabbed) { + 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 (isCursorGrabbed) { + isCursorGrabbed = false; + } + }); + + function getSteps() { + let partRects = document.querySelectorAll('#timeline_container div'); + let tlElSteps = []; + let total = 0; + for (let i = 0; i < partRects.length; i++) { + total = total + partRects[i].clientHeight; + if (i === 0) total = total - partRects[0].clientHeight; + tlElSteps.push(total); + } + 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 + }); + } + + function drawFixedTitles() { + let tlContainer = document.querySelector('#timeline_container'); + let fixedTitlesContainer = document.createElement('div'); + fixedTitlesContainer.setAttribute('id', 'fixedTitlesContainer'); + main.prepend(fixedTitlesContainer); + let index = 0; + for (let titreFrise of titresFrise) { + 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 = `${titresFrise[titresFrise.length - index - 1].main}
${titresFrise[titresFrise.length - index - 1].sub}
`; + 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); + index++; + } + } + 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); + } + } + + function cursorMovement() { + } + + let titres = document.querySelector('#titres_frise'); + let prevPartIndex = 0; + let partRects = document.querySelectorAll('#timeline_container div'); + partRects = Array.from(partRects); + partRects = partRects.reverse(); + partRects[0].style.width = '32px'; + + function scrollMovement() { + let currentScroll = window.scrollY; + + let cursorTopValue = 0; + let tlPartHeight, tlPartBottom; + + + for (let i = 0; i < getSteps().scrollSteps.length; i++) { + if ((currentScroll >= getSteps().scrollSteps[i] && currentScroll <= getSteps().scrollSteps[i + 1]) || + (currentScroll >= getSteps().scrollSteps[i] && i === getSteps().scrollSteps.length - 1)) { + // titres et temps + titres.firstElementChild.innerText = getCurrentTime(titresFrise[i].el); + let mainEl = titres.children[1]; + let subEl = titres.lastElementChild; + if (mainEl.innerText != titresFrise[i].main || subEl.innerText != titresFrise[i].sub) { + mainEl.innerText = titresFrise[i].main; + subEl.innerText = titresFrise[i].sub; + partRects[prevPartIndex].style.width = '22px'; + partRects[i].style.width = '32px'; + } + activePartIndex = i; + prevPartIndex = i; + + // curseur + 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 === i) break; + } + + let currentScrollPartBottom = getSteps().scrollSteps[i - 1] ? getSteps().scrollSteps[i - 1] : 0; + let currentScrollPartHeight; + if (getSteps().scrollSteps[i + 1]) { + currentScrollPartHeight = getSteps().scrollSteps[i + 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)`; + } + + break; + } + } + } + + function getCurrentTime(titleEl) { + let nextRow = titleEl.nextElementSibling; + while(nextRow) { + if (nextRow.offsetTop > window.scrollY && + nextRow.classList.contains('isContentPart')) { + return(nextRow.firstElementChild.innerText); + } + nextRow = nextRow.nextElementSibling; + } + } }); /** diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 00ce8c3..327ed2e 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -2,17 +2,17 @@ @section('content') - + -