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

6
assets/css/portfolio.css
View file

@ -80,7 +80,7 @@
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
z-index: -1;
/* z-index: -1; */
}
@ -94,7 +94,7 @@
.portfolio-spread figure{
position: absolute;
z-index: -1;
/* z-index: -1; */
width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
@ -231,7 +231,7 @@ break-before: right;
/* ------ DOUBLE PAGE ------- */
/* ------ DOUBLE PAGE (SUPPRIMER) ------- */
.spread{
position: absolute;

5
assets/css/print.css
View file

@ -12,6 +12,11 @@
--running-bottom: 6mm;
--running-left: 19px;
--running-left-bottom: 55px;
bleed: 0mm;
/* bleed: 6mm;
marks: crop */
}
@page:left {

2
assets/css/typesetting.css
View file

@ -1,6 +1,6 @@
:root{
--bg-type: rgba(232, 232, 5, 0.36);
--bg-type: transparent;
/* --bg-type: transparent; */
}
/* (print-break:) */

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>

2
assets/pagedjs/interface-header.css
View file

@ -329,6 +329,7 @@ form {
#label-black-toggle,
#button-print,
#button-print-spread,
#button-print-planche,
#quality-toggle {
border: 1px solid var(--color-interface-header);
border-radius: 2px;
@ -350,6 +351,7 @@ form {
#label-black-toggle:hover,
#button-print:hover,
#button-print-spread:hover,
#button-print-planche:hover,
#quality-toggle:hover {
background-color: #000;
color: #FFF;

3
assets/pagedjs/interface.html
View file

@ -58,5 +58,8 @@
<button class="reset-this" id="button-print-spread" data-ready="false" data-text="Print Spread">
Exporter le PDF imposé
</button>
<button class="reset-this" id="button-print-planche" data-ready="false" data-text="Print Planche">
Exporter le PDF en planche
</button>
</div>
</div>

8
assets/pagedjs/interface.js
View file

@ -182,7 +182,13 @@ function interfaceEvents(){
window.enableBooklet = true;
window.print();
});
window.enableSpread = false;
document.querySelector("#button-print-planche").addEventListener("click", (e) => {
window.enableSpread = true;
window.print();
});
}