70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
|
|
|
export default class snapToBaseline extends Handler {
|
|
constructor(chunker, polisher, caller) {
|
|
super(chunker, polisher, caller);
|
|
this.baseline;
|
|
}
|
|
|
|
beforeParsed(content){
|
|
this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim());
|
|
|
|
content.querySelectorAll('blockquote').forEach((bq) => {
|
|
const prev = bq.previousElementSibling;
|
|
if (!prev || prev.nodeName !== 'P') {
|
|
// bq.style.color = 'red';
|
|
}
|
|
});
|
|
}
|
|
|
|
renderNode(node, sourceNode){
|
|
if (node.nodeName === 'P') {
|
|
this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim());
|
|
if (!shouldSnap(node)) return node;
|
|
const area = node.closest('.pagedjs_area');
|
|
if (area) {
|
|
const areaRect = area.getBoundingClientRect(); // cible les paragraphes sur 2 colonnes
|
|
const firstRect = node.getClientRects()[0];
|
|
if (!firstRect) return node;
|
|
const relativeTop = firstRect.top - areaRect.top;
|
|
const modulo = relativeTop % this.baseline;
|
|
|
|
if (modulo !== 0) {
|
|
node.style.paddingTop = (this.baseline - modulo) + 'px';
|
|
}
|
|
}
|
|
return node;
|
|
}
|
|
}
|
|
|
|
afterPageLayout(pageElement, page, breakToken){
|
|
const area = pageElement.querySelector('.pagedjs_area');
|
|
if (!area) return;
|
|
|
|
const areaRect = area.getBoundingClientRect();
|
|
const paragraphs = pageElement.querySelectorAll('p');
|
|
|
|
paragraphs.forEach((node) => {
|
|
if (!shouldSnap(node)) return;
|
|
|
|
const firstRect = node.getClientRects()[0];
|
|
if (!firstRect) return;
|
|
|
|
|
|
if (firstRect.bottom < areaRect.bottom - this.baseline) return; // cible les paragraphes qui sont sur 2 colonnes
|
|
|
|
const relativeTop = firstRect.top - areaRect.top;
|
|
const modulo = relativeTop % this.baseline;
|
|
if (modulo !== 0) {
|
|
node.style.paddingTop = (this.baseline - modulo) + 'px';
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function shouldSnap(node) {
|
|
return !node.closest('blockquote');
|
|
}
|