From 8944fe28e55ce830ca8158ada1a4254f8e8e300c Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Wed, 19 Feb 2025 13:38:08 +0100
Subject: [PATCH] Couleurs surlignage selon couleurs lexiques
---
src/assets/lexicon_icon.js | 15 +++++++++++-
src/background/background.js | 6 ++++-
src/sidebar/sidebar.html | 5 ++--
src/sidebar/sidebar.js | 46 +++++++++++++++++++-----------------
src/utils/highlighting.js | 25 +++++++++++++++++---
5 files changed, 67 insertions(+), 30 deletions(-)
diff --git a/src/assets/lexicon_icon.js b/src/assets/lexicon_icon.js
index 69833f8..ab5eb63 100644
--- a/src/assets/lexicon_icon.js
+++ b/src/assets/lexicon_icon.js
@@ -147,6 +147,19 @@ async function getColorForLexicon(lexiconId) {
const { lexiconColors } = await browser.storage.local.get("lexiconColors");
return (lexiconColors && lexiconColors[String(lexiconId)]) || "#cccccc";
}
+/**
+ * Convertit une couleur hexadécimale en une couleur RGBA.
+ * @param {string} hex - La couleur en hexadécimal.
+ * @param {number} opacity - La transparence (0-1).
+ * @returns {string} La couleur RGBA.
+ */
+function hexToRgba(hex, opacity) {
+ const bigint = parseInt(hex.replace('#', ''), 16);
+ const r = (bigint >> 16) & 255;
+ const g = (bigint >> 8) & 255;
+ const b = bigint & 255;
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
window.updateLexiconColors = updateLexiconColors;
window.getColorForLexicon = getColorForLexicon;
@@ -155,4 +168,4 @@ window.convertColor = convertColor;
window.getOrCreateLexiconColor = getOrCreateLexiconColor;
window.createColorCircle = createColorCircle;
window.getLexiconsColors = getLexiconsColors;
-
+window.hexToRgba = hexToRgba;
diff --git a/src/background/background.js b/src/background/background.js
index ddfb4d0..dd5ac3d 100644
--- a/src/background/background.js
+++ b/src/background/background.js
@@ -68,7 +68,11 @@ async function isUserConnected() {
async function refreshAllUI() {
log("🔄 Rafraîchissement global de l'UI...");
- browser.runtime.sendMessage({ action: "refreshUI" });
+ try {
+ await browser.runtime.sendMessage({ action: "refreshUI" });
+ } catch (error) {
+ console.warn("Aucun récepteur pour 'refreshUI' :", error);
+ }
}
// ─────────────────────────────────────────────────────────────────────────────
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 96de998..6c77670 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -296,13 +296,12 @@
}
.lexicon-highlight {
- background-color: rgba(255, 255, 0, 0.3);
+ background-color: var(--highlight-color, rgba(255, 255, 0, 0.3));
border-bottom: 1px dashed #666;
transition: background-color 0.3s;
}
-
.lexicon-highlight:hover {
- background-color: rgba(255, 255, 0, 0.5);
+ background-color: var(--highlight-color-hover, rgba(255, 255, 0, 0.5));
}
.lexicon-section {
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index c51f264..a6d9a6a 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -503,28 +503,11 @@ async function handleAddWordClick() {
browser.runtime.onMessage.addListener(async (message) => {
log("📩 Message reçu dans sidebar.js :", message);
- if (message.action === "refreshUI") {
- log("🔄 Demande de rafraîchissement de la barre latérale.");
- await refreshSidebarState();
- return;
- }
-
- if (message.command) {
- switch (message.command) {
- case "activate-highlighting":
- const highlightButton = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
- if (highlightButton) {
- highlightButton.dataset.active = "true";
- highlightButton.classList.add("active");
- }
- break;
-
- case "deactivate-highlighting":
- const highlightButtonOff = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
- if (highlightButtonOff) {
- highlightButtonOff.dataset.active = "false";
- highlightButtonOff.classList.remove("active");
- }
+ if (message.action)
+ switch (message.action) {
+ case "refreshUI":
+ log("🔄 Demande de rafraîchissement de la barre latérale.");
+ await refreshSidebarState();
break;
case "mot_selectionne":
@@ -607,6 +590,25 @@ browser.runtime.onMessage.addListener(async (message) => {
closeBlock("etatContent");
closeBlock("definitionContent")
break;
+ }
+
+ if (message.command) {
+ switch (message.command) {
+ case "activate-highlighting":
+ const highlightButton = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
+ if (highlightButton) {
+ highlightButton.dataset.active = "true";
+ highlightButton.classList.add("active");
+ }
+ break;
+
+ case "deactivate-highlighting":
+ const highlightButtonOff = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
+ if (highlightButtonOff) {
+ highlightButtonOff.dataset.active = "false";
+ highlightButtonOff.classList.remove("active");
+ }
+ break;
case "register-stats-script":
break;
diff --git a/src/utils/highlighting.js b/src/utils/highlighting.js
index e65a253..ac318cd 100644
--- a/src/utils/highlighting.js
+++ b/src/utils/highlighting.js
@@ -388,10 +388,29 @@ browser.runtime.onMessage.addListener((message) => {
const span = document.createElement("span");
span.textContent = match[0];
span.className = "lexicon-highlight";
- span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
- span.style.borderBottom = "1px dashed #666";
- fragments.push(span);
+ let currentLexiconId = null;
+ for (const [id, words] of lexiconWordsCache.entries()) {
+ if (activeLexiconIds.has(Number(id)) && words.has(match[0])) {
+ currentLexiconId = id;
+ break;
+ }
+ }
+
+ if (currentLexiconId) {
+ getColorForLexicon(currentLexiconId).then(hexColor => {
+ const rgbaColor = hexToRgba(hexColor, 0.3);
+ const rgbaHoverColor = hexToRgba(hexColor, 0.5);
+ span.style.setProperty('--highlight-color', rgbaColor);
+ span.style.setProperty('--highlight-color-hover', rgbaHoverColor);
+ span.style.backgroundColor = rgbaColor;
+ });
+ } else {
+ // Optionnel : couleur par défaut
+ span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
+ }
+
+ fragments.push(span);
lastIndex = regex.lastIndex;
}
--
GitLab