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

add symbol nav left page

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 09:48:16 +01:00
parent 15aaf441cd
commit 512d62e5df
6 changed files with 139 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,49 +40,47 @@ export default class itemsDecor extends Handler {
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];
processTitle(subtitle, symbol, withDecor, isLeft) {
if (subtitle.querySelector(".h3-line")) return;
pageElement.querySelectorAll("h3").forEach(subtitle => {
if (subtitle.querySelector(".h3-line")) return;
const children = Array.from(subtitle.childNodes);
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);
// 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);
// 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;
}
});
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;
}
}
});
}
});
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");
@ -92,7 +90,24 @@ export default class itemsDecor extends Handler {
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
}
subtitle.parentNode.insertBefore(firstDecor, subtitle);
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
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");
});
}
}