debug et améliorations de la TL
This commit is contained in:
Valentin
@@ -6,7 +6,7 @@
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
<body <?php body_class(); ?> style="background-color: #010d19;">
|
||||
<?php wp_body_open(); ?>
|
||||
<?php do_action('get_header'); ?>
|
||||
|
||||
@@ -16,227 +16,6 @@
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 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;
|
||||
window.onscroll = () => {
|
||||
tableHead.style.minHeight = `${document.querySelector("header").offsetHeight + 72}px`;
|
||||
let scroll = window.pageYOffset;
|
||||
let headerNewHeight = tHeadHeight - scroll;
|
||||
tableHead.style.height = `${headerNewHeight}px`;
|
||||
}
|
||||
// italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT
|
||||
let tbody = document.querySelectorAll('tbody');
|
||||
let tbodyContent = tbody[0].innerHTML;
|
||||
let asteriskCounter = 0;
|
||||
for (let i = 0; i < tbodyContent.length; i++) {
|
||||
if (tbodyContent[i] == "*") {
|
||||
if (asteriskCounter % 2 == 0) {
|
||||
tbodyContent = tbodyContent.substring(0, i) + '<span class="font-caslon italic">' + tbodyContent.substring(i + 1);
|
||||
} else {
|
||||
tbodyContent = tbodyContent.substring(0, i) + '</span>' + tbodyContent.substring(i + 1);
|
||||
}
|
||||
asteriskCounter++;
|
||||
}
|
||||
}
|
||||
tbody[0].innerHTML = tbodyContent;
|
||||
|
||||
|
||||
// titres de parties
|
||||
let mainpartTitless = document.querySelectorAll('.isMainPart');
|
||||
for (let mainpartTitles of mainpartTitless) {
|
||||
if (mainpartTitles.nextElementSibling.classList.contains('isSubPart')) {
|
||||
mainpartTitles.firstElementChild.firstElementChild.style.height = "1.5rem";
|
||||
mainpartTitles.firstElementChild.style.marginBottom = "-0.25rem";
|
||||
mainpartTitles.style.borderBottom = "0";
|
||||
mainpartTitles.style.paddingBottom = "0";
|
||||
mainpartTitles.nextElementSibling.style.paddingTop = "0";
|
||||
}
|
||||
}
|
||||
// couleurs titres
|
||||
let colors = [
|
||||
{'red' : 'e4000c'},
|
||||
{'blue1': '5dfffd'},
|
||||
{'blue2': '0fe5f9'},
|
||||
{'blue3': '11c1f8'},
|
||||
{'blue4': '0779f1'},
|
||||
{'blue5': '040bcb'},
|
||||
{'yellow1': 'ffe113'},
|
||||
{'yellow2': 'f4ff1b'},
|
||||
{'yellow3': 'e2ff0c'},
|
||||
{'yellow4': '93fe0b'},
|
||||
{'yellow5': '17fe0b'},
|
||||
{'pink1': 'e70060'},
|
||||
{'pink2': 'f03cf3'}
|
||||
];
|
||||
let titles = document.querySelectorAll('.isMainPart, .isSubPart');
|
||||
let partTitles = [];
|
||||
for (let title of titles) {
|
||||
if (!title.nextElementSibling.classList.contains('isSubPart')) {
|
||||
partTitles.push(title);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < partTitles.length; i++) {
|
||||
if (partTitles[i].previousElementSibling?.classList.contains('isMainPart')) {
|
||||
partTitles[i].previousElementSibling.firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
||||
}
|
||||
partTitles[i].firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
||||
}
|
||||
// scroll with cursor
|
||||
// display parts rectangle on timeline
|
||||
|
||||
let tlContainer, tlContainerHeight, bodyHeight;
|
||||
let partsHeight = [];
|
||||
let prevHeight = 0;
|
||||
let partBlockHeights = [];
|
||||
let activePartIndex;
|
||||
|
||||
function getAllHeights() {
|
||||
tlContainer = document.querySelector('#timeline_container');
|
||||
tlContainerHeight = tlContainer.offsetHeight;
|
||||
bodyHeight = document.querySelector('tbody').offsetHeight;
|
||||
let lastTitle = document.querySelectorAll('.isMainPart');
|
||||
lastTitle = lastTitle[lastTitle.length - 1];
|
||||
for (let i = 0; i < partTitles.length; i++) {
|
||||
let elTopFromParentTop = partTitles[i].offsetTop - document.querySelector('tbody').offsetTop;
|
||||
let partSize = elTopFromParentTop - prevHeight;
|
||||
prevHeight = elTopFromParentTop;
|
||||
if (i != 0) {
|
||||
partsHeight.push(partSize);
|
||||
}
|
||||
}
|
||||
partsHeight.push(bodyHeight - lastTitle.offsetTop);
|
||||
const partsHeightSum = partsHeight.reduce((partialSum, a) => partialSum + a, 0);
|
||||
for (let partHeight of partsHeight) {
|
||||
partBlockHeights.push(partHeight / bodyHeight * tlContainerHeight);
|
||||
}
|
||||
}
|
||||
getAllHeights();
|
||||
|
||||
function drawFriseRects() {
|
||||
for (let i = 0; i < partBlockHeights.length; i++) {
|
||||
let partDiv = document.createElement('div');
|
||||
partDiv.style.width = "32px";
|
||||
partDiv.style.height = partBlockHeights[i] + "px";
|
||||
partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
||||
partDiv.style.borderBottom = "solid 1.5px #010d19";
|
||||
partDiv.style.opacity = "0.6";
|
||||
partDiv.style.transition = "opacity 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];
|
||||
el.style.opacity = "1";
|
||||
});
|
||||
tlContainer.children[0].addEventListener("mouseleave", function() {
|
||||
let el = tlContainer.children[tlContainer.children.length - 1 - i];
|
||||
if (Array.from(el.parentNode.children).indexOf(el) != activePartIndex) {
|
||||
el.style.opacity = "0.7";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
drawFriseRects();
|
||||
|
||||
window.addEventListener("resize", (event) => {
|
||||
getAllHeights();
|
||||
tlContainer.innerHTML = '';
|
||||
drawFriseRects();
|
||||
});
|
||||
|
||||
// make the cursor move on scroll
|
||||
let scrollValue, cursorTop;
|
||||
let cursor = document.querySelector('#cursor');
|
||||
cursor.style.transform = `translateY(${window.scrollY / bodyHeight * tlContainerHeight}px)`;
|
||||
getActivePart();
|
||||
document.addEventListener("scroll", (event) => {
|
||||
scrollValue = window.scrollY;
|
||||
let diffSize = scrollValue / bodyHeight * tlContainerHeight;
|
||||
cursor.style.transform = `translateY(${diffSize}px)`;
|
||||
cursorTop = cursorTop + diffSize;
|
||||
getActivePart();
|
||||
});
|
||||
// make the cursor draggable
|
||||
let isCursorGrabbed = false;
|
||||
let cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
|
||||
let prevCursorPos = 0;
|
||||
cursor.addEventListener("mousedown", (event) => {
|
||||
if (!isCursorGrabbed) {
|
||||
event.preventDefault();
|
||||
isCursorGrabbed = true;
|
||||
prevCursorPos = event.clientY;
|
||||
}
|
||||
});
|
||||
window.addEventListener("mousemove", (event) => {
|
||||
if (isCursorGrabbed) {
|
||||
event.preventDefault();
|
||||
let newPos = cursorPrevTranslateAmount + (event.clientY - prevCursorPos);
|
||||
if (event.clientY < tlContainerHeight + tlContainer.offsetTop && event.clientY > tlContainer.offsetTop) {
|
||||
cursor.style.transform = `translateY(${newPos}px)`;
|
||||
window.scrollBy(0, (event.clientY - prevCursorPos) * (bodyHeight / tlContainerHeight));
|
||||
cursorPrevTranslateAmount = +cursor.style.transform.slice(0, -3).slice(11);
|
||||
getActivePart();
|
||||
} 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);
|
||||
}
|
||||
prevCursorPos = event.clientY;
|
||||
}
|
||||
});
|
||||
window.addEventListener("mouseup", (event) => {
|
||||
if (isCursorGrabbed) {
|
||||
isCursorGrabbed = false;
|
||||
}
|
||||
});
|
||||
// lighten active part rectangle
|
||||
function getActivePart() {
|
||||
let partRects = tlContainer.children;
|
||||
let cursorYPos = cursor.getBoundingClientRect().top + cursor.clientHeight / 2;
|
||||
if (cursorYPos >= Object.values(partRects)[0].getBoundingClientRect().bottom) {
|
||||
for (let partRect of partRects) {
|
||||
partRect.style.opacity = 0.6;
|
||||
}
|
||||
Object.values(partRects)[0].style.opacity = 1;
|
||||
} else {
|
||||
for (let i = 0; i < partRects.length; i++) {
|
||||
if (cursorYPos >= partRects[i].getBoundingClientRect().top && cursorYPos < partRects[i].getBoundingClientRect().top + partRects[i].clientHeight) {
|
||||
partRects[i].style.opacity = 1;
|
||||
activePartIndex = i;
|
||||
} else {
|
||||
partRects[i].style.opacity = 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO
|
||||
// ajouter le titre collé au curseur et le temps total en bas
|
||||
// smoothscroll au clic sur une partie
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+436
-1
@@ -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) + '<span class="font-caslon italic">' + tbodyContent.substring(i + 1);
|
||||
} else {
|
||||
tbodyContent = tbodyContent.substring(0, i) + '</span>' + 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 = `<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.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 = `<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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="fixed left-0 top-48 h-2/3 w-8 flex flex-col-reverse" id="timeline_container"></div>
|
||||
<div class="fixed left-0 w-8 flex flex-col-reverse z-1" id="timeline_container"></div>
|
||||
|
||||
<svg class="fixed left-0 top-48 h-4 -mt-1 w-10 fill-jlg-white cursor-grab active:cursor-grabbing" id="cursor">
|
||||
<svg class="fixed left-0 h-4 w-10 mt-[-4px] fill-jlg-white cursor-grab active:cursor-grabbing" id="cursor">
|
||||
<polygon points="32,4 32,6 40,10 40,0" />
|
||||
<rect width="32" height="2" y="4" />
|
||||
</svg>
|
||||
|
||||
|
||||
<table class="w-full bg-jlg-dark-blue flex justify-center">
|
||||
<table class="w-full bg-jlg-dark-blue flex justify-center mt-[70px] z-0 pl-10 lg:pl-[10px]">
|
||||
<thead>
|
||||
<tr class="border-jlg-white border-b h-64 top-0 w-full lg:w-2/3 fixed flex items-stretch justify-around text-left lg:text-xl uppercase bg-jlg-dark-blue">
|
||||
<tr class="border-jlg-white border-b h-64 top-0 w-full lg:w-2/3 fixed z-0 flex items-stretch justify-around text-left uppercase bg-jlg-dark-blue">
|
||||
<th class="flex items-end justify-start"></th>
|
||||
<th class="flex items-end justify-start pb-4">Images</th>
|
||||
<th class="flex items-end justify-start pb-4">Voix Off et In</th>
|
||||
@@ -34,7 +34,7 @@
|
||||
if ($query->have_posts()) :
|
||||
while ($query->have_posts()) : $query->the_post();
|
||||
if (get_post_meta(get_the_ID(), 'Minutage', true)) : ?>
|
||||
<tr class="border-jlg-white border-b font-authentic-60 w-full flex flex-row py-6 isContentPart">
|
||||
<tr class="border-jlg-light-white border-b font-authentic-60 w-full flex flex-row py-6 isContentPart">
|
||||
<td class="block text-sm pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Minutage', true) }}</td>
|
||||
<td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Images', true) }}</td>
|
||||
<td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}</td>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<footer class="fixed w-full h-1/12 py-4 bottom-0 bg-jlg-dark-blue border-t border-jlg-light-white flex justify-between">
|
||||
<footer class="fixed w-full h-[8vh] py-4 bottom-0 bg-jlg-dark-blue border-t border-jlg-light-white flex justify-between">
|
||||
<!-- @php(dynamic_sidebar('sidebar-footer'))-->
|
||||
<div class="text-sm">
|
||||
<button class="px-4 py-2 rounded-md ml-6 underline underline-offset-8 hover:underline-offset-4 active:underline-offset-8">À PROPOS</button>
|
||||
@@ -6,16 +6,16 @@
|
||||
</div>
|
||||
<div class="mr-6 flex items-center">
|
||||
<a href="https://www.thalim.cnrs.fr/?lang=fr" target="_blank" class="w-12 mr-4">
|
||||
<img class="w-full h-auto" alt="thalim" src="@asset('images/logos/thalim.png')">
|
||||
<img class="w-full h-auto" alt="thalim" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/thalim.png">
|
||||
</a>
|
||||
<a href="http://www.univ-paris3.fr/" target="_blank" class="w-24 mr-4">
|
||||
<img class="w-full h-auto" alt="sorbonne" src="@asset('images/logos/sorbonne.png')">
|
||||
<img class="w-full h-auto" alt="sorbonne" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/sorbonne.png">
|
||||
</a>
|
||||
<a href="https://www.cnrs.fr/fr" target="_blank" class="w-12 mr-4">
|
||||
<img class="w-full h-auto" alt="cnrs" src="@asset('images/logos/cnrs.png')">
|
||||
<img class="w-full h-auto" alt="cnrs" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/cnrs.png">
|
||||
</a>
|
||||
<a href="https://www.huma-num.fr/" target="_blank" class="w-12">
|
||||
<img class="w-full h-auto" alt="humanum" src="@asset('images/logos/huma-num.png')">
|
||||
<img class="w-full h-auto" alt="humanum" src="<?= get_template_directory_uri(); ?>/resources/assets/images/logos/huma-num.png">
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user