Julie/decor-6-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

imposition planche

Browse source
This commit is contained in:
Julie Blanc 2026-04-14 17:11:55 +02:00
parent fcf33d3c79
commit 5afef4d2d4
9 changed files with 104 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

80
assets/js/plugins/imposition.js
View file

@ -49,6 +49,86 @@ class Booklet extends Paged.Handler {
}
/* SPREAD (PLANCHE) ------------------------------------------------*/
window.addEventListener("beforeprint", () => {
if (!window.enableSpread) return;
injectSpreadCSS();
});
window.addEventListener("afterprint", () => {
window.enableSpread = false;
let s = document.getElementById("spread-planche-style");
if (s) s.remove();
});
function injectSpreadCSS() {
let format = document.querySelector(".pagedjs_page");
let width = getCSSCustomProp("--pagedjs-width", format);
let numbers = width.match(/[0-9]+/g).map(n => +n);
width = parseInt(numbers[0]);
let height = getCSSCustomProp("--pagedjs-height", format);
numbers = height.match(/[0-9]+/g).map(n => +n);
height = numbers.reduce((a, b) => a + b);
let bleedNum = parseInt(getCSSCustomProp("--pagedjs-bleed-top", format));
let spread = width * 2 + bleedNum * 2;
let spreadHalf = width + bleedNum;
let styleSpread = document.createElement("style");
styleSpread.id = "spread-planche-style";
styleSpread.textContent = `
@media print {
@page { size: ${spread}mm ${height}mm; }
.pagedjs_pages { width: auto; }
}
@media screen {
.pagedjs_pages { max-width: calc(var(--pagedjs-width) * 2); }
}
.pagedjs_pages {
display: flex !important;
flex-wrap: wrap;
transform: none !important;
height: 100% !important;
min-height: 100%;
max-height: 100%;
overflow: visible;
}
.pagedjs_page {
margin: 0; padding: 0;
max-height: 100%; min-height: 100%; height: 100% !important;
}
.pagedjs_sheet {
margin: 0; padding: 0;
max-height: 100%; min-height: 100%; height: 100% !important;
}
body { --pagedjs-bleed-right-left: 0mm; margin: 0; }
.pagedjs_left_page {
z-index: 20;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { border-color: transparent; }
.pagedjs_right_page,
.pagedjs_right_page .pagedjs_sheet {
width: calc(var(--pagedjs-bleed-right-right) + var(--pagedjs-pagebox-width)) !important;
}
.pagedjs_right_page .pagedjs_sheet {
grid-template-columns: [bleed-left] var(--pagedjs-bleed-right-left) [sheet-center] 1fr [bleed-right] var(--pagedjs-bleed-right-right);
}
.pagedjs_right_page .pagedjs_bleed-left { display: none; }
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) { width: 0 !important; }
.pagedjs_first_page { margin-left: 0; }
.pagedjs_page:nth-of-type(even) { break-after: always; }
.pagedjs_page, .pagedjs_sheet { width: ${spreadHalf - 0.1}mm !important; }
.pagedjs_page:nth-of-type(1) { margin-left: ${spreadHalf}mm !important; }
`;
document.head.appendChild(styleSpread);
}
/* ----------------------------------------------------------------*/
// Bouton pour activer/désactiver l'imposition
const imposeButton = document.querySelector("#imposition-toggle");
let styleElement; // Variable pour stocker l'élément <style>