123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- // 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<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'
- ]
- 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);
|