62 lines
2.4 KiB
JavaScript
62 lines
2.4 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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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);
|
|
});
|
|
}
|
|
}
|