decor-6-expe/maquette-tests/js/decor-num-pages.js
2026-03-17 00:10:52 +01:00

57 lines
1.8 KiB
JavaScript

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.after(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;
}
}
}
}
}