diff --git a/src/context_menu/custom_context_menu.css b/src/context_menu/custom_context_menu.css deleted file mode 100644 index 82c76a1ee36414570a46da8912c421ecb9214409..0000000000000000000000000000000000000000 --- a/src/context_menu/custom_context_menu.css +++ /dev/null @@ -1,166 +0,0 @@ - -@font-face { - font-family: 'Luciole'; - src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'), - url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -/* === Conteneur principal du menu contextuel === */ -#whiteBox { - position: absolute; - display: none; - min-width: 50px; - max-width: 300px; - background-color: white; - color: #323046; - border: 2px solid #323046; - border-radius: 10px; - padding: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.2); - font-family: Luciole; - z-index: 10000; -} - -/* === Titre/texte indiquant le mot sélectionné === */ -#whiteBox #selectedWord { - margin: 0; - margin-bottom: 8px; - font-size: 14px; - line-height: 1.3; - color: #323046; - font-weight: bold; - text-align: center; -} - -/* === Conteneur des icônes === */ -#whiteBox .icon-container { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - margin: 0; - padding: 0; -} - -#whiteBox .icon-container:hover { - background-color: rgba(255, 255, 255, 0.1); - border-radius: 6px; -} - -/* === Les icônes elles-mêmes === */ -#whiteBox .icon { - width: 40px; - height: 40px; - transition: transform 0.2s ease; - margin : 0 auto; - display: block; -} - -#whiteBox .icon:hover { - transform: scale(1.15); -} - -/* === Message (tooltips) === */ -#whiteBox .tooltip { - visibility: hidden; - background-color: #333; - color: #fff; - text-align: center; - padding: 6px; - border-radius: 5px; - position: absolute; - bottom: -34px; - left: 50%; - transform: translateX(-50%); - white-space: nowrap; - font-size: 12px; - opacity: 0; - transition: opacity 0.2s ease, visibility 0.2s ease; - z-index: 1000; -} - -#whiteBox .icon-container:hover .tooltip { - visibility: visible; - opacity: 1; -} - -/* === Style global du lexiconPicker === */ -#lexiconPicker { - position: absolute; - z-index: 10000; - background-color: rgba(255, 255, 255, 0.98); - border: 1px solid #ddd; - padding: 4px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: auto; - font-family: Luciole; - font-size: 10px; - display: flex; - flex-direction: row !important; - flex-wrap: wrap !important; - align-items: center; - justify-content: center; - gap: 2px; -} - -/* Style pour les icônes de lexique */ -#lexiconPicker .lexicon-option { - cursor: pointer; - display: inline-flex !important; - flex-direction: row !important; - align-items: center; - justify-content: center; - border: 2px solid transparent; - border-radius: 50%; - width: 40px; - height: 40px; - transition: border 0.2s ease; - flex: 0 0 auto; -} - -/* Effet au survol pour les icônes */ -#lexiconPicker .lexicon-option:hover { - border: 2px solid #6e76c7; -} - -/* Classe pour indiquer qu'une icône est sélectionnée */ -#lexiconPicker .lexicon-option.selected { - border: 2px solid #323046; -} - -/* Style pour le cercle de couleur (icône interne) */ -#lexiconPicker .color-circle { - width: 28px; - height: 28px; - border-radius: 50%; - display: inline-block; - border: 1px solid black; -} - -/* Style pour le bouton de confirmation */ -#lexiconPicker button.confirmButton { - font-style: italic; - font-size: 10px; - padding: 6px 10px; - cursor: pointer; - border: none; - align-items: center; - text-align: center; - border-radius: 4px; - background-color: #323046; - color: white; - flex-basis: 100%; - margin-top: 8px; -} - -#lexiconPicker p { - font-size: 12px; - font-weight: bold; - text-align: center; -} - diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js index 85cad9f0cf8c1fe8d1377e45f981ee8ce9489961..50d28753ba96da1c7e8cb2cf584991c4dad10a2d 100644 --- a/src/context_menu/custom_context_menu.js +++ b/src/context_menu/custom_context_menu.js @@ -384,11 +384,23 @@ function hideLexiconPicker() { // ───────────────────────────────────────────────────────────────────────────── // ▌ Écouteurs d'événements // ───────────────────────────────────────────────────────────────────────────── -// Écoute globale pour la sélection de texte +// Écouteur global pour la sélection de texte et la gestion des clics document.addEventListener("mouseup", (event) => { + const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); // Récupère le menu contextuel + const picker = document.getElementById("lexiconPicker"); // Récupère le sélecteur de lexique + // Vérifie si le clic est à l'intérieur du menu contextuel, si oui, ne fait rien if (event.target.closest("#customContextMenu")) return; + // Masque le menu contextuel si le clic est en dehors de celui-ci + if (customContextMenu && !customContextMenu.contains(event.target)) { + hideCustomContextMenu(); + } + // Masque le sélecteur si le clic est en dehors de celui-ci + if (picker && !picker.contains(event.target)) { + hideLexiconPicker(); + } + // Récupère le texte sélectionné const selectedText = window.getSelection().toString().trim(); if (selectedText) { @@ -426,31 +438,4 @@ browser.storage.onChanged.addListener((changes) => { log("Token modifié dans le stockage, mise à jour du menu contextuel."); loadAuthToken().then(updateMenuVisibility); // Recharge le token et met à jour la visibilité } -}); - -// Écouteur pour masquer le menu contextuel et le sélecteur -document.addEventListener("mouseup", (event) => { - const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); // Récupère le menu contextuel - const picker = document.getElementById("lexiconPicker"); // Récupère le sélecteur de lexique - - // Masque le menu contextuel si le clic est en dehors de celui-ci - if (customContextMenu && !customContextMenu.contains(event.target)) { - hideCustomContextMenu(); - } - // Masque le sélecteur si le clic est en dehors de celui-ci - if (picker && !picker.contains(event.target)) { - hideLexiconPicker(); - } - - // Récupère le texte sélectionné - const selectedText = window.getSelection().toString().trim(); - if (selectedText) { - log("Texte sélectionné :", selectedText); - showCustomContextMenu(event, selectedText); - // Envoie un message au runtime avec le texte sélectionné - browser.runtime.sendMessage({ - action: "mot_selectionne", - selectedText, - }); - } }); \ No newline at end of file