debut d'integration de la version terminal

assets/js/plugins/decor-subtitles.js

@@ -0,0 +1,152 @@
+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").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.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);