Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

decor subtitles finish js

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 12:01:16 +01:00
parent 1c1a2b0a93
commit cc971f6152
6 changed files with 180 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

113
maquette-tests/js/items-decor.js
View file

@ -1,113 +0,0 @@
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;
}
processTitle(subtitle, symbol, withDecor, isLeft) {
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 titre 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;
// h3-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);
if (line.offsetHeight > baseHeight) {
spanAfter.textContent = symbol.repeat(count - 1);
break;
}
}
});
if (withDecor) {
const smallSizes = [1, 2, 3, 2, 1];
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
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);
}
}
afterPageLayout(pageElement, page, breakToken) {
const symbol = this.symbol;
const isLeft = pageElement.classList.contains("pagedjs_left_page");
pageElement.querySelectorAll("h3").forEach(subtitle => {
this.processTitle(subtitle, symbol, true, isLeft);
const next = subtitle.nextElementSibling;
if (next) next.classList.add("following-h3");
});
pageElement.querySelectorAll("h4").forEach(subtitle => {
this.processTitle(subtitle, symbol, false, isLeft);
const next = subtitle.nextElementSibling;
if (next) next.classList.add("following-h4");
});
}
}