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

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 dots = document.createElement("div");
        dots.className = "dots";
        dots.textContent = ".".repeat(100);

        const runningPage = document.createElement("div");
        runningPage.className = "running-page";
        runningPage.appendChild(symbols);
        runningPage.appendChild(dots);
        container.appendChild(runningPage);
        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;
          }
        }
      }

    }

     
}