diff --git a/src/css/sidebar.css b/src/css/sidebar.css
index a1ac92d26da8ba6642bd7dc4e0c0688acf3c4090..4c445fbda34d04fe6fae713d999f54bd9ddf10e2 100644
--- a/src/css/sidebar.css
+++ b/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 {
diff --git a/src/utils/definitions.js b/src/utils/definitions.js
index 4dd21af28afe1da3fcdd923c558fee49b344e9fa..3329f20166f0bd0d989af01408394c31499687bd 100644
--- a/src/utils/definitions.js
+++ b/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]) => {