initial commit on forge variable

assets/css/main.css

@@ -137,6 +137,50 @@ figure[data-crop="false"] img {
 	column-width: auto!important; 
 }
 
+.print-image{
+	position: relative;
+}
+
+.print-image div{
+	position: absolute;
+	top: 0;
+	left: 0;
+	mix-blend-mode: multiply;
+	vertical-align: top;
+}
+
+.print-image figcaption{
+	position: absolute;
+	bottom: 0;
+}
+
+.print-image .print-red{
+	background: var(--rouge);
+}
+
+.print-image .print-green{
+	background: var(--vert);
+}
+
+.print-image .print-blue{
+	background: var(--bleu);
+}
+
+.print-image > div > img{
+	mix-blend-mode: screen;
+  -webkit-filter: grayscale(100%) contrast(200%);
+  filter: grayscale(100%) contrast(200%);
+  opacity: 1;
+}
+
+body[data-template="print"] .print-image {
+	display: block;
+}
+
+body[data-template="print"] .web-image {
+	display: none;
+}
+
 table {
   border-collapse: collapse;
   width: 100%;
@@ -182,6 +226,28 @@ td:last-child{
 }
 
 
+/* Gestion des couches */
+body.isolate-red-layer .green-layer,
+body.isolate-red-layer .blue-layer,
+body.isolate-red-layer .black-layer { display: none; }
+
+body.isolate-green-layer .red-layer,
+body.isolate-green-layer .blue-layer,
+body.isolate-green-layer .black-layer { display: none; }
+
+body.isolate-blue-layer .red-layer,
+body.isolate-blue-layer .green-layer,
+body.isolate-blue-layer .black-layer { display: none; }
+
+body.isolate-black-layer .red-layer,
+body.isolate-black-layer .green-layer,
+body.isolate-black-layer .blue-layer { display: none; }
+
+/* Noir et blanc */
+body.mode-black .print-image > div {
+	background: transparent;
+}
+
 /* fade entre les pages */
 #fade{
   opacity: 0;

assets/css/variables.css

@@ -4,5 +4,9 @@
 	--fontFamily: sans-serif;
 	--textSize: 17px;
 	--ratio : auto;
+
+	--rouge: #ff665e;
+	--vert: #44d62c;
+	--bleu: #0078bf;
 	
 }

assets/pagedjs/interface-header.css

@@ -156,7 +156,7 @@
 
 #interface-header {
   all: initial;
-  /*display: none;*/
+  display: none;
 }
 #interface-header * {
   all: unset;
@@ -191,17 +191,15 @@
   --border-color: #999;
   --backgroung-button: rgb(195, 195, 195);
   color: var(--color-interface-header);
-  border: 1px solid magenta;
+  border: 1px solid black;
   position: fixed;
   top: 20px;
   left: 20px;
   z-index: 99999;
   font-size: 11px;
-/*  display: flex;
-  justify-content: space-between;
-  align-items: center;*/
+  display: block;
   padding: 10px;
-  font-family: "IBM Plex Mono";
+  font-family: sans-serif;
 }
 
 #interface-header input[type="checkbox"] {
@@ -297,10 +295,10 @@ form {
 
 /* BUTTONS GROUP */
 
-#header-group-right {
+/*#header-group-right {
   display: flex;
   align-items: center;
-}
+}*/
 
 #header-group-right > p {
   margin-right: 5ch !important;
@@ -320,52 +318,42 @@ form {
   line-height: 1em !important;
 }
 
-#buttons {
-  display: flex;
-  justify-content: flex-end;
-  /* width: 300px; */
+#preview-form,
+#black-form{
+    margin-bottom: 20px;
+    display: block; 
 }
 
-#button-print {
-  width: 60px;
-  opacity: 0.2;
-  background: none;
-  outline: none;
-}
-
-#label-preview-toggle img {
-  width: 80%;
-  height: 80%;
-}
 
 #label-preview-toggle,
-#button-print {
-  --buttons-size: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--buttons-size);
-  height: var(--buttons-size);
-  margin-right: 10px;
+#label-black-toggle,
+#button-print,
+#button-print-spread,
+#quality-toggle {
   border: 1px solid var(--color-interface-header);
   border-radius: 2px;
   cursor: pointer;
-/*  box-shadow: 1px 1px 0px 0px #9f9f9f;*/
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.interface-preview #label-preview-toggle {
-  border: 2px solid var(--color-interface-header);
-}
-
-#button-print {
+  box-shadow: 1px 1px 0px 0px #9f9f9f;
   padding: 6px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.interface-preview #label-preview-toggle,
