From 4062393843b4bf07e67866df6553cbaed824bb04 Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 11 Feb 2025 17:55:00 +0100
Subject: [PATCH] Association couleurs lexiques
---
src/assets/lexicon_icon.js | 23 +++++----
src/context_menu/browser_context_menu.js | 6 +--
src/context_menu/custom_context_menu.js | 7 +--
src/sidebar/sidebar.js | 64 +++++++++++-------------
4 files changed, 50 insertions(+), 50 deletions(-)
diff --git a/src/assets/lexicon_icon.js b/src/assets/lexicon_icon.js
index 021073d..5fc780a 100644
--- a/src/assets/lexicon_icon.js
+++ b/src/assets/lexicon_icon.js
@@ -14,18 +14,22 @@ function generateRandomColor() {
}
/**
- * Retourne (ou crée) la couleur associée à un lexique donné.
- * La couleur est stockée dans l'objet global window.lexiconColors pour la persistance durant la session.
+ * Obtient (ou crée) la couleur associée à un lexique donné en utilisant browser.storage.local.
* @param {string|number} lexiconId - L'identifiant du lexique.
- * @returns {string} La couleur associée.
+ * @returns {Promise<string>} La couleur associée au lexique.
*/
-function getOrCreateLexiconColor(lexiconId) {
- // Crée l'objet global s'il n'existe pas déjà .
- window.lexiconColors = window.lexiconColors || {};
- if (!window.lexiconColors[lexiconId]) {
- window.lexiconColors[lexiconId] = generateRandomColor();
+async function getOrCreateLexiconColor(lexiconId) {
+ // Récupère la correspondance stockée dans storage
+ let { lexiconColors } = await browser.storage.local.get("lexiconColors");
+ if (!lexiconColors) {
+ lexiconColors = {};
}
- return window.lexiconColors[lexiconId];
+ // Si aucune couleur n'est associée à ce lexiconId, on la génère et on la sauvegarde
+ if (!lexiconColors[lexiconId]) {
+ lexiconColors[lexiconId] = generateRandomColor();
+ await browser.storage.local.set({ lexiconColors });
+ }
+ return lexiconColors[lexiconId];
}
/**
@@ -49,4 +53,3 @@ window.generateRandomColor = generateRandomColor;
window.getOrCreateLexiconColor = getOrCreateLexiconColor;
window.createColorCircle = createColorCircle;
-console.log("lexicon_icon.js chargé");
diff --git a/src/context_menu/browser_context_menu.js b/src/context_menu/browser_context_menu.js
index 4f9f7c6..7c24d4a 100644
--- a/src/context_menu/browser_context_menu.js
+++ b/src/context_menu/browser_context_menu.js
@@ -31,7 +31,7 @@ async function createContextMenu() {
id: "searchInLexicons",
title: "Rechercher dans mes lexiques",
contexts: ["selection"],
- icons: { "16": "icons/quel_lexique.png" },
+ icons: { "16": "src/assets/icons/quel_lexique.png" },
});
// Item 2 : Ajouter le mot au(x) lexique(s) de l’utilisateur
@@ -39,7 +39,7 @@ async function createContextMenu() {
id: "addToLexicon",
title: "Ajouter ce mot à mes lexiques",
contexts: ["selection"],
- icons: { "16": "icons/ajout_lexique.png" },
+ icons: { "16": "src/assets/icons/ajout_lexique.png" },
});
}
@@ -55,7 +55,7 @@ async function createContextMenu() {
id: "getDefinition",
title: "Obtenir une définition",
contexts: ["selection"],
- icons: { "16": "icons/definition.png" },
+ icons: { "16": "src/assets/icons/definition.png" },
});
browser.contextMenus.create({
diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js
index 2d38fba..06f2530 100644
--- a/src/context_menu/custom_context_menu.js
+++ b/src/context_menu/custom_context_menu.js
@@ -264,14 +264,14 @@ async function showPicker(event, selectedText) {
if (!Array.isArray(lexicons) || lexicons.length === 0) {
picker.innerHTML = "<p>Aucun lexique trouvé.</p>";
} else {
- lexicons.forEach(lex => {
+ for (const lex of lexicons) {
const id = lex.id;
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 = getOrCreateLexiconColor(id);
+ const color = await getOrCreateLexiconColor(id);
const circleIcon = createColorCircle(color, 32);
// Crée un conteneur pour l'icône
@@ -309,7 +309,7 @@ async function showPicker(event, selectedText) {
alert(`Erreur : ${error.message}`);
}
});
- });
+ }
}
// Positionner et afficher le picker
@@ -323,3 +323,4 @@ async function showPicker(event, selectedText) {
}
}
+
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index e31a0dd..ef05621 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -204,11 +204,10 @@ async function fetchLexicons() {
}
/**
- * Affiche la liste des lexiques avec des checkboxes.
- * Les checkboxes servent ici à activer/désactiver le surlignage,
- * mais on va aussi s’en servir pour déterminer où ajouter le mot.
+ * Affiche la liste des lexiques avec des checkboxes dans la barre latérale.
+ * @param {Array} lexicons - Liste des lexiques à afficher.
*/
-function displayLexiconsWithCheckbox(lexicons) {
+async function displayLexiconsWithCheckbox(lexicons) {
const lexiquesContainer = document.getElementById("lexiques");
if (!lexiquesContainer) {
console.warn("âš ï¸ Ã‰lément #lexiques introuvable.");
@@ -220,50 +219,49 @@ function displayLexiconsWithCheckbox(lexicons) {
lexiquesContainer.textContent = "Aucun lexique disponible.";
return;
}
-
- lexicons.forEach(({ lexiconName, lexiconId, active }) => {
+
+ for (const { lexiconName, lexiconId, active } of lexicons) {
const lexiqueDiv = document.createElement("div");
lexiqueDiv.className = "lexique-item";
-
- // Icône du lexique
- const color = getOrCreateLexiconColor(lexiconId);
+
+ // Obtenir la couleur associée de façon asynchrone
+ const color = await getOrCreateLexiconColor(lexiconId);
const circleIcon = createColorCircle(color, 24);
+
const iconDiv = document.createElement("div");
iconDiv.className = "lexique-icon";
iconDiv.appendChild(circleIcon);
-
+
const labelSpan = document.createElement("span");
labelSpan.className = "lexique-label";
labelSpan.textContent = lexiconName;
-
- // Conteneur pour la case à cocher avec tooltip
+
+ // Conteneur pour la checkbox (avec tooltip)
const checkboxContainer = document.createElement("label");
checkboxContainer.className = "tooltip-container lexique-checkbox-container";
-
const addCheckbox = document.createElement("input");
addCheckbox.type = "checkbox";
addCheckbox.className = "lexique-checkbox";
addCheckbox.dataset.lexiconId = lexiconId;
-
const checkboxTooltip = document.createElement("span");
checkboxTooltip.className = "tooltip";
checkboxTooltip.textContent = "Ajouter le mot à ce lexique";
-
- // Conteneur pour le bouton de surlignage avec tooltip
+ checkboxContainer.appendChild(addCheckbox);
+ checkboxContainer.appendChild(checkboxTooltip);
+
+ // Conteneur pour le bouton de surlignage (avec tooltip)
const highlightButton = document.createElement("button");
highlightButton.className = "tooltip-container lexique-highlight-toggle";
highlightButton.dataset.lexiconId = lexiconId;
highlightButton.dataset.active = active ? "true" : "false";
-
const feutreIcon = document.createElement("img");
- feutreIcon.src = "../assets/icons/feutre.png";
+ feutreIcon.src = "../assets/icons/feutre.png"; // Vérifiez le chemin relatif
feutreIcon.alt = "Feutre";
feutreIcon.className = "feutre-icon";
-
const highlightTooltip = document.createElement("span");
highlightTooltip.className = "tooltip";
highlightTooltip.textContent = "Activer/Désactiver le surlignage des mots du lexique";
-
+
// Gestion du clic pour activer/désactiver le surlignage
highlightButton.addEventListener("click", async () => {
let currentState = highlightButton.dataset.active === "true";
@@ -279,45 +277,43 @@ function displayLexiconsWithCheckbox(lexicons) {
console.error("Erreur lors du toggle de surlignage pour le lexique", lexiconId, ":", error);
}
});
-
- // Assemblage
+
highlightButton.appendChild(feutreIcon);
highlightButton.appendChild(highlightTooltip);
- checkboxContainer.appendChild(addCheckbox);
- checkboxContainer.appendChild(checkboxTooltip);
-
+
+ // Assemblage final
lexiqueDiv.appendChild(iconDiv);
lexiqueDiv.appendChild(labelSpan);
lexiqueDiv.appendChild(checkboxContainer);
lexiqueDiv.appendChild(highlightButton);
+
lexiquesContainer.appendChild(lexiqueDiv);
- });
-
- // Ajustement dynamique des tooltips
+ }
+
+ // Ajustement dynamique des tooltips (après un court délai)
setTimeout(() => {
const menu = document.getElementById("menu");
+ if (!menu) return;
const menuRect = menu.getBoundingClientRect();
const containers = document.querySelectorAll('.tooltip-container');
-
+
containers.forEach(container => {
const tooltip = container.querySelector('.tooltip');
if (!tooltip) return;
-
tooltip.style.left = '50%';
tooltip.style.transform = 'translateX(-50%) translateY(-5px)';
-
+
const tooltipRect = tooltip.getBoundingClientRect();
if (tooltipRect.left < menuRect.left) {
const overflowLeft = menuRect.left - tooltipRect.left;
tooltip.style.transform = `translateX(calc(-100% + ${overflowLeft}px)) translateY(-5px)`;
- }
- else if (tooltipRect.right > menuRect.right) {
+ } else if (tooltipRect.right > menuRect.right) {
const overflowRight = tooltipRect.right - menuRect.right;
tooltip.style.transform = `translateX(calc(-100% - ${overflowRight}px)) translateY(-5px)`;
}
});
}, 100);
-}
+}
--
GitLab