diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js index 2e0ea97b79883f1c252381e91ecf7338d6a9c827..b9f66179b3bfd1428129e5926c4b2ba7d408708c 100644 --- a/src/context_menu/custom_context_menu.js +++ b/src/context_menu/custom_context_menu.js @@ -262,12 +262,14 @@ function createPicker() { */ async function showPicker(event, selectedText) { console.log("showPicker appelé avec", event, selectedText); - const picker = createPicker(); // supposez que createPicker est défini ailleurs dans ce fichier + const picker = createPicker(); picker.innerHTML = ""; // Vider le picker + const selectedLexicons = new Set(); // Stocke les lexiques sélectionnés try { const lexicons = await getLexicons(authToken, "fr"); console.log("Lexicons récupérés :", lexicons); + if (!Array.isArray(lexicons) || lexicons.length === 0) { picker.innerHTML = "<p>Aucun lexique trouvé.</p>"; } else { @@ -276,52 +278,121 @@ async function showPicker(event, selectedText) { const name = lex.category === "User" ? `Lexique personnel : ${lex.user?.pseudo || "Inconnu"} (${lex.id})` : `Lexique de groupe : ${lex.group?.name || "Inconnu"} (${lex.id})`; - + // Obtenir la couleur et créer le cercle const color = await getOrCreateLexiconColor(id); const circleIcon = createColorCircle(color, 32); - // Crée un conteneur pour l'icône + // Créer un conteneur pour l'icône const iconContainer = document.createElement("div"); iconContainer.className = "lexicon-option"; iconContainer.dataset.lexiconId = id; - iconContainer.style.margin = "2px"; + iconContainer.style.margin = "5px"; iconContainer.style.cursor = "pointer"; iconContainer.title = name; iconContainer.style.display = "inline-flex"; - iconContainer.style.flexDirection = "row"; // Assurez-vous que c'est horizontal - iconContainer.style.alignItems = "center"; // Alignement centré + iconContainer.style.flexDirection = "row"; + iconContainer.style.alignItems = "center"; iconContainer.style.justifyContent = "center"; - + iconContainer.style.border = "2px solid transparent"; // Ajoute le cercle coloré au conteneur iconContainer.appendChild(circleIcon); picker.appendChild(iconContainer); - // Écouteur de clic pour ajouter le mot au lexique sélectionné - iconContainer.addEventListener("click", async () => { - console.log(`Tentative d'ajout du mot "${selectedText}" au lexique ${id} (${name})`); - try { - let definitions = []; - try { - definitions = await fetchLexiconDefinitions(selectedText); - } catch (err) { - console.error("Erreur lors de la récupération des définitions :", err); - } - const exists = Array.isArray(definitions) && definitions.some(def => def.lexiconId === id); - if (exists) { - alert(`Le mot "${selectedText}" existe déjà dans le lexique ${name}.`); - } else { - await window.AddWord(authToken, selectedText, [id], false); - alert(`Le mot "${selectedText}" a été ajouté dans le lexique ${name}.`); - } - picker.style.display = "none"; - } catch (error) { - console.error("Erreur lors de l'ajout du mot :", error); - alert(`Erreur : ${error.message}`); + // Écouteur de clic pour sélectionner/désélectionner le lexique + iconContainer.addEventListener("click", () => { + if (selectedLexicons.has(id)) { + selectedLexicons.delete(id); + iconContainer.style.border = "2px solid transparent"; + } else { + selectedLexicons.add(id); + iconContainer.style.border = "2px solid black"; } }); } + + // Ajouter un bouton de validation + const confirmButton = document.createElement("button"); + confirmButton.textContent = "Ajouter aux lexiques sélectionnés"; + confirmButton.style.fontStyle = "italic"; + confirmButton.style.fontSize = "8px"; + confirmButton.style.marginTop = "10px"; + confirmButton.style.padding = "5px 10px"; + confirmButton.style.cursor = "pointer"; + confirmButton.style.border = "none"; + confirmButton.style.borderRadius = "4px"; + confirmButton.style.backgroundColor = "#6e76c7"; + confirmButton.style.color = "white"; + + confirmButton.addEventListener("click", async () => { + if (selectedLexicons.size === 0) { + alert("Veuillez sélectionner au moins un lexique."); + return; + } + + console.log(`🔠Vérification si le mot "${selectedText}" existe déjà dans les lexiques sélectionnés...`); + + let definitions = []; + try { + definitions = await fetchLexiconDefinitions(selectedText); + } catch (error) { + console.error("⌠Erreur lors de la récupération des définitions :", error); + } + + const existingLexiconIds = new Set(); + if (Array.isArray(definitions)) { + for (const def of definitions) { + if (selectedLexicons.has(def.lexiconId)) { + existingLexiconIds.add(def.lexiconId); + } + } + } + + // Affichage des lexiques où le mot existe déjà + if (existingLexiconIds.size > 0) { + alert(`âš ï¸ Le mot "${selectedText}" existe déjà dans les lexiques suivants : ${Array.from(existingLexiconIds).join(", ")}`); + } + + // Filtrer les lexiques où le mot n'existe pas encore + const lexiconsToAdd = [...selectedLexicons].filter(id => !existingLexiconIds.has(id)); + + if (lexiconsToAdd.length === 0) { + alert(`✅ Le mot "${selectedText}" est déjà présent dans tous les lexiques sélectionnés.`); + return; + } + + // Envoi de la requête d'ajout + try { + console.log(`📡 Ajout du mot "${selectedText}" dans les lexiques :`, lexiconsToAdd); + const result = await AddWord(authToken, selectedText, lexiconsToAdd, false); + console.log("✅ Réponse API :", result); + + // Rafraîchir l'UI après l'ajout + await new Promise(resolve => setTimeout(resolve, 300)); + browser.runtime.sendMessage({ action: "refreshUI" }); + + // Affichage du message de confirmation dans le picker + picker.innerHTML = `<p style="color: green;">✅ Mot ajouté avec succès dans : ${lexiconsToAdd.join(", ")}.</p>`; + setTimeout(() => picker.style.display = "none", 2000); + browser.runtime.sendMessage({ + action: "addWordResult", + lexicons:`✅ Mot ajouté avec succès dans : ${lexiconsToAdd.join(", ")}.` + }); + } catch (error) { + console.error("⌠Erreur lors de l'ajout du mot :", error); + + // Affichage du message d'erreur dans le picker + picker.innerHTML = `<p style="color: red;">⌠Erreur : ${error.message}</p>`; + setTimeout(() => picker.style.display = "none", 3000); + browser.runtime.sendMessage({ + action: "addWordResult", + lexicons: `⌠Erreur lors de l'ajout du mot : ${error.message}` + }); + } + }); + + picker.appendChild(confirmButton); } // Positionner et afficher le picker @@ -329,12 +400,16 @@ async function showPicker(event, selectedText) { picker.style.top = event.pageY + "px"; picker.style.display = "block"; } catch (error) { - console.error("Erreur lors de la récupération des lexiques :", error); + console.error("⌠Erreur lors de la récupération des lexiques :", error); picker.innerHTML = "<p>Erreur lors du chargement des lexiques.</p>"; picker.style.display = "block"; } } + + + + function hideLexiconPicker() { const picker = document.getElementById("lexiconPicker"); if (picker) { diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js index 0668c86848ace8038a67a24cb5e11d88b3a6eb57..c937cc67870a842cb4b7943fb14c349d79dbc6f1 100644 --- a/src/sidebar/sidebar.js +++ b/src/sidebar/sidebar.js @@ -506,6 +506,13 @@ browser.runtime.onMessage.addListener(async (message) => { window.displayLexiconResults(message.lexicons); break; + case "addWordResult": + const lexiconResultElement = document.getElementById("lexiconResult"); + if (lexiconResultElement) { + lexiconResultElement.innerHTML = message.lexicons; + } + break; + case "addToLexicon": handleAddWordClick(); break;