Skip to content
Snippets Groups Projects
Commit 23ae80be authored by Lucie Bader's avatar Lucie Bader
Browse files

Changement nom "whiteBox"

parent 3f615c4e
No related branches found
No related tags found
1 merge request!8Test final
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,
......
......@@ -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;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment