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);
    }

    afterPreview(pages) {
        // afficher correctement les éléments en marge
        let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
        for (let i = 0; i < topLeftBoxes.length; i++) {
            topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
        }
        let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
        for (let i = 0; i < bottomLeftBoxes.length; i++) {
            bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
        }

        // 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")) {
                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);
            }
        }

        // TITRES
        let h3s = document.querySelectorAll('h3');
        for (let h3 of h3s) {
            if (h3.nextSibling.firstChild.tagName == "IMG") {
                h3.style.position = "absolute";
                h3.style.top = "40%";

                h3.nextSibling.style.position = "absolute";
                h3.nextSibling.style.top = "5%";
            }
            if (h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ')?.firstChild.firstChild.firstChild.tagName == "IMG") {
                let coverImg = h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ').firstChild.childNodes[0];
                coverImg.style.position = "absolute";
                coverImg.style.top = "-22mm";
                coverImg.style.left = "96mm";
                coverImg.style.height = "220mm";
                coverImg.style.width = "53mm";
                coverImg.style.overflow = "hidden";
                coverImg.firstChild.style.height = "100%";
                coverImg.firstChild.style.width = "auto";
                
                console.log(coverImg);
                h3.parentElement.append(coverImg);

                let nextImg = document.createElement('img');
                nextImg.setAttribute('src', coverImg.firstChild.getAttribute('src'));

                
                h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ').append(nextImg);
                
                nextImg.parentElement.style.position = "absolute";
                nextImg.parentElement.style.top = "-22mm";
                nextImg.parentElement.style.left = "-8mm";
                nextImg.parentElement.style.height = "220mm";
                nextImg.parentElement.style.width = "171mm";
                nextImg.parentElement.style.overflow = "hidden";
                nextImg.style.height = "100%";
                nextImg.style.width = "auto";
                nextImg.style.marginLeft = "-53mm";
            }

            h3.closest('.pagedjs_pagebox').querySelector('.pagedjs_margin-left').innerHTML = '';
        }
        let h4s = document.querySelectorAll('h4');
        for (let h4 of h4s) {
            if (h4.nextElementSibling?.classList.contains('bibliographie')) {
                h4.style.color = "#d98a29";
            }
        }
        // loading
        document.querySelector('body').style.opacity = "1";
        document.querySelector('body').style.overflow = "scroll";
    }
}
Paged.registerHandlers(setMarginTexts);