walter-boente_book-collection/js/snapToBaseline.js

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();
                const nodeRect = node.getBoundingClientRect();
                const relativeTop = nodeRect.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) => {
            const nodeRect = node.getBoundingClientRect();
            if (nodeRect.bottom < areaRect.bottom - this.baseline) return;
            if (!shouldSnap(node)) return;

            const relativeTop = nodeRect.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');
}