FIX updating build_footnotes_index_from_content with new attribute data-footnote-content instaed of simply footnote-content

includes/utilities.php

@@ -203,8 +203,8 @@ function build_footnotes_index_from_content($content)
 	}
 
 	$footnotes = [];
-	// Trouve les balises <a> avec classe footnote-reference ET attribut footnote-content (ordre flexible)
-	$pattern = '/<a[^>]*class="[^"]*footnote-reference[^"]*"[^>]*footnote-content="([^"]*)"[^>]*>|<a[^>]*footnote-content="([^"]*)"[^>]*class="[^"]*footnote-reference[^"]*"[^>]*>/i';
+	// Trouve les balises <a> avec classe footnote-reference ET attribut data-footnote-content (ordre flexible)
+	$pattern = '/<a[^>]*class="[^"]*footnote-reference[^"]*"[^>]*data-footnote-content="([^"]*)"[^>]*>|<a[^>]*data-footnote-content="([^"]*)"[^>]*class="[^"]*footnote-reference[^"]*"[^>]*>/i';
 	$has_footnotes = preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);
 
 	if ($has_footnotes) {

resources/css/components/article-revues-toolbar.css

@@ -30,16 +30,63 @@
     a.cta--download-pdf {
       @apply ml-auto;
     }
+
+    #listen-article,
+    #stop-reading {
+      @apply rounded-full w-12 h-12 flex items-center justify-center m-0 p-0 transition-all duration-300;
+    }
     #listen-article {
-      @apply bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center m-0 p-0 transition-all duration-300;
+      @apply bg-primary text-white;
       &:hover {
         @apply scale-110;
       }
       img {
         @apply w-6 h-6;
       }
-      &.is-active {
-        @apply bg-red-500;
+      &[data-reading-status='playing'] {
+        /* @apply bg-blue-500; */
+        @apply bg-white border border-primary;
+        /* &:hover {
+          @apply bg-red-500;
+        } */
+        #play-reading {
+          @apply hidden;
+        }
+        #pause-reading {
+          @apply block;
+        }
+      }
+
+      &[data-reading-status='stopped'] {
+        #play-reading {
+          @apply block;
+        }
+        #pause-reading {
+          @apply hidden;
+        }
+      }
+      &[data-reading-status='paused'] {
+        @apply bg-yellow-500;
+        #play-reading {
+          @apply block;
+        }
+        #pause-reading {
+          @apply hidden;
+        }
+      }
+    }
+    #stop-reading {
+      @apply bg-primary hidden;
+      img {
+        @apply w-4 h-4;
+      }
+    }
+    &:has(
+        #listen-article[data-reading-status='playing'],
+        #listen-article[data-reading-status='paused']
+      ) {
+      #stop-reading {
+        @apply flex;
       }
     }
   }

resources/img/icons/carhop-pause.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1459_14367)">
+<path d="M0.941406 0V23" stroke="#136F63" stroke-width="2"/>
+<path d="M15.0586 0V23" stroke="#136F63" stroke-width="2"/>
+</g>
+</svg>

resources/img/icons/carhop-stop-reading.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect width="16" height="16" style="fill: #fff;"/>
+</svg>

resources/js/singles/article-toolbar.ts

