// 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.previousElementSibling.classList.contains('citation') ||
bottomVignette.previousElementSibling.classList.contains('free') ||
bottomVignette.previousElementSibling.classList.contains('temps')) {
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')) {
encart.style.marginTop = "0mm";
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
' + 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("
", " ") + " ";
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'
]
let sprays = [
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page001.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page002.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page003.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page004.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page005.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page006.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page007.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page008.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page009.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page010.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page011.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page012.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page013.png',
'/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page014.png'
]
// 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 citations = page.querySelectorAll('.citation');
for (let citation of citations) {
// dessiner et colorer les guillemets
if (citation.innerText.charAt(0) === '“') {
citation.innerText = citation.innerText.substring(1);
}
if (citation.innerText.charAt(citation.innerText.length - 1) === '”') {
citation.innerText = citation.innerText.substring(0, citation.innerText.length - 1);
}
let guillemetOuvrant = document.createElement('div');
guillemetOuvrant.innerText = '“';
guillemetOuvrant.style.color = atelierColor;
guillemetOuvrant.classList.add('guillement_ouvrant');
citation.prepend(guillemetOuvrant);
let guillemetFermant = document.createElement('div');
guillemetFermant.innerText = '”';
guillemetFermant.style.color = atelierColor;
guillemetFermant.classList.add('guillement_fermant');
citation.append(guillemetFermant);
}
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 (!bibliographie.closest('.pagedjs_page').previousElementSibling.querySelector('.bibliographie')) {
if (nextPage) {
nextPage.style.backgroundColor = bgColor;
}
let sprayImg = document.createElement('img');
sprayImg.setAttribute('src', sprays[atelierIndex]);
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('.bibliographie').insertAdjacentElement("afterend", sprayImg);
}
}
let h4 = page.querySelector('h4');
if (h4 && h4?.nextElementSibling?.classList.contains('bibliographie')) {
h4.style.color = atelierColor;
}
let serpentins = document.querySelectorAll('img[alt="serpentin"]');
for (let serpentin of serpentins) {
let page = serpentin.closest('.pagedjs_page');
let nextPage = page.nextElementSibling;
page.style.backgroundColor = "rgb(245, 245, 245)";
nextPage.style.backgroundColor = "rgb(245, 245, 245)";
}
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);