diff --git a/assets/css/portfolio.css b/assets/css/portfolio.css index f36c41a..043d00e 100644 --- a/assets/css/portfolio.css +++ b/assets/css/portfolio.css @@ -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; diff --git a/assets/css/print.css b/assets/css/print.css index fc1c603..dc2dd39 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -12,6 +12,11 @@ --running-bottom: 6mm; --running-left: 19px; --running-left-bottom: 55px; + + bleed: 0mm; + + /* bleed: 6mm; + marks: crop */ } @page:left { diff --git a/assets/css/typesetting.css b/assets/css/typesetting.css index 40f12ae..e294435 100644 --- a/assets/css/typesetting.css +++ b/assets/css/typesetting.css @@ -1,6 +1,6 @@ :root{ --bg-type: rgba(232, 232, 5, 0.36); - --bg-type: transparent; + /* --bg-type: transparent; */ } /* (print-break:) */ diff --git a/assets/js/plugins/imposition.js b/assets/js/plugins/imposition.js index 20a516b..ff72ec5 100644 --- a/assets/js/plugins/imposition.js +++ b/assets/js/plugins/imposition.js @@ -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