Correction affichage définitions Wiktionnaire

src/css/sidebar.css

@@ -263,6 +263,9 @@ button.lexique-highlight-toggle:hover .tooltip {
 #mesLexiquesContainer h4 {
   margin-bottom: 5px;
 }
+#wiktionnaireContainer h4 {
+  margin-bottom: 2px !important;
+}
 .balex-icon {
   position: absolute;
   top: 50%;
@@ -351,6 +354,10 @@ button.lexique-highlight-toggle:hover .tooltip {
 }
 
 /* Section Définitions */
+.definition-item {
+  font-size: 13px;
+  padding-left: 10px;
+}
 #definitionContainer {
   background-color: #444;
   padding: 10px;
@@ -359,7 +366,7 @@ button.lexique-highlight-toggle:hover .tooltip {
 }
 #definitionsList {
   list-style: none;
-  padding: 0;
+  padding: 2px;
 }
 #definitionsList li {
   margin-bottom: 10px;
@@ -373,6 +380,14 @@ button.lexique-highlight-toggle:hover .tooltip {
   color: red !important;
   font-weight: bold;
 }
+#wiktionnaireList .definition-item {
+  font-size: 13px;
+  padding-left: 2px;
+  padding-top: 0;
+}
+#wiktionnaireList {
+  padding-left: 2px;
+}
 
 /* Modal de définition */
 .modal-overlay {

src/utils/definitions.js

@@ -328,7 +328,7 @@ function formatDefinitionData(apiResponse) {
 // ▌ Affichage des définitions dans la barre latérale
 // ─────────────────────────────────────────────────────────────────────────────
 
-const MAX_LENGTH = 200;
+const MAX_LENGTH = 300;
 
 /**
 * Affiche les définitions dans la barre latérale.
@@ -392,72 +392,104 @@ function displayDefinitions(definitions) {
 
             if (allPronunciations.size > 0) {
                 const pronDiv = document.createElement("div");
-                pronDiv.style.fontWeight = "bold";
-                pronDiv.style.color = "#94608a";
                 pronDiv.style.marginBottom = "5px";
-                pronDiv.textContent = `Prononciations possibles : ${[...allPronunciations].join(", ")}`;
+                pronDiv.style.fontSize = "13px";
+                pronDiv.textContent = "Prononciations possibles :";
+                pronDiv.style.marginBottom = "10px";
                 definitionContainer.appendChild(pronDiv);
+
+                // Création d'un conteneur pour les prononciations
+                const pronContainer = document.createElement("div");
+                pronContainer.style.display = "flex";
+                pronContainer.style.justifyContent = "center";
+                pronContainer.style.flexWrap = "wrap";
+                allPronunciations.forEach(pron => {
+                    const pronSpan = document.createElement("span");
+                    pronSpan.textContent = pron;
+                    pronSpan.style.marginRight = "25px"; 
+                    pronSpan.style.fontSize = "15px";
+                    pronSpan.style.alignItems = "center";
+                    pronSpan.style.justifyContent = "center";
+                    pronContainer.appendChild(pronSpan);
+                });
+                definitionContainer.appendChild(pronContainer);
             }
+            
 
             // 3. Affichage des définitions triées par POS
             Object.entries(definitionsByPOS).forEach(([pos, posData]) => {
-                if (posData.definitions.length === 0) return;  // Évite les POS vides
-
-                // Titre du POS
-                const posTitle = document.createElement("h4");
-                posTitle.style.marginTop = "10px";
-                posTitle.style.color = "#FFFFFF";
-                posTitle.textContent = `${pos.toUpperCase()}`;
-                definitionContainer.appendChild(posTitle);
-
-                // Prononciations spécifiques au POS
-                if (posData.pronunciations.length > 0) {
-                    const posPronDiv = document.createElement("div");
-                    posPronDiv.style.fontStyle = "italic";
-                    posPronDiv.style.color = "#94608a";
-                    // posPronDiv.textContent = `${posData.pronunciations.join(", ")}`;
-                    // definitionContainer.appendChild(posPronDiv);
-                }
-        
-                const defList = document.createElement("ul");
-                defList.style.margin = "0";
-                defList.style.paddingLeft = "20px";
-
-                posData.definitions.forEach(def => {
-                    const li = document.createElement("li");
-
-                    // 4. Gestion du bouton "Lire la suite"
-                    let displayedText = def.trim();
-                    if (displayedText.length > MAX_LENGTH) {
-                        const truncatedText = displayedText.slice(0, MAX_LENGTH) + "... ";
-                        const readMoreLink = document.createElement("a");
-                        readMoreLink.href = "#";
-                        readMoreLink.textContent = "[Lire la suite]";
-                        readMoreLink.style.marginLeft = "5px";
-                        readMoreLink.style.color = "#8d5c70";
-                        readMoreLink.style.textDecoration = "underline";
-                        readMoreLink.style.cursor = "pointer";
-                        readMoreLink.addEventListener("click", (event) => {
-                            event.preventDefault();
-                            openDefinitionPopup(displayedText);
-                        });
-
-                        li.appendChild(document.createTextNode(truncatedText));
-                        li.appendChild(readMoreLink);
-                    } else {
-                        li.textContent = displayedText;
-                    }
-
-                    defList.appendChild(li);
-                });
-
-                definitionContainer.appendChild(defList);
-            });
-
-            wiktionnaireList.appendChild(definitionContainer);
-            hasWiktionaryDefinitions = true;
-        }
-    });
+              if (posData.definitions.length === 0) return;  // Évite les POS vides
+          
+              // Création d'un conteneur dédié pour ce POS
+              const posContainer = document.createElement("div");
+          
+              // Titre du POS
+              const posTitle = document.createElement("h4");
+              posTitle.style.marginTop = "10px";
+              posTitle.style.color = "#FFFFFF";
+              posTitle.textContent = pos.toUpperCase();
+              posContainer.appendChild(posTitle);
+          
+              // Prononciations spécifiques au POS
+              if (posData.pronunciations.length > 0) {
+                  const posPronDiv = document.createElement("div");
+                  posPronDiv.style.fontStyle = "italic";
+                  posPronDiv.style.color = "#94608a";
+                  // posPronDiv.textContent = posData.pronunciations.join(", ");
+                  posContainer.appendChild(posPronDiv);
+              }
+              // Récupération des définitions complètes
+              const fullDefinitions = posData.definitions.map(def => def.trim());
+              // Concaténation de toutes les définitions dans un seul texte (séparées par un espace)
+              const concatenatedText = fullDefinitions.join(" ");
+              
+              // Création de la liste des définitions pour ce POS
+              const defList = document.createElement("ul");
+              defList.style.margin = "0";
+              defList.style.paddingLeft = "20px";
+              
+              const li = document.createElement("li");
+              if (concatenatedText.length > MAX_LENGTH) {
+                  // Affichage tronqué pour l'ensemble du bloc de définitions
+                  const truncatedText = concatenatedText.slice(0, MAX_LENGTH) + "... ";
+                  li.textContent = truncatedText;
+                  
+                  // Bouton "Lire la suite" pour afficher le contenu complet
+                  const readMoreLink = document.createElement("a");
+                  readMoreLink.href = "#";
+                  readMoreLink.textContent = "[Lire la suite]";
+                  readMoreLink.style.marginLeft = "5px";
+                  readMoreLink.style.color = "#8d5c70";
+                  readMoreLink.style.textDecoration = "underline";
+                  readMoreLink.style.cursor = "pointer";
+                  readMoreLink.addEventListener("click", (event) => {
+                      event.preventDefault();
+                      // Construction du contenu complet pour ce POS en préservant la structure
+                      let popupContent = `<h4 style="margin-top:10px; color:#FFFFFF;">${pos.toUpperCase()}</h4>`;
+                      if (posData.pronunciations.length > 0) {
+                          popupContent += `<div style="font-style:italic; color:#94608a;">${posData.pronunciations.join(", ")}</div>`;
+                      }
+                      popupContent += "<ul style='margin:0; padding-left:20px;'>";
+                      fullDefinitions.forEach(text => {
+                          popupContent += `<li>${text}</li>`;
+                      });
+                      popupContent += "</ul>";
+                      openDefinitionPopup(popupContent);
+                  });
+                  li.appendChild(readMoreLink);
+              } else {
+                  li.textContent = concatenatedText;
+              }
+              
+              defList.appendChild(li);
+              posContainer.appendChild(defList);
+              definitionContainer.appendChild(posContainer);
+          });
+          
+          wiktionnaireList.appendChild(definitionContainer);
+          hasWiktionaryDefinitions = true;
+      }
+  });
 
   // 5. Gestion des groupes de lexiques personnels
   Object.entries(lexiconGroups).forEach(([lexiconName, definitionItems]) => {