Skip to content
Snippets Groups Projects
Commit 639cb55b authored by Lucie Bader's avatar Lucie Bader
Browse files

Correction affichage définitions Wiktionnaire

parent a989769b
No related branches found
No related tags found
1 merge request!9Affichage stats
Hide whitespace changes
Inline Side-by-side
src/css/sidebar.css
+ 16
− 1
View file @ 639cb55b
...@@ -263,6 +263,9 @@ button.lexique-highlight-toggle:hover .tooltip { ...@@ -263,6 +263,9 @@ button.lexique-highlight-toggle:hover .tooltip {
#mesLexiquesContainer h4 { #mesLexiquesContainer h4 {
margin-bottom: 5px; margin-bottom: 5px;
} }
#wiktionnaireContainer h4 {
margin-bottom: 2px !important;
}
.balex-icon { .balex-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -351,6 +354,10 @@ button.lexique-highlight-toggle:hover .tooltip { ...@@ -351,6 +354,10 @@ button.lexique-highlight-toggle:hover .tooltip {
} }
/* Section Définitions */ /* Section Définitions */
.definition-item {
font-size: 13px;
padding-left: 10px;
}
#definitionContainer { #definitionContainer {
background-color: #444; background-color: #444;
padding: 10px; padding: 10px;
...@@ -359,7 +366,7 @@ button.lexique-highlight-toggle:hover .tooltip { ...@@ -359,7 +366,7 @@ button.lexique-highlight-toggle:hover .tooltip {
} }
#definitionsList { #definitionsList {
list-style: none; list-style: none;
padding: 0; padding: 2px;
} }
#definitionsList li { #definitionsList li {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -373,6 +380,14 @@ button.lexique-highlight-toggle:hover .tooltip { ...@@ -373,6 +380,14 @@ button.lexique-highlight-toggle:hover .tooltip {
color: red !important; color: red !important;
font-weight: bold; font-weight: bold;
} }
#wiktionnaireList .definition-item {
font-size: 13px;
padding-left: 2px;
padding-top: 0;
}
#wiktionnaireList {
padding-left: 2px;
}
/* Modal de définition */ /* Modal de définition */
.modal-overlay { .modal-overlay {
......
src/utils/definitions.js
+ 93
− 61
View file @ 639cb55b
...@@ -328,7 +328,7 @@ function formatDefinitionData(apiResponse) { ...@@ -328,7 +328,7 @@ function formatDefinitionData(apiResponse) {
// ▌ Affichage des définitions dans la barre latérale // ▌ 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. * Affiche les définitions dans la barre latérale.
...@@ -392,72 +392,104 @@ function displayDefinitions(definitions) { ...@@ -392,72 +392,104 @@ function displayDefinitions(definitions) {
if (allPronunciations.size > 0) { if (allPronunciations.size > 0) {
const pronDiv = document.createElement("div"); const pronDiv = document.createElement("div");
pronDiv.style.fontWeight = "bold";
pronDiv.style.color = "#94608a";
pronDiv.style.marginBottom = "5px"; 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); 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 // 3. Affichage des définitions triées par POS
Object.entries(definitionsByPOS).forEach(([pos, posData]) => { Object.entries(definitionsByPOS).forEach(([pos, posData]) => {
if (posData.definitions.length === 0) return; // Évite les POS vides if (posData.definitions.length === 0) return; // Évite les POS vides
// Titre du POS // Création d'un conteneur dédié pour ce POS
const posTitle = document.createElement("h4"); const posContainer = document.createElement("div");
posTitle.style.marginTop = "10px";
posTitle.style.color = "#FFFFFF"; // Titre du POS
posTitle.textContent = `${pos.toUpperCase()}`; const posTitle = document.createElement("h4");
definitionContainer.appendChild(posTitle); posTitle.style.marginTop = "10px";
posTitle.style.color = "#FFFFFF";
// Prononciations spécifiques au POS posTitle.textContent = pos.toUpperCase();
if (posData.pronunciations.length > 0) { posContainer.appendChild(posTitle);
const posPronDiv = document.createElement("div");
posPronDiv.style.fontStyle = "italic"; // Prononciations spécifiques au POS
posPronDiv.style.color = "#94608a"; if (posData.pronunciations.length > 0) {
// posPronDiv.textContent = `${posData.pronunciations.join(", ")}`; const posPronDiv = document.createElement("div");
// definitionContainer.appendChild(posPronDiv); posPronDiv.style.fontStyle = "italic";
} posPronDiv.style.color = "#94608a";
// posPronDiv.textContent = posData.pronunciations.join(", ");
const defList = document.createElement("ul"); posContainer.appendChild(posPronDiv);
defList.style.margin = "0"; }
defList.style.paddingLeft = "20px"; // Récupération des définitions complètes
const fullDefinitions = posData.definitions.map(def => def.trim());
posData.definitions.forEach(def => { // Concaténation de toutes les définitions dans un seul texte (séparées par un espace)
const li = document.createElement("li"); const concatenatedText = fullDefinitions.join(" ");
// 4. Gestion du bouton "Lire la suite" // Création de la liste des définitions pour ce POS
let displayedText = def.trim(); const defList = document.createElement("ul");
if (displayedText.length > MAX_LENGTH) { defList.style.margin = "0";
const truncatedText = displayedText.slice(0, MAX_LENGTH) + "... "; defList.style.paddingLeft = "20px";
const readMoreLink = document.createElement("a");
readMoreLink.href = "#"; const li = document.createElement("li");
readMoreLink.textContent = "[Lire la suite]"; if (concatenatedText.length > MAX_LENGTH) {
readMoreLink.style.marginLeft = "5px"; // Affichage tronqué pour l'ensemble du bloc de définitions
readMoreLink.style.color = "#8d5c70"; const truncatedText = concatenatedText.slice(0, MAX_LENGTH) + "... ";
readMoreLink.style.textDecoration = "underline"; li.textContent = truncatedText;
readMoreLink.style.cursor = "pointer";
readMoreLink.addEventListener("click", (event) => { // Bouton "Lire la suite" pour afficher le contenu complet
event.preventDefault(); const readMoreLink = document.createElement("a");
openDefinitionPopup(displayedText); readMoreLink.href = "#";
}); readMoreLink.textContent = "[Lire la suite]";
readMoreLink.style.marginLeft = "5px";
li.appendChild(document.createTextNode(truncatedText)); readMoreLink.style.color = "#8d5c70";
li.appendChild(readMoreLink); readMoreLink.style.textDecoration = "underline";
} else { readMoreLink.style.cursor = "pointer";
li.textContent = displayedText; readMoreLink.addEventListener("click", (event) => {
} event.preventDefault();
// Construction du contenu complet pour ce POS en préservant la structure
defList.appendChild(li); 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>`;
definitionContainer.appendChild(defList); }
}); popupContent += "<ul style='margin:0; padding-left:20px;'>";
fullDefinitions.forEach(text => {
wiktionnaireList.appendChild(definitionContainer); popupContent += `<li>${text}</li>`;
hasWiktionaryDefinitions = true; });
} 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 // 5. Gestion des groupes de lexiques personnels
Object.entries(lexiconGroups).forEach(([lexiconName, definitionItems]) => { Object.entries(lexiconGroups).forEach(([lexiconName, definitionItems]) => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment