decor-6-site/assets/js/plugins/decor-subtitles.js

class subtitlesDecor extends Paged.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.className;
      //   subtitle.className = "";
      //   subtitle.parentNode.insertBefore(container, subtitle);
      //   container.appendChild(firstDecor);
      //   container.appendChild(secondDecor);
      //   container.appendChild(subtitle);
      // }
    }



    beforeParsed(content){
      content.querySelectorAll("h3, h4").forEach(subtitle => {
        const block = subtitle.closest('.block'); 
        const nextBlock = block?.nextElementSibling;

        if (!nextBlock) return;

        const firstP = nextBlock.querySelector('p');

        if (!firstP) return;

        if (subtitle.tagName === "H3") {
          firstP.classList.add("following-h3");
        }

        if (subtitle.tagName === "H4") {
          firstP.classList.add("following-h4");
        }
      });
      content.querySelectorAll(".chapter-content").forEach(chapter => {
           let pfirst = chapter.querySelector('p');
           pfirst.classList.add("first-p");
      });
    }

   

    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.className;
      //   subtitle.className = "";
      //   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.className;
        h6.className = "";
        h6.parentNode.insertBefore(container, h6);
        container.appendChild(firstDecor);
        container.appendChild(h6);
      });
    }

     
}

Paged.registerHandlers(subtitlesDecor);