@@ -29,6 +29,4 @@ function resetActiveToolbarButtons(): void {
 function handleActiveTabContent(tab: string): void {
   const contentWrapper = document.querySelector('.content-wrapper');
   contentWrapper?.setAttribute('data-active-tab', tab);
-  console.log(tab);
-  console.log('contentWrapper');
 }

resources/js/singles/reader.ts

@@ -1,20 +1,65 @@
-export default function handleArticleReader() {
-  const button = document.getElementById('listen-article');
-  const article = document.querySelector('.article-content');
+declare var Notyf: any;
 
-  // Paramètres fixes définis dans le code
-  const speechSettings = {
-    rate: 1.2, // Vitesse de lecture (0.1 à 2)
-    pitch: 1.1, // Tonalité (0 à 2)
-    volume: 1, // Volume (0 à 1)
-  };
+/* ********************************************************
+ * ******************* CONFIGURATION *******************
+ * ********************************************************
+ */
+
+interface ReaderConfig {
+  rate: number;
+  pitch: number;
+  volume: number;
+  highlightColor: string;
+  highlightStyle: string;
+}
+
+const DEFAULT_CONFIG: ReaderConfig = {
+  rate: 1.2,
+  pitch: 1.1,
+  volume: 1,
+  highlightColor: '#f1fcf9',
+  highlightStyle: 'background-color: #136F63; padding: 2px 4px; border-radius: 3px; color:white;',
+};
+
+export default function handleArticleReader() {
+  // ✅ DÉCLARATION DES VARIABLES
+  const playPauseButton = document.getElementById('listen-article');
+  const stopReadingButton = document.getElementById('stop-reading');
+  const article = document.querySelector('.article-content');
 
   let utterance: SpeechSynthesisUtterance;
   let voices: SpeechSynthesisVoice[] = [];
   let thomasVoice: SpeechSynthesisVoice | null = null;
+  let currentWordIndex = 0;
+
+  /* ********************************************************
+   * ************** MÉTHODES INTERNES *********************
+   * ********************************************************
+   */
+
+  // Fonctions de gestion du bouton
+  function setReaderButtonReading(): void {
+    if (!playPauseButton) return;
+    playPauseButton.setAttribute('data-reading-status', 'playing');
+    playPauseButton.setAttribute('title', 'Arrêter la lecture vocale');
+    playPauseButton.setAttribute('aria-label', 'Arrêter la lecture vocale');
+  }
+
+  function setReaderButtonStopped(): void {
+    if (!playPauseButton) return;
+    playPauseButton.setAttribute('data-reading-status', 'stopped');
+    playPauseButton.setAttribute('title', "Lancer la lecture vocale de l'article");
+    playPauseButton.setAttribute('aria-label', "Lecture vocale de l'article");
+  }
+  function setReaderButtonPaused(): void {
+    if (!playPauseButton) return;
+    playPauseButton.setAttribute('data-reading-status', 'paused');
+    playPauseButton.setAttribute('title', 'Reprendre la lecture vocale');
+    playPauseButton.setAttribute('aria-label', 'Reprendre la lecture vocale');
+  }
 
   // Charger les voix et trouver Thomas
-  function loadVoices() {
+  function loadVoices(): void {
     voices = speechSynthesis.getVoices();
 
     // Chercher la voix Thomas (peut être "Thomas" ou contenir "Thomas")
@@ -29,76 +74,164 @@ export default function handleArticleReader() {
     }
   }
 
-  // Charger les voix au démarrage et quand elles changent
-  loadVoices();
-  speechSynthesis.onvoiceschanged = loadVoices;
+  // ✅ HIGHLIGHTING AVANCÉ - Préserve la structure HTML
+  let textNodes: Text[] = [];
+  let wordBoundaries: { node: Text; startOffset: number; endOffset: number; word: string }[] = [];
 
-  // Variables pour le highlighting
-  let originalContent = '';
-  let words: string[] = [];
-  let currentWordIndex = 0;
-
-  function highlightWord(index: number) {
-    if (!article || index >= words.length) return;
-
-    // Restaurer le contenu original si c'est le premier mot
-    if (index === 0) {
-      article.innerHTML = originalContent;
-    }
-
-    // Créer le nouveau HTML avec le mot highlighted
-    const highlightedWords = words.map((word, i) => {
-      if (i === index) {
-        return `<span class="speech-highlight" style="background-color: yellow; padding: 2px 4px; border-radius: 3px;">${word}</span>`;
-      }
-      return word;
+  function collectTextNodes(element: Element): Text[] {
+    const nodes: Text[] = [];
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => {
+        // Ignorer les nœuds texte vides ou uniquement des espaces
+        return node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      },
     });
 
-    article.innerHTML = highlightedWords.join(' ');
+    let node;
+    while ((node = walker.nextNode())) {
+      nodes.push(node as Text);
+    }
+    return nodes;
   }
 
-  function removeHighlight() {
-    if (article && originalContent) {
-      article.innerHTML = originalContent;
+  function buildWordBoundaries(): void {
+    wordBoundaries = [];
+    textNodes = collectTextNodes(article as Element);
+
+    textNodes.forEach((textNode) => {
+      const text = textNode.textContent || '';
+      const wordRegex = /\S+/g; // Mots (non-espaces)
+      let match;
+
+      while ((match = wordRegex.exec(text)) !== null) {
+        wordBoundaries.push({
+          node: textNode,
+          startOffset: match.index,
+          endOffset: match.index + match[0].length,
+          word: match[0],
+        });
+      }
+    });
+
+    // 🐛 DEBUG: Afficher les mots détectés
+    console.log(
+      'Mots détectés dans le DOM:',
+      wordBoundaries.map((b) => b.word)
+    );
+  }
+
+  function highlightWord(index: number): void {
+    if (!article || index >= wordBoundaries.length) {
+      console.log('❌ Highlight impossible:', { index, totalWords: wordBoundaries.length });
+      return;
+    }
+
+    // Supprimer le highlight précédent et reconstruire les boundaries
+    removeHighlight();
+    buildWordBoundaries(); // ✅ Recalculer après cleanup
+
+    // Vérifier à nouveau après reconstruction
+    if (index >= wordBoundaries.length) {
+      console.warn('❌ Index invalide après reconstruction:', {
+        index,
+        totalWords: wordBoundaries.length,
+      });
+      return;
+    }
+
+    const boundary = wordBoundaries[index];
+    console.log('🎯 Highlighting mot #' + index + ':', boundary.word);
+
+    // Vérifier que le nœud et les offsets sont encore valides
+    if (!boundary.node || !boundary.node.textContent) {
+      console.warn('❌ Nœud texte invalide');
+      return;
+    }
+
+    if (
+      boundary.startOffset > boundary.node.textContent.length ||
+      boundary.endOffset > boundary.node.textContent.length
+    ) {
+      console.warn('❌ Offsets invalides:', {
+        startOffset: boundary.startOffset,
+        endOffset: boundary.endOffset,
+        nodeLength: boundary.node.textContent.length,
+      });
+      return;
+    }
+
+    try {
+      const range = document.createRange();
+      range.setStart(boundary.node, boundary.startOffset);
+      range.setEnd(boundary.node, boundary.endOffset);
+
+      // Créer le span de highlight
+      const highlightSpan = document.createElement('span');
+      highlightSpan.className = 'speech-highlight';
+      highlightSpan.style.cssText = DEFAULT_CONFIG.highlightStyle;
+
+      range.surroundContents(highlightSpan);
+      console.log('✅ Highlight réussi pour:', boundary.word);
+    } catch (error) {
+      console.warn('⚠️ Erreur lors du highlight:', error, boundary);
     }
   }
 
+  function removeHighlight(): void {
+    if (!article) return;
+
+    const highlights = article.querySelectorAll('.speech-highlight');
+    highlights.forEach((highlight) => {
+      const parent = highlight.parentNode;
+      if (parent) {
+        // Remplacer le span par son contenu
+        while (highlight.firstChild) {
+          parent.insertBefore(highlight.firstChild, highlight);
+        }
+        parent.removeChild(highlight);
+
+        // Normaliser pour fusionner les nœuds texte adjacents
+        parent.normalize();
+      }
+    });
+  }
+
+  // Création de l'utterance
   function createUtterance(text: string): SpeechSynthesisUtterance {
-    // Sauvegarder le contenu original et préparer les mots
-    originalContent = article ? article.innerHTML : '';
-    words = text.split(/\s+/).filter((word) => word.trim().length > 0);
+    // ✅ Construire la carte des mots avec leur position dans le DOM
+    buildWordBoundaries();
     currentWordIndex = 0;
 
     utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = 'fr-FR';
 
-    // Appliquer les paramètres fixes
-    utterance.rate = speechSettings.rate;
-    utterance.pitch = speechSettings.pitch;
-    utterance.volume = speechSettings.volume;
+    // Appliquer la configuration
+    utterance.rate = DEFAULT_CONFIG.rate;
+    utterance.pitch = DEFAULT_CONFIG.pitch;
+    utterance.volume = DEFAULT_CONFIG.volume;
 
     // Utiliser Thomas par défaut
     if (thomasVoice) {
       utterance.voice = thomasVoice;
     }
 
-    // Event pour highlighter les mots pendant la lecture
+    // ✅ Event pour highlighter les mots pendant la lecture (basé sur les boundaries DOM)
     utterance.onboundary = (event) => {
-      if (event.name === 'word') {
+      if (event.name === 'word' && currentWordIndex < wordBoundaries.length) {
         highlightWord(currentWordIndex);
         currentWordIndex++;
       }
     };
 
     utterance.onend = () => {
-      button.textContent = '🔊 Lire en vocal';
+      setReaderButtonStopped();
       removeHighlight();
       currentWordIndex = 0;
     };
 
     utterance.onerror = (event) => {
       console.error('Erreur lors de la lecture:', event);
-      button.textContent = '🔊 Lire en vocal';
+      setReaderButtonStopped();
       removeHighlight();
       currentWordIndex = 0;
     };
@@ -106,21 +239,105 @@ export default function handleArticleReader() {
     return utterance;
   }
 
-  button?.addEventListener('click', () => {
-    if (speechSynthesis.speaking) {
-      speechSynthesis.cancel();
-      button.classList.remove('is-active');
-      removeHighlight(); // Retirer le highlight quand on arrête
-      currentWordIndex = 0;
-    } else {
-      if (article) {
-        const text = (article as HTMLElement).innerText.trim();
-        if (text) {
-          createUtterance(text);
-          speechSynthesis.speak(utterance);
-          button.classList.add('is-active');
-        }
+  // Fonctions de contrôle de lecture
+  function playReading(): void {
+    if (article) {
+      const text = (article as HTMLElement).innerText.trim();
+      if (text) {
+        createUtterance(text);
+        speechSynthesis.speak(utterance);
+        setReaderButtonReading();
+        showReaderStartedMessage();
       }
     }
+  }
+
+  function pauseReading(): void {
+    speechSynthesis.pause();
+    setReaderButtonPaused();
+  }
+
+  function stopReading(): void {
+    speechSynthesis.cancel();
+    setReaderButtonStopped();
+    removeHighlight();
+    currentWordIndex = 0;
+  }
+
+  /* ********************************************************
+   * *************** INITIALISATION **********************
+   * ********************************************************
+   */
+
+  // Vérifier si la synthèse vocale est déjà en cours au chargement de la page
+  if (speechSynthesis.speaking) {
+    speechSynthesis.cancel();
+    setReaderButtonStopped();
+  }
+
+  // Arrêter la lecture vocale quand l'utilisateur quitte la page
+  window.addEventListener('beforeunload', () => {
+    if (speechSynthesis.speaking) {
+      speechSynthesis.cancel();
+      setReaderButtonStopped();
+    }
+  });
+
+  // Arrêter la lecture vocale quand l'onglet devient invisible
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden && speechSynthesis.speaking) {
+      speechSynthesis.pause();
+    } else if (!document.hidden && speechSynthesis.paused) {
+      speechSynthesis.resume();
+      setReaderButtonReading();
+    }
+  });
+
+  // Charger les voix au démarrage et quand elles changent
+  loadVoices();
+  speechSynthesis.onvoiceschanged = loadVoices;
+
+  // Event listener principal
+  playPauseButton?.addEventListener('click', () => {
+    if (speechSynthesis.speaking && !speechSynthesis.paused) {
+      // En cours de lecture → Pause
+      pauseReading();
+    } else if (speechSynthesis.paused) {
+      // En pause → Reprendre
+      speechSynthesis.resume();
+      setReaderButtonReading();
+    } else {
+      // Arrêté → Démarrer
+      playReading();
+    }
+  });
+  stopReadingButton?.addEventListener('click', () => {
+    stopReading();
+    setReaderButtonStopped();
   });
 }
+
+function showReaderStartedMessage() {
+  const notyf = new Notyf({
+    duration: 2000,
+    ripple: false,
+    dismissible: true,
+    types: [
+      {
+        type: 'success',
+        background: '#10B981',
+        icon: {
+          className: 'notyf__icon--success',
+          tagName: 'i',
+          text: '🔊',
+        },
+      },
+    ],
+    position: {
+      x: 'right',
+      y: 'top',
+    },
+  });
+
+  notyf.success(`Lecture de l'article lancée !`);
+}

single-articles.php

@@ -42,9 +42,6 @@ $revueID = get_field('related_revue', get_the_ID());
 						'ID' => get_the_ID()
 					)); ?>
 
-
-
-
 				</div>
 
 			</div>

template-parts/articles/article-toolbar.php

@@ -47,9 +47,12 @@ $pdf_url = isset($pdf_version) && !empty($pdf_version['url']) ? $pdf_version['ur
 			<?php endif; ?>
 
 
-			<button id="listen-article" type="button">
-				<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-ecouter.svg" alt="Lecture vocale de l'article">
-
+			<button id="listen-article" type="button" data-reading-status="stopped" title="Lancer la lecture vocale de l'article">
+				<img id="play-reading" class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-ecouter.svg" alt="Lecture vocale de l'article">
+				<img id="pause-reading" class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-pause.svg" alt="Arrêter la lecture vocale de l'article">
+			</button>
+			<button id="stop-reading" type="button" title="Arrêter la lecture vocale de l'article">
+				<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-stop-reading.svg" alt="Arrêter la lecture vocale de l'article">
 			</button>
 		</div>