diverses améliorations de la mep

This commit is contained in:
Valentin
2023-06-28 02:30:30 +02:00
parent f6c332adca
commit 90e84441a5
2 changed files with 104 additions and 12 deletions
@@ -12,6 +12,7 @@
margin-bottom: 16mm; margin-bottom: 16mm;
bleed: 6mm; bleed: 6mm;
color: black; color: black;
marks: crop;
} }
@page:left { @page:left {
@@ -127,6 +128,7 @@ h3 {
.latour, .lampe { .latour, .lampe {
font-family: 'Novel'; font-family: 'Novel';
font-weight: normal; font-weight: normal;
margin-top: 20mm;
margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols)); margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
margin-right: -16mm; margin-right: -16mm;
margin-bottom: 20mm; margin-bottom: 20mm;
@@ -139,6 +141,12 @@ h3 {
padding-top: 10mm; padding-top: 10mm;
} }
.encart-split {
position: absolute;
margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
background-color: #fbf2e7;
}
.pagedjs_left_page .latour, .pagedjs_left_page .lampe { .pagedjs_left_page .latour, .pagedjs_left_page .lampe {
padding-right: 10mm; padding-right: 10mm;
width: 128.375mm; width: 128.375mm;
@@ -168,7 +176,6 @@ h3 {
} }
.lampe { .lampe {
margin-top: 20mm;
padding-top: 3mm; padding-top: 3mm;
padding-bottom: 3mm; padding-bottom: 3mm;
} }
@@ -183,7 +190,7 @@ img {
} }
.fullpageimage { .fullpageimage {
margin-top: -16mm; margin-top: -22mm;
margin-left: -10mm; margin-left: -10mm;
width: 171mm; width: 171mm;
height: 230mm; height: 230mm;
@@ -197,31 +204,37 @@ img {
height: 100%; height: 100%;
} }
.tripleimgs { .tripleimgs,
.tripleimgs_bottom {
break-before: page; break-before: page;
break-after: page break-after: page
} }
.tripleimgs img:nth-of-type(2) { .tripleimgs img:nth-of-type(2),
.tripleimgs_bottom img:first-of-type {
width: calc(50% - 1mm); width: calc(50% - 1mm);
margin-right: 2mm; margin-right: 2mm;
} }
.tripleimgs img:last-of-type { .tripleimgs img:last-of-type,
.tripleimgs_bottom img:nth-of-type(2) {
width: calc(50% - 1mm); width: calc(50% - 1mm);
} }
.tripleimgs2 { .tripleimgs2,
.tripleimgs2_bottom {
break-before: page; break-before: page;
break-after: page break-after: page
} }
.tripleimgs2 img:nth-of-type(2) { .tripleimgs2 img:nth-of-type(2),
.tripleimgs2_bottom img:first-of-type {
width: calc(37.5% - 1mm); width: calc(37.5% - 1mm);
margin-right: 2mm; margin-right: 2mm;
} }
.tripleimgs2 img:last-of-type { .tripleimgs2 img:last-of-type,
.tripleimgs2_bottom img:nth-of-type(2) {
width: calc(62.5% - 1mm); width: calc(62.5% - 1mm);
} }
@@ -232,17 +245,42 @@ img {
overflow: hidden; overflow: hidden;
} }
.imgfullspreadright {
break-before: left;
break-after: left;
width: 149mm;
overflow: hidden;
}
.imgfullspreadleft img { .imgfullspreadleft img {
height: 198mm; height: 198mm;
width: auto; width: auto;
} }
.imgfullspreadright img {
height: 198mm;
width: auto;
}
.imgfullspreadleft-right { .imgfullspreadleft-right {
width: 149mm; width: 149mm;
overflow: hidden; overflow: hidden;
margin-left: -16mm; margin-left: -16mm;
} }
.imgfullspreadright-right {
width: 149mm;
margin-left: -8mm;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
.imgfullspreadright-right img {
height: 198mm;
width: auto;
}
.imgfullspreadleft-right img { .imgfullspreadleft-right img {
height: 198mm; height: 198mm;
width: auto; width: auto;
@@ -145,10 +145,10 @@
} }
} }
// images collées en bas // images collées en bas
let bottomImgs = document.getElementsByClassName('bottomimg'); let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
for (let i = 0; i < bottomImgs.length; i++) { for (let i = 0; i < bottomImgs.length; i++) {
let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].firstElementChild.getBoundingClientRect().bottom) + 'px)'; bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
} }
// éléments justifiés pas nécessaires // éléments justifiés pas nécessaires
let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']"); let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
@@ -161,16 +161,70 @@
} }
} }
// images fullspread // images fullspread
let fullspreadEl = document.getElementsByClassName('imgfullspreadleft'); let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright');
for (let i = 0; i < fullspreadEl.length; i++) { for (let i = 0; i < fullspreadEl.length; i++) {
let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src'); let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content'); let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
let imgOverflowEl = document.createElement('div'); let imgOverflowEl = document.createElement('div');
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right'); if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
} else {
imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
}
let imgOverflow = document.createElement('img'); let imgOverflow = document.createElement('img');
imgOverflow.src = imgSrc; imgOverflow.src = imgSrc;
imgOverflowEl.append(imgOverflow); imgOverflowEl.append(imgOverflow);
nextPage[0].append(imgOverflowEl); nextPage[0].append(imgOverflowEl);
if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
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);
}
} }
} }
} }