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

// images double-page
if (debug) console.log('start imgsFullspread');

(function() {

    let fullspreadElements = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed, .doublepage_bigleft, .doublepage_bigright');

    for (let fullspreadEl of fullspreadElements) {
        let imgSrc = fullspreadEl.firstElementChild?.getAttribute('src');
        let nextPage = fullspreadEl.closest('.pagedjs_page')?.nextElementSibling?.querySelector('.pagedjs_page_content');
        let imgOverflowEl = document.createElement('div');

        switch(true) {
            case fullspreadEl.classList.contains('imgfullspreadleft'):
                imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
                break;
            case fullspreadEl.classList.contains('imgfullspreadright'):
                imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
                break;
            case fullspreadEl.classList.contains('imgfullspreadright_bleedtop'):
                imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
                break;
            case fullspreadEl.classList.contains('imgfullspreadright_bleed'):
                imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
                break;
            case fullspreadEl.classList.contains('doublepage_bigleft'):
                imgOverflowEl.setAttribute('class', 'overflow_bigimgleft');
                break;
            case fullspreadEl.classList.contains('doublepage_bigright'):
                imgOverflowEl.setAttribute('class', 'overflow_bigimgright');
                break;
            default:
                break;
        }
        
        let imgOverflow = document.createElement('img');
        imgOverflow.src = imgSrc;
        imgOverflowEl.append(imgOverflow);

        if (nextPage) nextPage.append(imgOverflowEl);

        if (fullspreadEl.classList.contains('imgfullspreadright')
        || fullspreadEl.classList.contains('imgfullspreadright_bleedtop')
        || fullspreadEl.classList.contains('imgfullspreadright_bleed')) {
            let imgLeft = fullspreadEl.firstElementChild;
            let imgMargin = imgOverflowEl.getBoundingClientRect().right - imgLeft?.getBoundingClientRect().right;
            if (imgLeft) imgLeft.style.marginLeft = `${imgMargin}px`;
        }
        if (fullspreadEl.classList.contains('doublepage_bigleft')
        || fullspreadEl.classList.contains('doublepage_bigright')) {
            let smallImgSrc = fullspreadEl.lastElementChild?.getAttribute('src');
            fullspreadEl.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.classList.contains('doublepage_bigleft') && nextPage) {
                nextPage.append(smallImgEl);
            } else {
                fullspreadEl.parentElement?.append(smallImgEl);
            }
        }
    }

    // fullpage img page gauche
    let fullPageImgs = document.querySelectorAll('.fullpageimage');
    for (let fullPageImg of fullPageImgs) {
        if (fullPageImg.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode // désolé
            .classList.contains('pagedjs_left_page')) {
            fullPageImg.style.marginLeft = '-22mm';
        }
    }

})();

if (debug) console.log('end imgsFullspread');