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

subtitles symbols

Browse source
This commit is contained in:
Julie Blanc 2026-03-15 11:09:25 +01:00
parent 0e03ba8475
commit 9340553c0b
24 changed files with 241 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,62 @@
import { Handler } from '/csspageweaver/lib/paged.esm.js';
export default class myCustomHandler2 extends Handler {
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;
}
afterPageLayout(pageElement, page, breakToken) {
let pageArea = pageElement.querySelector(".pagedjs_area");
let pageAreaTop = pageArea.getBoundingClientRect().top;
let items = pageElement.querySelectorAll("p, h3, h4, .inline-note");
items.forEach(function (item) {
let topOffset = item.getBoundingClientRect().top - pageAreaTop;
let decor = document.createElement("div");
decor.classList.add("item-decor");
decor.style.top = topOffset + "px";
decor.textContent = pageElement.classList.contains("pagedjs_left_page") ? "<" : ">";
pageArea.appendChild(decor);
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);
}
let spanAfter = subtitle.querySelector(".h3-after");
if (!spanAfter) {
spanAfter = document.createElement("span");
spanAfter.className = "h3-after";
subtitle.appendChild(spanAfter);
}
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;
}
}
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");
subtitle.parentNode.insertBefore(firstDecor, subtitle);
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
});
}
}