Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
ff2balex
Manage
Activity
Members
Labels
Plan
Issues
9
Issue boards
Milestones
Wiki
External wiki
Code
Merge requests
0
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Lex gaMe
ff2balex
Commits
23ae80be
Commit
23ae80be
authored
4 months ago
by
Lucie Bader
Browse files
Options
Downloads
Patches
Plain Diff
Changement nom "whiteBox"
parent
3f615c4e
No related branches found
No related tags found
1 merge request
!8
Test final
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/context_menu/custom_context_menu.js
+44
-44
44 additions, 44 deletions
src/context_menu/custom_context_menu.js
src/css/custom_context_menu.css
+8
-8
8 additions, 8 deletions
src/css/custom_context_menu.css
with
52 additions
and
52 deletions
src/context_menu/custom_context_menu.js
+
44
−
44
View file @
23ae80be
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
inject
WhiteBox
()
{
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
inject
CustomContextMenu
()
{
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
);
setup
WhiteBox
Actions
();
document
.
body
.
appendChild
(
customContextMenu
);
setup
CustomContextMenu
Actions
();
}
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
getOrCreate
WhiteBox
()
{
return
document
.
getElementById
(
WHITE_BOX_ID
)
||
injectWhiteBox
();
function
getOrCreate
CustomContextMenu
()
{
return
document
.
getElementById
(
CUSTOM_CONTEXT_MENU
)
||
injectCustomContextMenu
();
}
/**
* Configure les actions des boutons du menu contextuel.
*/
function
setup
WhiteBox
Actions
()
{
function
setup
CustomContextMenu
Actions
()
{
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
()
{
getOrCreate
WhiteBox
();
getOrCreate
CustomContextMenu
();
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
{
hide
WhiteBox
();
hide
CustomContextMenu
();
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
show
WhiteBox
(
event
,
selectedText
)
{
async
function
show
CustomContextMenu
(
event
,
selectedText
)
{
const
{
extensionActive
}
=
await
browser
.
storage
.
local
.
get
(
"
extensionActive
"
)
||
{
extensionActive
:
false
};
if
(
!
extensionActive
||
!
authToken
)
{
hide
WhiteBox
();
hide
CustomContextMenu
();
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
hide
WhiteBox
()
{
const
whiteBox
=
document
.
getElementById
(
WHITE_BOX_ID
);
if
(
whiteBox
)
{
whiteBox
.
style
.
display
=
"
none
"
;
function
hide
CustomContextMenu
()
{
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
);
getOrCreate
WhiteBox
();
show
WhiteBox
(
event
,
selectedText
);
getOrCreate
CustomContextMenu
();
show
CustomContextMenu
(
event
,
selectedText
);
browser
.
runtime
.
sendMessage
({
action
:
"
mot_selectionne
"
,
selectedText
,
});
}
else
{
hide
WhiteBox
();
hide
CustomContextMenu
();
}
});
...
...
@@ -218,7 +218,7 @@ browser.runtime.onMessage.addListener((message) => {
// Initialisation au démarrage
loadAuthToken
().
then
(()
=>
{
getOrCreate
WhiteBox
();
getOrCreate
CustomContextMenu
();
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
))
{
hide
WhiteBox
();
if
(
customContextMenu
&&
!
customContextMenu
.
contains
(
event
.
target
))
{
hide
CustomContextMenu
();
}
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
);
show
WhiteBox
(
event
,
selectedText
);
show
CustomContextMenu
(
event
,
selectedText
);
browser
.
runtime
.
sendMessage
({
action
:
"
mot_selectionne
"
,
selectedText
,
...
...
This diff is collapsed.
Click to expand it.
src/css/custom_context_menu.css
+
8
−
8
View file @
23ae80be
...
...
@@ -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
;
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment