add running pages

maquette-tests/assets/css/03_layout.css

@@ -3,7 +3,7 @@
   @page {
     size: 165mm 240mm;
     margin-top: 22mm;
-    margin-bottom: 14mm;
+    margin-bottom: 22mm;
     bleed: 6mm;
     marks: crop;
     --symbol-top: 1px;

maquette-tests/assets/css/running-page.css

@@ -0,0 +1,10 @@
+.running-page_container{
+    font-size: var(--sign-size);
+      color: var(--sign-color);
+      letter-spacing: var(--sign-spacing);
+      line-height: var(--sign-baseline);
+      vertical-align: top;
+      padding-top: var(--running-top);
+      width: 100%;
+
+    }

maquette-tests/csspageweaver/manifest.json

@@ -30,10 +30,12 @@
         "assets/css/item-decor.css",
         "assets/css/notes.css",
         "assets/css/text.css",
-        "assets/css/subtitles.css"
+        "assets/css/subtitles.css",
+        "assets/css/running-page.css"
     ],
     "hook": [
-        "/js/decor-subtitles.js"
+        "/js/decor-subtitles.js",
+         "/js/decor-num-pages.js"
         
     ]
 }

maquette-tests/js/decor-num-pages.js

@@ -0,0 +1,58 @@
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+
+export default class itemsDecor extends Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+        this.symbol = "+";
+        this.totalPages = 33;
+      }
+
+    afterPageLayout(pageElement, page, breakToken) {
+      const numPage = parseInt(pageElement.dataset.pageNumber);
+      const half = this.totalPages / 2;
+      const isFirstHalf = numPage <= half;
+      console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
+
+      const area = pageElement.querySelector(".pagedjs_area");
+      if (area) {
+        const container = document.createElement("div");
+        container.className = "running-page_container";
+
+        const progress = (numPage / this.totalPages) * 100;
+
+        const symbols = document.createElement("div");
+        symbols.className = "symbols";
+        symbols.style.width = `${progress}%`;
+        symbols.style.wordBreak = "break-all";
+
+        const pageNum = document.createElement("div");
+        pageNum.className = "page-number";
+        pageNum.textContent = numPage;
+
+        const dots = document.createElement("div");
+        dots.className = "dots";
+        dots.textContent = ".".repeat(100);
+
+        container.appendChild(symbols);
+        container.appendChild(pageNum);
+        container.appendChild(dots);
+        area.appendChild(container);
+
+        symbols.textContent = this.symbol;
+        const baseHeight = symbols.offsetHeight;
+        let count = 1;
+        while (count < 2000) {
+          count++;
+          symbols.textContent = this.symbol.repeat(count);
+          if (symbols.offsetHeight > baseHeight) {
+            symbols.textContent = this.symbol.repeat(count - 1);
+            break;
+          }
+        }
+      }
+
+    }
+
+     
+}