+.mode-black  #label-black-toggle{
+  background-color: #000;
+  color: #FFF;
+  /*border: 2px solid var(--color-interface-header);*/
 }
 
 #label-preview-toggle:hover,
-#button-print:hover {
-  background-color: var(--backgroung-button);
+#label-black-toggle:hover,
+#button-print:hover,
+#button-print-spread:hover,
+#quality-toggle:hover  {
+  background-color: #000;
+  color: #FFF;
+  /*background-color: var(--backgroung-button);*/
 }
 
 #button-print[data-ready="true"] {
@@ -373,6 +361,53 @@ form {
   cursor: pointer;
 }
 
+
+/* LAYER SELECTOR --------------------------------------- */
+
+#layer-form {
+    margin-bottom: 20px;
+    display: block;
+}
+
+#layer-select {
+    width: 100%;
+    background-color: transparent;
+    border: 1px solid var(--color-interface-header);
+    border-radius: 2px;
+    padding: 6px;
+    box-sizing: border-box;
+    cursor: pointer;
+    box-shadow: 1px 1px 0px 0px #9f9f9f;
+    margin-top: 10px;
+    font-family: sans-serif;
+    font-size: 11px;
+    color: var(--color-interface-header);
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23222'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    padding-right: 24px;
+}
+
+#layer-select:hover {
+    background-color: #000;
+    color: #FFF;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFF'/%3E%3C/svg%3E");
+    box-shadow: 1px 1px 0px 0px #9f9f9f;
+}
+
+#layer-select:focus {
+    outline: none;
+}
+
+/* État actif quand une couche est isolée */
+body[class*="isolate-"] #layer-select {
+    background-color: #000;
+    color: #FFF;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFF'/%3E%3C/svg%3E");
+}
+
 @media print {
   #interface-header {
     display: none;

assets/pagedjs/interface.html

@@ -8,7 +8,7 @@
         </div>
         <div class="reset-this grid-form-values-group" id="size-baseline-form">
             <div>
-                <label class="reset-this" for="size-baseline">Size (px)</label>
+                <label class="reset-this" for="size-baseline">Taille (px)</label>
                 <input class="reset-this" type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
             </div>
             <div>
@@ -26,17 +26,37 @@
     </form>
 </div>
 <div class="reset-this" id="header-group-right">
-    <p class="reset-this"><span id="nrb-pages" class="reset-this"></span> pages</p>
     <div class="reset-this header-group" id="buttons">
+        <form class="reset-this" id="layer-form">
+            <label class="reset-this" for="layer-select">Sélection de couche</label>
+            <select class="reset-this" id="layer-select" name="layer-select">
+                <option value="">Toutes</option>
+                <option value="red-layer">Rouge</option>
+                <option value="green-layer">Verte</option>
+                <option value="blue-layer">Bleue</option>
+                <option value="black-layer">Noire</option>
+            </select>
+        </form>
+        <br>
         <form class="reset-this" id="preview-form">
             <input class="reset-this" type="checkbox" id="preview-toggle" name="preview-toggle">
             <label class="reset-this"for="preview-toggle" id="label-preview-toggle">
-                <img src="assets/pagedjs/icon-preview.svg">           
+                <!-- <img src="assets/pagedjs/icon-preview.svg">            -->
+                Preview
+            </label>
+        </form>
+        <form class="reset-this" id="black-form">
+            <input class="reset-this" type="checkbox" id="black-toggle" name="black-toggle">
+            <label class="reset-this"for="black-toggle" id="label-black-toggle">
+                Noir et blanc
             </label>
         </form>
         <button class="reset-this" id="button-print" onclick="window.print()" data-ready="false" data-text="Print">
-            <img src="assets/pagedjs/icon-printer.svg">           
-
+            <!-- <img src="assets/pagedjs/icon-printer.svg">-->
+            Exporter le PDF page à page
+        </button>
+        <button class="reset-this" id="button-print-spread" data-ready="false" data-text="Print Spread">
+            Exporter le PDF imposé
         </button>
     </div>
 </div>

assets/pagedjs/interface.js

@@ -135,6 +135,55 @@ function  interfaceEvents(){
                 body.classList.remove('interface-preview');
             }
         });
