carnet_atterrissage/user/themes/carnet-atterrissage/js/layout.js

// 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) {
        // 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 textBottom = bottomVignette.previousElementSibling.getBoundingClientRect().bottom;
            let vignetteSize = bottomVignette.getBoundingClientRect().height;
            if (bottomVignette.previousElementSibling.classList.contains('labeur')) {
                bottomVignette.style.marginTop = `${(pageBottom - textBottom) - vignetteSize}px`;
            }
            bottomVignette.style.transform = 'translateY(12px)';
        }
        // é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.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
            .classList.add('atelier_cover_page');
        }

        // SET COLORS
        let colors = [
            '#5595a1',
            '#5f9796',
            '#65998d',
            '#6f9b80',
            '#799e75',
            '#83a16b',
            '#8ba460',
            '#95a358',
            '#9ca151',
            '#a59d4a',
            '#af9944',
            '#b8963d',
            '#b8963d',
            '#b8963d'
        ]

        // TITRES PARTIES
        let h2s = document.querySelectorAll('h2');
        for (let i = 0; i < h2s.length; i++) {
            if (i != 0) {
                let parentSheet = h2s[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
                parentSheet.style.backgroundColor = colors[i];
                parentSheet.querySelector('.pagedjs_margin-left').innerHTML = '';
                parentSheet.parentElement.classList.add('partie_cover_page');
                let nextPage = parentSheet.parentElement.nextElementSibling?.firstElementChild;
                if (nextPage) {
                    nextPage.style.backgroundColor = colors[i];
                }
                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();
                h2s[i].parentElement.parentElement.parentElement.parentElement.style.display = 'flex';
                h2s[i].parentElement.parentElement.parentElement.parentElement.style.alignItems = 'center';
            }
        }

        // 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;
            let currentPage = contentDiv.parentElement.parentElement.parentElement.parentElement.parentElement;
            if(currentPage.id != "page-1") {
                let previousPage = currentPage.previousElementSibling;
                while (previousPage) {
                    if (previousPage.classList.contains('atelier_cover_page')) {
                        textToPut = previousPage.querySelector('h3').innerText;
                        break;
                    }
                    previousPage = previousPage.previousElementSibling;
                }
            }
            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;
            let currentPage = contentDiv.parentElement.parentElement.parentElement.parentElement.parentElement;
            if(currentPage.id != "page-1") {
                let previousPage = currentPage.previousElementSibling;
                while (previousPage) {
                    if (previousPage.classList.contains('partie_cover_page')) {
                        textToPut = previousPage.querySelector('h2').innerText;
                        break;
                    }
                    previousPage = previousPage.previousElementSibling;
                }
            }
            contentDiv.append(textToPut);
            contentDiv.style.marginBottom = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
        }

        // set all colors
        let allPages = document.querySelectorAll('.pagedjs_page');
        let partieColor = '';
        let bgColor = 'rgb(245, 245, 245)';
        for (let page of allPages) {
            if (page.classList.contains('partie_cover_page')) {
                partieColor = page.firstElementChild.style.backgroundColor;
            }
            let pageCounter = page.querySelector('.pagedjs_margin-left-middle')
            if (pageCounter) {
                pageCounter.style.color = partieColor;
            }
            let atelierTitle = page.querySelector('h3');
            if (atelierTitle) {
                atelierTitle.style.color = partieColor;
            }
            let bibliographie = page.querySelector('.bibliographie');
            if (bibliographie) {
                bibliographie.style.color = partieColor;
                // set bg et sprays
                let bibliographiePage = bibliographie.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
                bibliographiePage.style.backgroundColor = bgColor;
                bibliographiePage.parentElement.nextElementSibling.firstElementChild.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 = partieColor;
            }
            let links = page.querySelectorAll('a');
            for (let link of links) {
                link.style.color = partieColor;
            }
            let lightColor = partieColor.slice(0, -1) + ', 0.1)';
            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);