From 3f4965ad0d5e7f93b22f397a80a924d0091a8920 Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 11 Feb 2025 17:38:46 +0100
Subject: [PATCH] =?UTF-8?q?Ic=C3=B4nes=20lexiques?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
manifest.json | 11 +++--
src/assets/lexicon_icon.js | 52 +++++++++++++++++++++
src/context_menu/custom_context_menu.js | 62 +++++++++----------------
src/sidebar/sidebar.html | 1 +
src/sidebar/sidebar.js | 12 +++--
src/utils/api.js | 4 +-
src/utils/definitions.js | 2 +-
7 files changed, 92 insertions(+), 52 deletions(-)
create mode 100644 src/assets/lexicon_icon.js
diff --git a/manifest.json b/manifest.json
index 642aaa8..a74107e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -53,11 +53,12 @@
"content_scripts": [
{
"matches": ["<all_urls>"],
- "js": ["src/utils/api.js"]
- },
- {
- "matches": ["<all_urls>"],
- "js": ["src/context_menu/custom_context_menu.js"],
+ "js": [
+ "src/assets/lexicon_icon.js",
+ "src/utils/api.js",
+ "src/utils/definitions.js",
+ "src/sidebar/sidebar.js",
+ "src/context_menu/custom_context_menu.js"],
"css": ["src/context_menu/custom_context_menu.css"],
"run_at": "document_end"
}
diff --git a/src/assets/lexicon_icon.js b/src/assets/lexicon_icon.js
new file mode 100644
index 0000000..021073d
--- /dev/null
+++ b/src/assets/lexicon_icon.js
@@ -0,0 +1,52 @@
+console.log("lexicon_icon.js chargé");
+
+/**
+ * Génère une couleur hexadécimale aléatoire (#RRGGBB).
+ * @returns {string} Une couleur hexadécimale, ex: "#A1B2C3".
+ */
+function generateRandomColor() {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+}
+
+/**
+ * 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.
+ * @param {string|number} lexiconId - L'identifiant du lexique.
+ * @returns {string} La couleur associée.
+ */
+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();
+ }
+ return window.lexiconColors[lexiconId];
+}
+
+/**
+ * Crée un élément HTML (div) stylisé en cercle de la couleur donnée.
+ * @param {string} color - Couleur au format "#RRGGBB".
+ * @param {number} [size=32] - Taille (largeur et hauteur) en pixels.
+ * @returns {HTMLElement} Le div stylisé en cercle.
+ */
+function createColorCircle(color, size = 32) {
+ const circle = document.createElement("div");
+ circle.style.width = `${size}px`;
+ circle.style.height = `${size}px`;
+ circle.style.borderRadius = "50%";
+ circle.style.backgroundColor = color;
+ circle.style.border = "1px solid black"; // Optionnel
+ return circle;
+}
+
+// Exposez ces fonctions globalement pour qu'elles soient accessibles dans d'autres scripts.
+window.generateRandomColor = generateRandomColor;
+window.getOrCreateLexiconColor = getOrCreateLexiconColor;
+window.createColorCircle = createColorCircle;
+
+console.log("lexicon_icon.js chargé");
diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js
index 011478f..2d38fba 100644
--- a/src/context_menu/custom_context_menu.js
+++ b/src/context_menu/custom_context_menu.js
@@ -1,7 +1,6 @@
console.log("custom_context_menu.js chargé correctement");
// === Variables globales ===
-let authToken = null;
const WHITE_BOX_ID = "whiteBox";
// Fonction utilitaire pour envoyer une notification via le background
@@ -26,19 +25,6 @@ async function loadAuthToken() {
}
}
-/**
- * Récupère les lexiques via l'API.
- * On utilise getLexicons(authToken, "fr") et on vérifie si la réponse se trouve dans response.data.
- */
-async function getLexicons(authToken, language = 'fr') {
- const userId = 4;
- const baseUrl = "https://babalex.lezinter.net/api/lexicon/search";
- const url = `${baseUrl}?user_id=${userId}&language=${encodeURIComponent(language)}`;
- const response = await callApi(url, authToken);
- console.log("Réponse API dans getLexicons :", response);
- return Array.isArray(response) ? response : (response.data || []);
-}
-
/**
* Crée le menu contextuel personnalisé (whiteBox) s'il n'existe pas déjà .
*/
@@ -269,7 +255,7 @@ function createPicker() {
*/
async function showPicker(event, selectedText) {
console.log("showPicker appelé avec", event, selectedText);
- const picker = createPicker();
+ const picker = createPicker(); // supposez que createPicker est défini ailleurs dans ce fichier
picker.innerHTML = ""; // Vider le picker
try {
@@ -279,35 +265,31 @@ async function showPicker(event, selectedText) {
picker.innerHTML = "<p>Aucun lexique trouvé.</p>";
} else {
lexicons.forEach(lex => {
- // Extraction des propriétés en se basant sur la logique de fetchLexicons()
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})`;
- const iconURL = lex.iconURL || browser.runtime.getURL("src/assets/icons/default_lexicon.png");
-
- const iconDiv = document.createElement("div");
- iconDiv.className = "lexicon-option";
- iconDiv.dataset.lexiconId = id;
- iconDiv.style.display = "inline-block";
- iconDiv.style.margin = "5px";
- iconDiv.style.cursor = "pointer";
- iconDiv.style.position = "relative";
-
- const iconImg = document.createElement("img");
- iconImg.src = iconURL;
- iconImg.alt = name;
- iconImg.title = name;
- iconImg.style.width = "32px";
- iconImg.style.height = "32px";
-
- iconDiv.appendChild(iconImg);
- picker.appendChild(iconDiv);
-
- iconDiv.addEventListener("click", async () => {
+
+ // Obtenir la couleur et créer le cercle
+ const color = getOrCreateLexiconColor(id);
+ const circleIcon = createColorCircle(color, 32);
+
+ // Crée un conteneur pour l'icône
+ const iconContainer = document.createElement("div");
+ iconContainer.className = "lexicon-option";
+ iconContainer.dataset.lexiconId = id;
+ iconContainer.style.margin = "5px";
+ iconContainer.style.cursor = "pointer";
+ iconContainer.title = name;
+
+ // 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 {
- // Vérifier si le mot existe déjà dans ce lexique
let definitions = [];
try {
definitions = await fetchLexiconDefinitions(selectedText);
@@ -330,8 +312,7 @@ async function showPicker(event, selectedText) {
});
}
- // Positionner le picker en fonction de l'événement
- console.log("Positionnement du picker en X:", event.pageX, "Y:", event.pageY);
+ // Positionner et afficher le picker
picker.style.left = event.pageX + "px";
picker.style.top = event.pageY + "px";
picker.style.display = "block";
@@ -341,3 +322,4 @@ async function showPicker(event, selectedText) {
picker.style.display = "block";
}
}
+
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 2327900..6d189ef 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BaLex - Barre Latérale</title>
+ <script src="../assets/lexicon_icon.js" defer></script>
<script src="../utils/api.js" defer></script>
<script src="../utils/definitions.js" defer></script>
<script src="sidebar.js" defer></script>
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index c5707e9..e31a0dd 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -3,14 +3,13 @@ console.log(
"🌠Vérification API browser :",
typeof browser !== "undefined" ? "✅ Disponible" : "⌠Non disponible"
);
-
+console.log("getLexicons type:", typeof getLexicons);
+console.log("window.getLexicons type:", typeof window.getLexicons);
// ─────────────────────────────────────────────────────────────────────────────
// ▌ Variables globales
// ─────────────────────────────────────────────────────────────────────────────
-let authToken = null;
-
-window.lexiconMap = lexiconMap;
+let authToken = window.authToken;
window.authToken = authToken;
// ─────────────────────────────────────────────────────────────────────────────
@@ -170,7 +169,7 @@ async function fetchLexicons() {
if (!authToken) {
throw new Error("âš ï¸ Aucun token disponible. Veuillez vous connecter.");
}
-
+ console.log("getLexicons type:", typeof getLexicons);
const lexicons = await getLexicons(authToken, "fr");
console.log("📚 Réponse brute de l'API :", lexicons);
@@ -227,8 +226,11 @@ function displayLexiconsWithCheckbox(lexicons) {
lexiqueDiv.className = "lexique-item";
// Icône du lexique
+ const color = 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";
diff --git a/src/utils/api.js b/src/utils/api.js
index 72eb48c..c1bc41c 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,5 +1,5 @@
console.log("✅ api.js chargé correctement");
-
+window.authToken = null;
// ─────────────────────────────────────────────────────────────────────────────
// ▌ Sélection de texte sur la page
// ─────────────────────────────────────────────────────────────────────────────
@@ -223,8 +223,10 @@ async function AddWord(authToken, selectedWord, lexiconIds, force = false) {
window.callApi = callApi;
window.getLexicons = getLexicons;
+console.log("getLexicons exposée, type:", typeof window.getLexicons);
window.getAllCategoriesLexicons = getAllCategoriesLexicons;
window.getLexiconEntries = getLexiconEntries;
window.getAllLexiconWords = getAllLexiconWords;
window.getWiktionaryDefinition = getWiktionaryDefinition;
window.AddWord = AddWord;
+
diff --git a/src/utils/definitions.js b/src/utils/definitions.js
index c8832d8..d295160 100644
--- a/src/utils/definitions.js
+++ b/src/utils/definitions.js
@@ -2,7 +2,7 @@
// ▌ Fonctions pour récupérer/afficher les définitions
// ─────────────────────────────────────────────────────────────────────────────
-const lexiconMap = new Map();
+window.lexiconMap = new Map();
/**
* Récupère les définitions d'un mot dans les lexiques de l'utilisateur (ex. user_id=4),
--
GitLab