lure-2026/static/js/afterLayout.js

import { Handler } from '/csspageweaver/lib/paged.esm.js';

export default class after extends Handler {

  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
  }

  afterPageLayout(pageElement, page, breakToken) {
    lines(pageElement, ".title, .subtitle, p");
    letters(pageElement, ".title, .subtitle, p");
    // applyFontSizes(pageElement, ".title, .subtitle");
    // grossiPara(pageElement, "p");
  }
}


function getRandomLineLength() {
  return Math.floor(Math.random() * (34 - 20 + 1)) + 20;
}


function letters(content, elements){
  console.log("letters");
  let selectedElements = content.querySelectorAll(elements);
  selectedElements.forEach(function(element) {
    console.log("Type:", element.tagName, element);

    // Vérifier si des span.line existent déjà
    let lineSpans = element.querySelectorAll('.line');

    if (lineSpans.length > 0) {
      // Si des lignes existent, appliquer les lettres à chaque ligne
      lineSpans.forEach(function(lineSpan) {
        let text = lineSpan.textContent;
        let chars = text.split('');

        lineSpan.innerHTML = '';
        chars.forEach(function(char) {
          let letterSpan = document.createElement('span');
          letterSpan.className = 'letter';
          letterSpan.textContent = char;
          lineSpan.appendChild(letterSpan);
        });
      });
      console.log("Caractères appliqués dans", lineSpans.length, "lignes");
    } else {
      // Sinon, appliquer directement sur l'élément
      let text = element.textContent;
      let chars = text.split('');

      element.innerHTML = '';
      chars.forEach(function(char) {
        let letterSpan = document.createElement('span');
        letterSpan.className = 'letter';
        letterSpan.textContent = char;
        element.appendChild(letterSpan);
      });
      console.log("Caractères traités:", chars.length);
    }
  });
}


function grossiPara(content, elements){
  console.log("grossiPara");
  let selectedElements = content.querySelectorAll(elements);
  selectedElements.forEach(function(element) {

    // Trouver toutes les lignes
    let lineSpans = element.querySelectorAll('.line');

    if (lineSpans.length > 0) {
      // Appliquer les tailles pour chaque ligne
      lineSpans.forEach(function(lineSpan) {
        let letterSpans = lineSpan.querySelectorAll('.letter');
        let length = letterSpans.length;

        letterSpans.forEach(function(letterSpan, i) {
          // Progression linéaire de 10px à 28px
          let ratio = i / (length - 1);
          let fontSize = 10 + (28 - 10) * ratio;

          letterSpan.style.fontSize = fontSize + 'px';
        });
      });
      console.log("Progression appliquée sur", lineSpans.length, "lignes");
    } else {
      // Sinon, appliquer directement sur les lettres de l'élément
      let letterSpans = element.querySelectorAll('.letter');
      let length = letterSpans.length;

      letterSpans.forEach(function(letterSpan, i) {
        // Progression linéaire de 10px à 28px
        let ratio = i / (length - 1);
        let fontSize = 10 + (28 - 10) * ratio;

        letterSpan.style.fontSize = fontSize + 'px';
      });
      console.log("Progression appliquée sur", length, "lettres");
    }
  });
}

function applyFontSizes(content, elements){
  console.log("applyFontSizes");
  let selectedElements = content.querySelectorAll(elements);
  selectedElements.forEach(function(element) {

    // Trouver toutes les lignes
    let lineSpans = element.querySelectorAll('.line');

    if (lineSpans.length > 0) {
      // Appliquer les tailles pour chaque ligne
      lineSpans.forEach(function(lineSpan) {
        // Chaque ligne a son propre maxSize aléatoire
        let maxSize = getRandomLineLength();
        console.log("Max size pour cette ligne:", maxSize);

        let letterSpans = lineSpan.querySelectorAll('.letter');
        let length = letterSpans.length;

        // Position aléatoire du pic entre 30% et 70% de la ligne
        let peakPosition = Math.random() * (0.7 - 0.3) + 0.3;
        let peak = length * peakPosition;
        console.log("Pic à la position:", Math.round(peak), "sur", length);

        letterSpans.forEach(function(letterSpan, i) {
          // Calculer la taille en fonction de la distance au pic
          let distanceFromPeak = Math.abs(i - peak);
          let maxDistance = Math.max(peak, length - peak);
          let ratio = 1 - (distanceFromPeak / maxDistance);
          let fontSize = 9 + (maxSize - 9) * ratio;

          letterSpan.style.fontSize = fontSize + 'px';
        });
      });
      console.log("Tailles appliquées sur", lineSpans.length, "lignes");
    } else {
      // Sinon, appliquer directement sur les lettres de l'élément
      let maxSize = getRandomLineLength();
      console.log("Max size pour cet élément:", maxSize);

      let letterSpans = element.querySelectorAll('.letter');
      let length = letterSpans.length;

      // Position aléatoire du pic entre 30% et 70% de la ligne
      let peakPosition = Math.random() * (0.7 - 0.3) + 0.3;
      let peak = length * peakPosition;
      console.log("Pic à la position:", Math.round(peak), "sur", length);

      letterSpans.forEach(function(letterSpan, i) {
        // Calculer la taille en fonction de la distance au pic
        let distanceFromPeak = Math.abs(i - peak);
        let maxDistance = Math.max(peak, length - peak);
        let ratio = 1 - (distanceFromPeak / maxDistance);
        let fontSize = 9 + (maxSize - 9) * ratio;

        letterSpan.style.fontSize = fontSize + 'px';
      });
      console.log("Tailles appliquées sur", length, "lettres");
    }
  });
}


function lines(content, elements){
  console.log("lines");
  let selectedElements = content.querySelectorAll(elements);
  selectedElements.forEach(function(element) {
    console.log("Type:", element.tagName, element);

    let text = element.textContent;

    // Créer des spans temporaires pour chaque mot afin de mesurer leur position
    let words = text.split(/(\s+)/); // Garde les espaces
    element.innerHTML = '';

    let wordElements = [];
    words.forEach(function(word) {
      if (word.length > 0) { // Ignorer les chaînes vides
        let span = document.createElement('span');
        span.textContent = word;
        span.style.display = 'inline';
        element.appendChild(span);

        let rect = span.getBoundingClientRect();
        wordElements.push({
          element: span,
          word: word,
          top: Math.round(rect.top)
        });
      }
    });

    // Grouper les mots par ligne avec une tolérance de 2px
    let lines = [];
    let currentLine = [];
    let currentTop = null;

    wordElements.forEach(function(wordObj) {
      if (currentTop === null || Math.abs(wordObj.top - currentTop) <= 2) {
        currentLine.push(wordObj.word);
        if (currentTop === null) {
          currentTop = wordObj.top;
        }
      } else {
        lines.push(currentLine.join(''));
        currentLine = [wordObj.word];
        currentTop = wordObj.top;
      }
    });

    if (currentLine.length > 0) {
      lines.push(currentLine.join(''));
    }

    // Reconstruire l'élément avec des span.line
    element.innerHTML = '';
    lines.forEach(function(lineText) {
      let lineSpan = document.createElement('span');
      lineSpan.className = 'line';
      lineSpan.style.display = 'block';
      lineSpan.textContent = lineText;
      element.appendChild(lineSpan);
    });

    console.log("Lignes détectées:", lines.length);
  });
}