decor-6-expe/maquette-tests/js/decor-subtitles.js

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, baseClass = "decor-h3") {
      const div = document.createElement("div");
      div.className = `${baseClass} ${sizeClass}`;
      sizes.forEach((n, i) => {
        const line = document.createElement("div");
        line.dataset.count = i + 1;
        line.textContent = symbol.repeat(n);
        div.appendChild(line);
      });
      return div;
    }

    createLine(symbol, nodes) {
      const line = document.createElement("span");
      line.className = "subtitle-line";

      const spanBefore = document.createElement("span");
      spanBefore.className = "subtitle-before";
      spanBefore.textContent = symbol.repeat(3);
      line.appendChild(spanBefore);

      const spanText = document.createElement("span");
      spanText.className = "subtitle-text";
      nodes.forEach(node => spanText.appendChild(node));
      line.appendChild(spanText);

      const spanAfter = document.createElement("span");
      spanAfter.className = "subtitle-after";
      spanAfter.textContent = "";
      line.appendChild(spanAfter);

      return line;
    }


    processTitle(subtitle, symbol, withDecor, isLeft) {
      if (subtitle.querySelector(".subtitle-line")) return;

      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);

      // Reconstruire le titre avec des .subtitle-line
      subtitle.innerHTML = "";
      segments.filter(seg => seg.length > 0).forEach(nodes => {
        const line = this.createLine(symbol, nodes);
        subtitle.appendChild(line);

        const spanAfter = line.querySelector(".subtitle-after");
        const baseHeight = line.offsetHeight;
        let count = 0;
        // subtitle-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;
          }
        }
      });

      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");
          secondDecor = this.createDecor(symbol, bigSizes,   "decor-h3_big");
        } else {
          firstDecor  = this.createDecor(symbol, bigSizes,   "decor-h3_big");
          secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
        }
        const container = document.createElement("div");
        container.className = "h3_container";
        subtitle.parentNode.insertBefore(container, subtitle);
        container.appendChild(firstDecor);
        container.appendChild(secondDecor);
        container.appendChild(subtitle);
      }
    }



    beforeParsed(content){
      content.querySelectorAll("h3").forEach(subtitle => {
           const next = subtitle.nextElementSibling;
          if (next) next.classList.add("following-h3");
      });
      content.querySelectorAll("h4").forEach(subtitle => {
           const next = subtitle.nextElementSibling;
          if (next) next.classList.add("following-h4");
      });
    }

   

    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);
      });

      pageElement.querySelectorAll("h4").forEach(subtitle => {
        this.processTitle(subtitle, symbol, false, isLeft);
        const container = document.createElement("div");
        container.className = "h4_container";
        subtitle.parentNode.insertBefore(container, subtitle);
        container.appendChild(subtitle);
      });

      pageElement.querySelectorAll("h6").forEach(h6 => {
        if (h6.closest(".h6_container")) return;
        const smallSizes = [1, 2, 3, 2, 1];
        const bigSizes   = [1, 2, 3, 4, 5, 4, 3, 2, 1];
        const firstDecor = isLeft
          ? this.createDecor(symbol, smallSizes, "decor-h6_small", "decor-h6")
          : this.createDecor(symbol, bigSizes,   "decor-h6_big",   "decor-h6");
        const container = document.createElement("div");
        container.className = "h6_container";
        h6.parentNode.insertBefore(container, h6);
        container.appendChild(firstDecor);
        container.appendChild(h6);
      });
    }

     
}