add running pages

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;
+          }
+        }
+      }
+
+    }
+
+     
+}