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 i = 0; i < bottomImgs.length; i++) {
            let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
            bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + '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');
        for (let i = 0; i < fullspreadEl.length; i++) {
            let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
            let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.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');
            }
            let imgOverflow = document.createElement('img');
            imgOverflow.src = imgSrc;
            imgOverflowEl.append(imgOverflow);
            nextPage[0].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';
            }
        }
        // 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 bleed
        let encarts = document.querySelectorAll('.latour, .lampe');
        for (let i = 0; i < encarts.length; i++) {
            if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
            .classList.contains('pagedjs_right_page')) {
                encarts[i].style.marginRight = '-22mm';
                encarts[i].style.paddingRight = '22mm';
            }
            if (encarts[i].hasAttribute('data-split-original')) {
                let plainColor = document.createElement('div');
                let plainHeight = encarts[i]
                .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                .getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
                plainColor.setAttribute('class', 'encart-split');
                if (encarts[i]
                .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                .classList.contains('pagedjs_right_page')) {
                    plainColor.style.width = "149mm";
                } else {
                    plainColor.style.width = "129mm";
                }
                plainColor.style.height = plainHeight + "px";
                encarts[i].parentNode.append(plainColor);
            } else if (encarts[i].hasAttribute('data-split-from')) {
                let plainColor = document.createElement('div');
                plainColor.setAttribute('class', 'encart-split');
                if (encarts[i]
                .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                .classList.contains('pagedjs_right_page')) {
                    plainColor.style.width = "149mm";
                } else {
                    plainColor.style.width = "129mm";
                }
                plainColor.style.height = "22mm";
                plainColor.style.top = "-22mm";
                encarts[i].parentNode.prepend(plainColor);
            }

            if (encarts[i].previousElementSibling === null) {
                encarts[i].style.marginTop = '0';
                if (encarts[i].hasAttribute('data-split-original')) {
                    encarts[i].parentElement.style.height = '214mm';
                    encarts[i].style.paddingBottom = '0 !important';
                    encarts[i].style.height = "100%";
                    encarts[i].nextElementSibling.style.height = '22mm';
                    encarts[i].nextElementSibling.style.bottom = '-22mm';
                    encarts[i].nextElementSibling.style.right = '-28.5mm';
                }
            }
        }

        // 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) {
                    console.log('2 toffs');
                    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 {
                    console.log('1 toff');
                    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);
            } else {
                console.log('0 toff');
            }
            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, .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);