98 lines
3.1 KiB
JavaScript
98 lines
3.1 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 = "=";
|
|
}
|
|
|
|
createDecor(symbol, sizes, sizeClass) {
|
|
const div = document.createElement("div");
|
|
div.className = `decor-h3 ${sizeClass}`;
|
|
sizes.forEach(n => {
|
|
const line = document.createElement("div");
|
|
line.textContent = symbol.repeat(n);
|
|
div.appendChild(line);
|
|
});
|
|
return div;
|
|
}
|
|
|
|
createLine(symbol, nodes) {
|
|
const line = document.createElement("span");
|
|
line.className = "h3-line";
|
|
|
|
const spanBefore = document.createElement("span");
|
|
spanBefore.className = "h3-before";
|
|
spanBefore.textContent = symbol.repeat(3);
|
|
line.appendChild(spanBefore);
|
|
|
|
const spanText = document.createElement("span");
|
|
spanText.className = "h3-text";
|
|
nodes.forEach(node => spanText.appendChild(node));
|
|
line.appendChild(spanText);
|
|
|
|
const spanAfter = document.createElement("span");
|
|
spanAfter.className = "h3-after";
|
|
spanAfter.textContent = "";
|
|
line.appendChild(spanAfter);
|
|
|
|
return line;
|
|
}
|
|
|
|
afterPageLayout(pageElement, page, breakToken) {
|
|
const symbol = this.symbol;
|
|
const isLeft = pageElement.classList.contains("pagedjs_left_page");
|
|
const smallSizes = [1, 2, 3, 2, 1];
|
|
const bigSizes = [1, 2, 3, 4, 3, 2, 1];
|
|
|
|
pageElement.querySelectorAll("h3").forEach(subtitle => {
|
|
if (subtitle.querySelector(".h3-line")) return;
|
|
|
|
const children = Array.from(subtitle.childNodes);
|
|
|
|
// Découper en segments à chaque <br>
|
|
const segments = [];
|
|
let current = [];
|
|
children.forEach(node => {
|
|
if (node.nodeName === "BR") {
|
|
segments.push(current);
|
|
current = [];
|
|
} else {
|
|
current.push(node);
|
|
}
|
|
});
|
|
segments.push(current);
|
|
|
|
// Reconstruire le h3 avec des .h3-line
|
|
subtitle.innerHTML = "";
|
|
segments.forEach(nodes => {
|
|
const line = this.createLine(symbol, nodes);
|
|
subtitle.appendChild(line);
|
|
|
|
const spanAfter = line.querySelector(".h3-after");
|
|
const baseHeight = line.offsetHeight;
|
|
let count = 0;
|
|
while (count < 300) {
|
|
count++;
|
|
spanAfter.textContent = symbol.repeat(count);
|
|
if (line.offsetHeight > baseHeight) {
|
|
spanAfter.textContent = symbol.repeat(count - 1);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
let firstDecor, secondDecor;
|
|
if (isLeft) {
|
|
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
|
secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
|
} else {
|
|
firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
|
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
|
}
|
|
subtitle.parentNode.insertBefore(firstDecor, subtitle);
|
|
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
|
|
});
|
|
}
|
|
}
|