+
+
+        /* LAYER SELECTOR ------------------------------------------------------------*/
+        document.querySelector("#layer-select").addEventListener("change", (e) => {
+            const layers = ["red-layer", "green-layer", "blue-layer", "black-layer"];
+            const selected = e.target.value;
+
+            layers.forEach(layer => {
+                body.classList.remove("isolate-" + layer);
+            });
+
+            if (selected) {
+                body.classList.add("isolate-" + selected);
+                // Active automatiquement le mode noir et blanc
+                body.classList.add("mode-black");
+                document.querySelector("#black-toggle").checked = true;
+            } else {
+                // Repasse en couleur si on revient sur "Toutes"
+                body.classList.remove("mode-black");
+                document.querySelector("#black-toggle").checked = false;
+            }
+        });
+
+
+        /* Passer le PDF en noir et blanc ---------------------------------------------------------------------------------------------------- 
+        ----------------------------------------------------------------------------------------------------------------*/
+
+
+        document.querySelector("#black-toggle").addEventListener("input", (e) => {
+            if(e.target.checked){
+                /* black mode */
+                body.classList.add('mode-black');
+            }else{
+                body.classList.remove('mode-black');
+            }
+        });
+
+
+        /* PRINT SPREAD ---------------------------------------------------------------------------------------------------- 
+        ----------------------------------------------------------------------------------------------------------------*/
+
+        window.enableBooklet = false;
+        document.querySelector("#button-print-spread").addEventListener("click", (e) => {
+            // not working
+           // body.style.setProperty("--paged-layout", "booklet");
+           // window.print();
+            window.enableBooklet = true;
+            window.print();
+        });
     
 }
 
@@ -177,8 +226,8 @@ class interfacePaged extends Paged.Handler {
 
     afterPageLayout(pageElement, page, breakToken){
         let nbr = page.id.replace('page-', '');
-        let span = document.querySelector("#nrb-pages");
-        span.innerHTML = nbr;
+        // let span = document.querySelector("#nrb-pages");
+        // span.innerHTML = nbr;
     }
 
 
@@ -187,5 +236,4 @@ class interfacePaged extends Paged.Handler {
         print.dataset.ready = 'true';
     }
 }
-Paged.registerHandlers(interfacePaged);
-
+Paged.registerHandlers(interfacePaged);

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0015.grayscale.ink-1-blue.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 5
+
+----
+
+Uuid: 2wf46av8ux3phcf2

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0015.grayscale.ink-2-red.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 6
+
+----
+
+Uuid: srxqys3zkq30qj3p

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0015.grayscale.ink-3-fluorescentgreen.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 7
+
+----
+
+Uuid: 1uzzwwbasn8r0iqo

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0015.jpg.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 8
+
+----
+
+Uuid: pnay3w7atruamgm0

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0017.grayscale.ink-1-blue.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 2
+
+----
+
+Uuid: xlan86lj7ahog6lx

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0017.grayscale.ink-2-red.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 3
+
+----
+
+Uuid: iq1wtbdcya7v7php

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0017.grayscale.ink-3-fluorescentgreen.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 4
+
+----
+
+Uuid: gazrgkr8dk1pvnpy

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0017.jpg.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Uuid: d9pdhgsaowqudwku
+
+----
+
+Template: blocks/image

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0022.grayscale.ink-1-blue.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 9
+
+----
+
+Uuid: bwihnr29xatlksa6

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0022.grayscale.ink-2-red.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 10
+
+----
+
+Uuid: wglbjgszwsm6i4wj

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0022.grayscale.ink-3-fluorescentgreen.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 11
+
+----
+
+Uuid: jf2ru49ui6j1visy

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0022.jpg.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 12
+
+----
+
+Uuid: nyullbf4a3swcamu

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0023.grayscale.ink-1-blue.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 13
+
+----
+
+Uuid: bmvowidresycrn2r

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0023.grayscale.ink-2-red.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 14
+
+----
+
+Uuid: 7gjpwntiujsh4k7b

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0023.grayscale.ink-3-fluorescentgreen.png.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 15
+
+----
+
+Uuid: hszh9rbag6igordy

content/1_e-l-aria-diventa-piu-respirabile-per-tutti-une-television-pirate-pour-le-quartier/2025_20260122_0023.jpg.txt

@@ -0,0 +1,13 @@
+Caption: 
+
+----
+
+Alt: 
+
+----
+
+Sort: 16
+
+----
+
+Uuid: 39awiqtt1wdub2xw

