404 lines
20 KiB
JavaScript
404 lines
20 KiB
JavaScript
// fonction s'éxecute après le rendu de pagedJS
|
|
// cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
|
|
class setMarginTexts extends Paged.Handler {
|
|
constructor(chunker, polisher, caller) {
|
|
super(chunker, polisher, caller);
|
|
}
|
|
|
|
afterParsed(parsed) {
|
|
// indication du chargement
|
|
let chargement = document.createElement('div');
|
|
chargement.setAttribute('id', 'chargement');
|
|
chargement.innerHTML = 'chargement';
|
|
chargement.style.color = "orange";
|
|
chargement.style.position = "fixed";
|
|
chargement.style.fontWeight = "bold";
|
|
chargement.style.zIndex = "9999";
|
|
document.querySelector('body').prepend(chargement);
|
|
}
|
|
|
|
afterPreview(pages) {
|
|
// donner class à la dernière page
|
|
let lastElement = $('.pagedjs_page').last();
|
|
lastElement.addClass('last-page');
|
|
|
|
// cleaner pour que les paragraphes tombent sur la marge haute
|
|
for (let i = 0; i < labeurs.length; i++) {
|
|
if (labeurs[i] == labeurs[i].parentNode?.firstElementChild
|
|
&& !labeurs[i].firstElementChild?.hasAttribute("data-split-from")) {
|
|
if (labeurs[i].firstElementChild) {
|
|
labeurs[i].firstElementChild.style.marginTop = "0px";
|
|
}
|
|
}
|
|
}
|
|
// pareil pour les titres temps
|
|
for (let i = 0; i < moments.length; i++) {
|
|
if (moments[i].previousElementSibling?.tagName === "P"
|
|
&& moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
|
|
moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
|
|
}
|
|
}
|
|
// enlever les paragraphes vides
|
|
let paragraphes = document.querySelectorAll("p");
|
|
for (let i = 0; i < paragraphes.length; i++) {
|
|
if (paragraphes[i].innerHTML == "") {
|
|
paragraphes[i].remove();
|
|
}
|
|
}
|
|
// images collées en bas
|
|
let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
|
|
for (let bottomImg of bottomImgs) {
|
|
let pageBottom = bottomImg.closest('.pagedjs_area').getBoundingClientRect().bottom;
|
|
bottomImg.style.transform = 'translateY(' + (pageBottom - bottomImg.lastElementChild.getBoundingClientRect().bottom) + 'px)';
|
|
}
|
|
let bottomVignettes = document.querySelectorAll('.imgsmall_bottom'); // pour les images en bas dans les pages avec du texte
|
|
for (let bottomVignette of bottomVignettes) {
|
|
let pageBottom = bottomVignette.closest('.pagedjs_area').getBoundingClientRect().bottom;
|
|
let vignetteSize = bottomVignette.getBoundingClientRect().height;
|
|
if (bottomVignette.previousElementSibling) {
|
|
let textBottom = bottomVignette.previousElementSibling.getBoundingClientRect().bottom;
|
|
if (bottomVignette.previousElementSibling.classList.contains('labeur')) {
|
|
bottomVignette.style.marginTop = `${(pageBottom - textBottom) - vignetteSize}px`;
|
|
}
|
|
bottomVignette.style.transform = 'translateY(12px)';
|
|
} else {
|
|
let vignetteBottom = bottomVignette.getBoundingClientRect().bottom;
|
|
bottomVignette.style.transform = `translateY(${pageBottom - vignetteBottom}px)`;
|
|
}
|
|
}
|
|
// éléments justifiés pas nécessaires
|
|
let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
|
|
for (let i = 0; i < justifiedSplitEl.length; i++) {
|
|
for (let j = 0; j < justifiedSplitEl[i].childNodes.length; j++) {
|
|
let elStyle = justifiedSplitEl[i].childNodes[j].style;
|
|
if (elStyle != undefined) {
|
|
elStyle.textAlignLast = "left";
|
|
}
|
|
}
|
|
}
|
|
// images fullspread
|
|
let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed, .doublepage_bigleft, .doublepage_bigright');
|
|
for (let i = 0; i < fullspreadEl.length; i++) {
|
|
let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
|
|
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelector('.pagedjs_page_content');
|
|
let imgOverflowEl = document.createElement('div');
|
|
if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
|
|
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
|
|
} else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
|
|
imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
|
|
} else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) {
|
|
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
|
|
} else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
|
|
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
|
|
} else if (fullspreadEl[i].classList.contains('doublepage_bigleft')) {
|
|
imgOverflowEl.setAttribute('class', 'overflow_bigimgleft');
|
|
} else if (fullspreadEl[i].classList.contains('doublepage_bigright')) {
|
|
imgOverflowEl.setAttribute('class', 'overflow_bigimgright');
|
|
}
|
|
let imgOverflow = document.createElement('img');
|
|
imgOverflow.src = imgSrc;
|
|
imgOverflowEl.append(imgOverflow);
|
|
nextPage.append(imgOverflowEl);
|
|
if (fullspreadEl[i].classList.contains('imgfullspreadright')
|
|
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
|
|
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
|
|
let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
|
|
fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
|
|
}
|
|
if (fullspreadEl[i].classList.contains('doublepage_bigleft') || fullspreadEl[i].classList.contains('doublepage_bigright')) {
|
|
let smallImgSrc = fullspreadEl[i].lastElementChild.getAttribute('src');
|
|
fullspreadEl[i].lastElementChild.remove();
|
|
let smallImg = document.createElement('img');
|
|
smallImg.setAttribute('src', smallImgSrc);
|
|
let smallImgEl = document.createElement('div');
|
|
smallImgEl.classList.add('dp_sm_img');
|
|
smallImgEl.append(smallImg);
|
|
if (fullspreadEl[i].classList.contains('doublepage_bigleft')) {
|
|
nextPage.append(smallImgEl);
|
|
} else {
|
|
fullspreadEl[i].parentElement.append(smallImgEl);
|
|
}
|
|
}
|
|
}
|
|
|
|
// fullpage img page gauche
|
|
let fullPageImg = document.getElementsByClassName('fullpageimage');
|
|
for (let i = 0; i < fullPageImg.length; i++) {
|
|
if (fullPageImg[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
|
.classList.contains('pagedjs_left_page')) {
|
|
fullPageImg[i].style.marginLeft = '-22mm';
|
|
}
|
|
}
|
|
// encarts
|
|
let encarts = document.querySelectorAll('.latour, .lampe, .latour_nohead, .lampe_nohead');
|
|
for (let encart of encarts) {
|
|
if (encart.previousElementSibling != null) {
|
|
encart.style.marginTop = '10mm';
|
|
}
|
|
if (encart.nextElementSibling != null) {
|
|
encart.style.marginBottom = '10mm';
|
|
}
|
|
|
|
if (encart.hasAttribute('data-split-to')) {
|
|
let plainColor = document.createElement('div');
|
|
plainColor.setAttribute('class', 'encart-split');
|
|
let plainHeight = encart.closest('.pagedjs_sheet').getBoundingClientRect().bottom - encart.getBoundingClientRect().bottom;
|
|
if (encart.closest('.pagedjs_page').classList.contains('pagedjs_right_page')) {
|
|
plainColor.style.width = "149mm";
|
|
} else {
|
|
plainColor.style.width = "129mm";
|
|
}
|
|
plainColor.style.height = `${plainHeight}px`;
|
|
encart.parentNode.append(plainColor);
|
|
}
|
|
|
|
if (encart.hasAttribute('data-split-from')) {
|
|
let plainColor = document.createElement('div');
|
|
plainColor.setAttribute('class', 'encart-split');
|
|
if (encart.closest('.pagedjs_page').classList.contains('pagedjs_right_page')) {
|
|
plainColor.style.width = "149mm";
|
|
} else {
|
|
plainColor.style.width = "129mm";
|
|
}
|
|
plainColor.style.height = "22mm";
|
|
plainColor.style.top = "-22mm";
|
|
encart.parentNode.prepend(plainColor);
|
|
}
|
|
}
|
|
|
|
// TITRES ATELIERS
|
|
let h3s = document.querySelectorAll('h3');
|
|
for (let h3 of h3s) {
|
|
if (h3.nextSibling?.firstChild.tagName === "IMG") {
|
|
let coverPhoto;
|
|
let photoContainer = h3.nextElementSibling;
|
|
if (h3.nextSibling?.children.length === 2) {
|
|
coverPhoto = h3.nextElementSibling.children[1];
|
|
let coverDessin = document.createElement('img');
|
|
coverDessin.setAttribute('src', photoContainer.firstElementChild.getAttribute('src'));
|
|
h3.prepend(coverDessin);
|
|
coverDessin.style.width = '100%';
|
|
coverDessin.style.height = 'auto';
|
|
photoContainer.firstElementChild.remove();
|
|
} else {
|
|
coverPhoto = h3.nextElementSibling.firstChild;
|
|
}
|
|
photoContainer.style.position = 'absolute';
|
|
photoContainer.style.width = '53mm';
|
|
photoContainer.style.height = '220mm';
|
|
photoContainer.style.overflow = 'hidden';
|
|
photoContainer.style.top = "-22mm";
|
|
photoContainer.style.left = "96mm";
|
|
photoContainer.style.margin = '0';
|
|
|
|
coverPhoto.style.width = 'auto';
|
|
coverPhoto.style.height = '100%';
|
|
|
|
let nextImg = document.createElement('img');
|
|
nextImg.setAttribute('src', coverPhoto.getAttribute('src'));
|
|
let nextContainer = document.createElement('div');
|
|
|
|
nextContainer.style.position = "absolute";
|
|
nextContainer.style.top = "-22mm";
|
|
nextContainer.style.left = "-8mm";
|
|
nextContainer.style.height = "220mm";
|
|
nextContainer.style.width = "224mm";
|
|
nextContainer.style.overflow = "hidden";
|
|
nextContainer.style.marginLeft = "-53mm";
|
|
nextImg.style.height = "100%";
|
|
nextImg.style.width = "auto";
|
|
|
|
nextContainer.append(nextImg);
|
|
|
|
h3.closest('.pagedjs_page').nextElementSibling?.querySelector('.pagedjs_page_content').append(nextContainer);
|
|
}
|
|
h3.style.position = 'absolute';
|
|
h3.style.top = `${(h3.closest('.pagedjs_page_content').offsetHeight - h3.offsetHeight) / 3}px`;
|
|
|
|
h3.closest('.pagedjs_pagebox').querySelector('.pagedjs_margin-left').innerHTML = '';
|
|
h3.closest('.pagedjs_sheet').classList.add('atelier_cover_page');
|
|
}
|
|
|
|
// TITRES PARTIES
|
|
let h2s = document.querySelectorAll('h2');
|
|
for (let i = 0; i < h2s.length; i++) {
|
|
if (i != 0) {
|
|
let parentSheet = h2s[i].closest('.pagedjs_sheet');
|
|
parentSheet.querySelector('.pagedjs_margin-left').innerHTML = '';
|
|
parentSheet.classList.add('partie_cover_page');
|
|
parentSheet.parentElement.nextElementSibling?.firstElementChild.classList.add('partie_cover_page_right');
|
|
let partieCount = document.createElement('div');
|
|
partieCount.classList.add('partie_count');
|
|
let romanCount;
|
|
switch (i) {
|
|
case 1: romanCount = 'I'; break;
|
|
case 2: romanCount = 'II'; break;
|
|
case 3: romanCount = 'III'; break;
|
|
case 4: romanCount = 'IV'; break;
|
|
case 5: romanCount = 'V'; break;
|
|
case 6: romanCount = 'VI'; break;
|
|
case 7: romanCount = 'VII'; break;
|
|
case 8: romanCount = 'VIII'; break;
|
|
case 9: romanCount = 'IX'; break;
|
|
case 10: romanCount = 'X'; break;
|
|
}
|
|
partieCount.innerHTML = 'Partie<br>' + romanCount;
|
|
h2s[i].parentElement.prepend(partieCount);
|
|
h2s[i].nextElementSibling?.remove();
|
|
}
|
|
}
|
|
|
|
// afficher correctement les éléments en marge
|
|
let topLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-top');
|
|
for (let topLeftBox of topLeftBoxes) {
|
|
let contentDiv = topLeftBox.firstElementChild;
|
|
let textToPut = document.createElement('p');
|
|
let atelierGras;
|
|
let currentPage = contentDiv.closest('.pagedjs_page');
|
|
if (currentPage.id != "page-1") {
|
|
let previousPage = currentPage.previousElementSibling;
|
|
while (previousPage) {
|
|
if (previousPage.firstElementChild.classList.contains('atelier_cover_page')) {
|
|
textToPut.innerText = previousPage.querySelector('h3').innerText;
|
|
let words = textToPut.innerText.split(' ');
|
|
let num = parseInt(words[0], 10);
|
|
if (!isNaN(num)) {
|
|
atelierGras = document.createElement('span');
|
|
atelierGras.style.fontWeight = "bold";
|
|
atelierGras.innerText = `Atelier ${num} `;
|
|
textToPut.innerText = textToPut.innerText.substring(1);
|
|
}
|
|
break;
|
|
}
|
|
previousPage = previousPage.previousElementSibling;
|
|
}
|
|
}
|
|
if (atelierGras) {
|
|
textToPut.prepend(atelierGras);
|
|
}
|
|
contentDiv.append(textToPut);
|
|
contentDiv.style.marginTop = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
|
|
}
|
|
|
|
let bottomLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-bottom');
|
|
for (let bottomLeftBox of bottomLeftBoxes) {
|
|
let contentDiv = bottomLeftBox.firstElementChild;
|
|
let textToPut = document.createElement('p');
|
|
let partieGras;
|
|
let currentPage = contentDiv.closest('.pagedjs_page');
|
|
if (currentPage.id != "page-1") {
|
|
let previousPage = currentPage.previousElementSibling;
|
|
while (previousPage) {
|
|
if (previousPage.firstElementChild.classList.contains('partie_cover_page')) {
|
|
textToPut.innerText = previousPage.querySelector('h2').innerText;
|
|
partieGras = document.createElement('span');
|
|
partieGras.style.fontWeight = "bold";
|
|
partieGras.innerText = previousPage.querySelector('.partie_count').innerHTML.replace("<br>", " ") + " ";
|
|
break;
|
|
}
|
|
previousPage = previousPage.previousElementSibling;
|
|
}
|
|
}
|
|
if (!textToPut.innerText) {
|
|
textToPut.innerText = "Introduction";
|
|
}
|
|
if (partieGras) {
|
|
textToPut.prepend(partieGras);
|
|
}
|
|
contentDiv.append(textToPut);
|
|
contentDiv.style.marginBottom = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
|
|
}
|
|
|
|
// SET COLORS
|
|
let colors = [
|
|
'#5595a1',
|
|
'#5f9796',
|
|
'#65998d',
|
|
'#6f9b80',
|
|
'#799e75',
|
|
'#83a16b',
|
|
'#8ba460',
|
|
'#95a358',
|
|
'#9ca151',
|
|
'#a59d4a',
|
|
'#af9944',
|
|
'#b8963d',
|
|
'#c19238',
|
|
'#cb8e31'
|
|
]
|
|
|
|
// set all colors
|
|
let allPages = document.querySelectorAll('.pagedjs_page');
|
|
let atelierColor = '';
|
|
let bgColor = 'rgb(245, 245, 245)';
|
|
let atelierIndex = 0;
|
|
for (let page of allPages) {
|
|
if (page.firstElementChild.classList.contains('atelier_cover_page')) {
|
|
atelierColor = colors[atelierIndex];
|
|
if (atelierColor == undefined) {
|
|
atelierColor = colors[colors.length];
|
|
}
|
|
atelierIndex++;
|
|
}
|
|
if (page.firstElementChild.classList.contains('partie_cover_page')) {
|
|
atelierIndex = 0;
|
|
}
|
|
let pageCounter = page.querySelector('.pagedjs_margin-left-middle')
|
|
if (pageCounter) {
|
|
pageCounter.style.color = atelierColor;
|
|
}
|
|
let atelierTitle = page.querySelector('h3');
|
|
if (atelierTitle) {
|
|
atelierTitle.style.color = atelierColor;
|
|
}
|
|
let bibliographie = page.querySelector('.bibliographie');
|
|
if (bibliographie) {
|
|
bibliographie.style.color = atelierColor;
|
|
// set bg et sprays
|
|
let bibliographiePage = bibliographie.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
|
|
bibliographiePage.style.backgroundColor = bgColor;
|
|
let nextPage = bibliographiePage.parentElement?.nextElementSibling?.firstElementChild;
|
|
if (nextPage) {
|
|
nextPage.style.backgroundColor = bgColor;
|
|
}
|
|
let sprayImg = document.createElement('img');
|
|
sprayImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page001.png');
|
|
sprayImg.style.height = "242mm";
|
|
sprayImg.style.width = "60mm";
|
|
sprayImg.style.position = "absolute";
|
|
sprayImg.style.top = "-22mm";
|
|
sprayImg.style.right = "-20mm";
|
|
sprayImg.style.mixBlendMode = "multiply";
|
|
bibliographiePage.parentElement.nextElementSibling?.querySelector('.pagedjs_page_content').prepend(sprayImg);
|
|
|
|
}
|
|
let h4 = page.querySelector('h4');
|
|
if (h4 && h4?.nextElementSibling?.classList.contains('bibliographie')) {
|
|
h4.style.color = atelierColor;
|
|
}
|
|
let links = page.querySelectorAll('a');
|
|
for (let link of links) {
|
|
link.style.color = atelierColor;
|
|
}
|
|
if (atelierColor) {
|
|
let lightColor = `${atelierColor}1a`;
|
|
let encarts = page.querySelectorAll('.lampe, .latour, .lampe_nohead, .latour_nohead, .encart-split');
|
|
for (let encart of encarts) {
|
|
encart.style.backgroundColor = lightColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// all links open in a new tab
|
|
let links = document.querySelectorAll('a');
|
|
for (let link of links) {
|
|
link.setAttribute('target', '_blank');
|
|
}
|
|
|
|
// loading fini
|
|
document.querySelector('#chargement').remove();
|
|
}
|
|
}
|
|
Paged.registerHandlers(setMarginTexts);
|