diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js index 0c74f175906ad8750c62d8d3d8bcfb04c1343a10..d7feb11c1b7f548a88ace1d3ccd69b9a9045dc3c 100644 --- a/src/context_menu/custom_context_menu.js +++ b/src/context_menu/custom_context_menu.js @@ -1,7 +1,7 @@ log("custom_context_menu.js chargé correctement"); // === Variables globales === -const WHITE_BOX_ID = "whiteBox"; +const CUSTOM_CONTEXT_MENU = "customContextMenu"; // Fonction utilitaire pour envoyer une notification via le background function sendNotification(title, message, iconPath) { @@ -26,25 +26,25 @@ async function loadAuthToken() { } /** - * Crée le menu contextuel personnalisé (whiteBox) s'il n'existe pas déjà . + * Crée le menu contextuel personnalisé (customContextMenu) s'il n'existe pas déjà . */ -function injectWhiteBox() { - let whiteBox = document.getElementById(WHITE_BOX_ID); - if (!whiteBox) { - whiteBox = document.createElement("div"); - whiteBox.id = WHITE_BOX_ID; - whiteBox.style.position = "absolute"; - whiteBox.style.zIndex = "9999"; - whiteBox.style.backgroundColor = "#fff"; - whiteBox.style.border = "1px solid #ccc"; - whiteBox.style.padding = "5px"; - whiteBox.style.borderRadius = "4px"; - whiteBox.style.boxShadow = "0px 2px 10px rgba(0,0,0,0.2)"; +function injectCustomContextMenu() { + let customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); + if (!customContextMenu) { + customContextMenu = document.createElement("div"); + customContextMenu.id = CUSTOM_CONTEXT_MENU; + customContextMenu.style.position = "absolute"; + customContextMenu.style.zIndex = "9999"; + customContextMenu.style.backgroundColor = "#fff"; + customContextMenu.style.border = "1px solid #ccc"; + customContextMenu.style.padding = "5px"; + customContextMenu.style.borderRadius = "4px"; + customContextMenu.style.boxShadow = "0px 2px 10px rgba(0,0,0,0.2)"; const addLexiconPath = browser.runtime.getURL("src/assets/icons/ajout_lexique.png"); const getDefinitionPath = browser.runtime.getURL("src/assets/icons/definition.png"); const loginPath = browser.runtime.getURL("src/assets/icons/connexion.png"); // Construction du HTML du menu contextuel - whiteBox.innerHTML = ` + customContextMenu.innerHTML = ` <p id="selectedWord" style="margin: 0; padding: 0;">Mot sélectionné : Aucun</p> <hr style="border: 0; height: 1px; background-color: #323046; margin: 8px 0;"> <div style="display: flex; flex-wrap: wrap; justify-content: center;"> @@ -62,26 +62,26 @@ function injectWhiteBox() { </div> </div> `; - document.body.appendChild(whiteBox); - setupWhiteBoxActions(); + document.body.appendChild(customContextMenu); + setupCustomContextMenuActions(); } - whiteBox.addEventListener("mouseup", (e) => { + customContextMenu.addEventListener("mouseup", (e) => { e.stopPropagation(); }); - return whiteBox; + return customContextMenu; } /** - * Renvoie le whiteBox s'il existe, ou le crée. + * Renvoie le customContextMenu s'il existe, ou le crée. */ -function getOrCreateWhiteBox() { - return document.getElementById(WHITE_BOX_ID) || injectWhiteBox(); +function getOrCreateCustomContextMenu() { + return document.getElementById(CUSTOM_CONTEXT_MENU) || injectCustomContextMenu(); } /** * Configure les actions des boutons du menu contextuel. */ -function setupWhiteBoxActions() { +function setupCustomContextMenuActions() { const addLexiconBtn = document.getElementById("addLexiconButton"); const getDefinitionBtn = document.getElementById("getDefinitionButton"); const loginBtn = document.getElementById("loginButton"); @@ -126,7 +126,7 @@ function setupWhiteBoxActions() { * Met à jour la visibilité des boutons du menu selon l'authentification. */ function updateMenuVisibility() { - getOrCreateWhiteBox(); + getOrCreateCustomContextMenu(); const addLexiconBtn = document.getElementById("addLexiconButton"); const getDefinitionBtn = document.getElementById("getDefinitionButton"); const loginBtn = document.getElementById("loginButton"); @@ -141,7 +141,7 @@ function updateMenuVisibility() { getDefinitionBtn.style.display = "inline-block"; loginBtn.style.display = "none"; } else { - hideWhiteBox(); + hideCustomContextMenu(); addLexiconBtn.style.display = "none"; getDefinitionBtn.style.display = "inline-block"; loginBtn.style.display = "inline-block"; @@ -159,13 +159,13 @@ function getSelectedWord() { /** * Affiche le menu contextuel à la position du clic. */ -async function showWhiteBox(event, selectedText) { +async function showCustomContextMenu(event, selectedText) { const { extensionActive } = await browser.storage.local.get("extensionActive") || { extensionActive: false }; if (!extensionActive || !authToken) { - hideWhiteBox(); + hideCustomContextMenu(); return; } - const whiteBox = getOrCreateWhiteBox(); + const customContextMenu = getOrCreateCustomContextMenu(); const selectedWordElement = document.getElementById("selectedWord"); selectedWordElement.textContent = selectedText; @@ -176,35 +176,35 @@ async function showWhiteBox(event, selectedText) { const top = rect.bottom + window.scrollY; const left = rect.right + window.scrollX; - whiteBox.style.left = left + "px"; - whiteBox.style.top = top + "px"; - whiteBox.style.display = "block"; + customContextMenu.style.left = left + "px"; + customContextMenu.style.top = top + "px"; + customContextMenu.style.display = "block"; log("Affichage du menu contextuel avec le mot :", selectedText); updateMenuVisibility(); } -function hideWhiteBox() { - const whiteBox = document.getElementById(WHITE_BOX_ID); - if (whiteBox) { - whiteBox.style.display = "none"; +function hideCustomContextMenu() { + const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); + if (customContextMenu) { + customContextMenu.style.display = "none"; } } // Écoute globale pour la sélection de texte document.addEventListener("mouseup", (event) => { - if (event.target.closest("#whiteBox")) return; + if (event.target.closest("#customContextMenu")) return; const selectedText = window.getSelection().toString().trim(); if (selectedText) { log("Texte sélectionné :", selectedText); - getOrCreateWhiteBox(); - showWhiteBox(event, selectedText); + getOrCreateCustomContextMenu(); + showCustomContextMenu(event, selectedText); browser.runtime.sendMessage({ action: "mot_selectionne", selectedText, }); } else { - hideWhiteBox(); + hideCustomContextMenu(); } }); @@ -218,7 +218,7 @@ browser.runtime.onMessage.addListener((message) => { // Initialisation au démarrage loadAuthToken().then(() => { - getOrCreateWhiteBox(); + getOrCreateCustomContextMenu(); updateMenuVisibility(); }); browser.storage.onChanged.addListener((changes) => { @@ -370,11 +370,11 @@ function hideLexiconPicker() { } document.addEventListener("mouseup", (event) => { - const whiteBox = document.getElementById(WHITE_BOX_ID); + const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); const picker = document.getElementById("lexiconPicker"); - if (whiteBox && !whiteBox.contains(event.target)) { - hideWhiteBox(); + if (customContextMenu && !customContextMenu.contains(event.target)) { + hideCustomContextMenu(); } if (picker && !picker.contains(event.target)) { hideLexiconPicker(); @@ -383,7 +383,7 @@ document.addEventListener("mouseup", (event) => { const selectedText = window.getSelection().toString().trim(); if (selectedText) { log("Texte sélectionné :", selectedText); - showWhiteBox(event, selectedText); + showCustomContextMenu(event, selectedText); browser.runtime.sendMessage({ action: "mot_selectionne", selectedText, diff --git a/src/css/custom_context_menu.css b/src/css/custom_context_menu.css index 11bbfab77be8d6353d00d716da320a16f27b4f09..66c89329490d1300b780f57fdec0fb096ddd99d9 100644 --- a/src/css/custom_context_menu.css +++ b/src/css/custom_context_menu.css @@ -8,7 +8,7 @@ } /* Conteneur principal du menu contextuel */ -#whiteBox { +#customContextMenu { position: absolute; display: none; min-width: 50px; @@ -24,7 +24,7 @@ } /* Mot sélectionné */ -#whiteBox #selectedWord { +#customContextMenu #selectedWord { margin: 0; margin-bottom: 8px; font-size: 14px; @@ -35,7 +35,7 @@ } /* Icônes */ -#whiteBox .icon-container { +#customContextMenu .icon-container { position: relative; display: flex; flex-direction: column; @@ -45,23 +45,23 @@ margin: 0; padding: 0; } -#whiteBox .icon-container:hover { +#customContextMenu .icon-container:hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; } -#whiteBox .icon { +#customContextMenu .icon { width: 40px; height: 40px; transition: transform 0.2s ease; margin : 0 auto; display: block; } -#whiteBox .icon:hover { +#customContextMenu .icon:hover { transform: scale(1.15); } /* Messages d'information (tooltips) */ -#whiteBox .tooltip { +#customContextMenu .tooltip { visibility: hidden; background-color: #333; color: #fff; @@ -78,7 +78,7 @@ transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 1000; } -#whiteBox .icon-container:hover .tooltip { +#customContextMenu .icon-container:hover .tooltip { visibility: visible; opacity: 1; }