site/blueprints/blocks/image.yml

@@ -2,14 +2,6 @@ name: field.blocks.image.name
 icon: image
 preview: image
 fields:
-  location:
-    label: field.blocks.image.location
-    type: radio
-    columns: 2
-    default: "kirby"
-    options:
-      kirby: "{{ t('field.blocks.image.location.internal') }}"
-      web: "{{ t('field.blocks.image.location.external') }}"
   image:
     label: field.blocks.image.name
     type: files
@@ -19,13 +11,33 @@ fields:
       back: black
     uploads:
       template: blocks/image
-    when:
-      location: kirby
-  src:
-    label: field.blocks.image.url
-    type: url
-    when:
-      location: web
+  imagered:
+    label: Image (couche rouge)
+    type: files
+    query: model.images
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
+  imagegreen:
+    label: Image (couche verte)
+    type: files
+    query: model.images
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
+  imageblue:
+    label: Image (couche bleu)
+    type: files
+    query: model.images
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
   alt:
     label: field.blocks.image.alt
     type: text
@@ -35,26 +47,3 @@ fields:
     type: writer
     icon: text
     inline: true
-  link:
-    label: field.blocks.image.link
-    type: text
-    icon: url
-  width: 
-    label: Largeur de l'image
-    type: select
-    width: 1/2
-    options:
-      16.666%: "16.666%"
-      20%: "20%"
-      25%: "25%"
-      33.333%: "33.333%"
-      50%: "50%"
-      66.666%: "66.666%"
-      100%: "100%"
-  position: 
-    label: Position de l'image
-    type: select
-    width: 1/2
-    options:
-      auto: "Centrée"
-      0: "Alignée à gauche"

site/snippets/blocks/image.php

@@ -3,32 +3,39 @@
 /** @var \Kirby\Cms\Block $block */
 $alt     = $block->alt();
 $caption = $block->caption();
-$crop    = $block->crop()->toBool();
-$link    = $block->link();
-$ratio   = $block->ratio()->or('auto');
-$src     = null;
-
-if ($block->location() == 'web') {
-    $src = $block->src()->esc();
-} elseif ($image = $block->image()->toFile()) {
-    $alt = $alt->or($image->alt());
-    $src = $image->url();
-}
+$src     = $block->image()->toFile()->url();
 
 ?>
+
 <?php if ($src): ?>
-<figure 
-  data-crop="<?= $crop ? 'true' : 'false' ?>" 
-  data-ratio="<?= $ratio ?>"
-  style="--ratio: <?= $ratio ?>;"
->
-  <?php if ($link->isNotEmpty()): ?>
-  <a href="<?= Str::esc($link->toUrl()) ?>">
-    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
-  </a>
-  <?php else: ?>
+<figure class="web-image">
+
   <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
+
+  <?php if ($caption->isNotEmpty()): ?>
+  <figcaption>
+    <?= $caption->kt() ?>
+  </figcaption>
   <?php endif ?>
+</figure>
+
+<figure class="print-image full-page" style="height:<?= $block->image()->toFile()->height()?>px">
+  <?php if($srcred = $block->imagered()->toFile()):?>
+    <div class="print-red red-layer">
+      <img src="<?= $srcred->url() ?>" alt="<?= $alt->esc() ?>">
+    </div>
+  <?php endif ?>
+  <?php if($srcgreen = $block->imagegreen()->toFile()):?>
+    <div class="print-green green-layer">
+      <img src="<?= $srcgreen->url()  ?>" alt="<?= $alt->esc() ?>">
+    </div>
+  <?php endif ?>
+  <?php if($srcblue = $block->imageblue()->toFile()):?>
+    <div class="print-blue blue-layer">
+      <img src="<?= $srcblue->url()  ?>" alt="<?= $alt->esc() ?>">
+    </div>
+  <?php endif ?>
+
 
   <?php if ($caption->isNotEmpty()): ?>
   <figcaption>

site/templates/print.php

@@ -23,6 +23,7 @@
   <?php foreach($site->index()->filterBy('intendedTemplate', 'chapitre') as $chapitre):?>
     <section class="chapter">
       <h2><?= $chapitre->title()->html()->smartypants() ?></h2>
+      <div class="chapeau"><?= $chapitre->chapeau()->kt()->smartypants() ?></div>
       <?php foreach ($chapitre->text()->toBlocks() as $block): ?>
       <div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
         <?= $block ?>