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

support double line in subtitles

Browse source
This commit is contained in:
Julie Blanc 2026-03-15 11:30:36 +01:00
parent 9340553c0b
commit 15aaf441cd
4 changed files with 93 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,43 +18,79 @@ export default class itemsDecor extends Handler {
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];
let subtitles = pageElement.querySelectorAll("h3");
subtitles.forEach(subtitle => {
if (!subtitle.querySelector(".h3-before")) {
const spanBefore = document.createElement("span");
spanBefore.className = "h3-before";
spanBefore.textContent = symbol.repeat(3);
subtitle.insertBefore(spanBefore, subtitle.firstChild);
}
pageElement.querySelectorAll("h3").forEach(subtitle => {
if (subtitle.querySelector(".h3-line")) return;
let spanAfter = subtitle.querySelector(".h3-after");
if (!spanAfter) {
spanAfter = document.createElement("span");
spanAfter.className = "h3-after";
subtitle.appendChild(spanAfter);
}
const children = Array.from(subtitle.childNodes);
spanAfter.textContent = "";
const baseHeight = subtitle.offsetHeight;
let count = 0;
// Pour compléter la ligne: ajoute le symbole dans le span en vérifiant la hauteur du titre, si l'ajout d'un symbole augmente la hauteur du titre, alors on enleve un symbole
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);
if (subtitle.offsetHeight > baseHeight) {
spanAfter.textContent = symbol.repeat(count - 1);
break;
// 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);
const firstDecor = this.createDecor(symbol, isLeft ? smallSizes : bigSizes, isLeft ? "decor-h3_small" : "decor-h3_big");
const secondDecor = this.createDecor(symbol, isLeft ? bigSizes : smallSizes, isLeft ? "decor-h3_big" : "decor-h3_small");
// 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);
});