From 13f09cb117b6fd36e13cebaf14c12a9dc9d946af Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:44:17 +0100
Subject: [PATCH 1/6] =?UTF-8?q?Architecture=20de=20la=20barre=20lat=C3=A9r?=
 =?UTF-8?q?ale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sidebar.html | 0
 sidebar.js   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 sidebar.html
 create mode 100644 sidebar.js

diff --git a/sidebar.html b/sidebar.html
new file mode 100644
index 0000000..e69de29
diff --git a/sidebar.js b/sidebar.js
new file mode 100644
index 0000000..e69de29
-- 
GitLab


From 4567e6514cca0e642b9d9afa849ec459f69d716a Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:46:57 +0100
Subject: [PATCH 2/6] =?UTF-8?q?D=C3=A9placement=20fichiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sidebar.html => "barre_lat\303\251rale/sidebar.html" | 0
 sidebar.js => "barre_lat\303\251rale/sidebar.js"     | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename sidebar.html => "barre_lat\303\251rale/sidebar.html" (100%)
 rename sidebar.js => "barre_lat\303\251rale/sidebar.js" (100%)

diff --git a/sidebar.html "b/barre_lat\303\251rale/sidebar.html"
similarity index 100%
rename from sidebar.html
rename to "barre_lat\303\251rale/sidebar.html"
diff --git a/sidebar.js "b/barre_lat\303\251rale/sidebar.js"
similarity index 100%
rename from sidebar.js
rename to "barre_lat\303\251rale/sidebar.js"
-- 
GitLab


From 4985c85260096db70d0aaeb1b3a7b39d993bfe2f Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:34:06 +0100
Subject: [PATCH 3/6] Architecture de base

---
 "barre_lat\303\251rale/content.js"   |  8 +++
 "barre_lat\303\251rale/sidebar.html" | 54 +++++++++++++++++
 "barre_lat\303\251rale/sidebar.js"   | 86 ++++++++++++++++++++++++++++
 manifest.json                        | 42 ++++++++++++++
 4 files changed, 190 insertions(+)
 create mode 100644 "barre_lat\303\251rale/content.js"
 create mode 100644 manifest.json

diff --git "a/barre_lat\303\251rale/content.js" "b/barre_lat\303\251rale/content.js"
new file mode 100644
index 0000000..78e6ed0
--- /dev/null
+++ "b/barre_lat\303\251rale/content.js"
@@ -0,0 +1,8 @@
+document.addEventListener('mouseup', () => {
+    const selection = window.getSelection().toString().trim();
+    if (selection) {
+      console.log("Mot sélectionné :", selection);
+      browser.runtime.sendMessage({ action: "mot_selectionne", mot: selection });
+    }
+  });
+  
\ No newline at end of file
diff --git "a/barre_lat\303\251rale/sidebar.html" "b/barre_lat\303\251rale/sidebar.html"
index e69de29..1a1084a 100644
--- "a/barre_lat\303\251rale/sidebar.html"
+++ "b/barre_lat\303\251rale/sidebar.html"
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BaLex - Barre Latérale</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 10px;
+      background-color: #323046;
+      color: white;
+    }
+    #menu, #etat {
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+    }
+    #menu {
+      background-color: #3e383c;
+    }
+    #etat {
+      background-color: #3e383c;
+    }
+    button {
+      width: 100%;
+      margin-bottom: 5px;
+      padding: 8px;
+      border: none;
+      background-color: #94608a;
+      color: white;
+      cursor: pointer;
+      text-align: center;
+    }
+    button:hover {
+      background-color: #b478a3;
+    }
+  </style>
+</head>
+<body>
+  <div id="menu">
+    <h3>Mes Lexiques</h3>
+    <div id="lexiques">Chargement...</div>
+  </div>
+  <div id="etat">
+    <h3>Mot sélectionné</h3>
+    <p id="motSelectionne">Aucun mot sélectionné</p>
+    <button id="chercherDef">Chercher la définition</button>
+  </div>
+  <script src="sidebar.js"></script>
+</body>
+<div id="definition" style="margin-top: 10px; background-color: #444; padding: 10px; border-radius: 5px;"></div>
+</html>
diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js"
index e69de29..5d77479 100644
--- "a/barre_lat\303\251rale/sidebar.js"
+++ "b/barre_lat\303\251rale/sidebar.js"
@@ -0,0 +1,86 @@
+// Affiche un message dans la console pour confirmer le chargement du script
+console.log("sidebar.js chargé avec succès !");
+
+// Écoute les messages venant du script de contenu pour afficher la sélection dans la barre latérale
+browser.runtime.onMessage.addListener((message) => {
+  if (message.action === "mot_selectionne") {
+    document.getElementById('motSelectionne').textContent = message.mot;
+    console.log("Mot reçu dans la barre latérale :", message.mot);
+  }
+});
+
+// Fonction pour rechercher la définition d'un mot sur le Wiktionnaire
+async function chercherDefinition(mot) {
+  const url = `https://fr.wiktionary.org/api/rest_v1/page/summary/${encodeURIComponent(mot)}`;
+  console.log("URL de la requête :", url);
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Erreur HTTP : ${response.status}`);
+    }
+
+    const data = await response.json();
+    const definitionDiv = document.getElementById('definition');
+
+    if (data.extract) {
+      definitionDiv.innerHTML = `<strong>Définition de ${mot} :</strong><p>${data.extract}</p>`;
+    } else {
+      definitionDiv.innerHTML = `<p>Aucune définition trouvée pour : ${mot}</p>`;
+    }
+  } catch (error) {
+    console.error("Erreur lors de la récupération de la définition :", error);
+    document.getElementById('definition').innerHTML = "<p>Erreur lors de la recherche de la définition.</p>";
+  }
+}
+
+// Déclenche la recherche de définition au clic du bouton
+document.getElementById('chercherDef').addEventListener('click', () => {
+  const mot = document.getElementById('motSelectionne').textContent;
+  if (mot && mot !== "Aucun mot sélectionné") {
+    chercherDefinition(mot);
+  } else {
+    alert("Veuillez sélectionner un mot avant de rechercher sa définition.");
+  }
+});
+
+// Simulation du chargement des lexiques de l'utilisateur avec des cases à cocher alignées à droite
+async function chargerLexiques() {
+  const lexiques = ["Lexique 1", "Lexique 2", "Lexique 3"];
+  const container = document.getElementById('lexiques');
+  container.innerHTML = '';
+
+  lexiques.forEach(lexique => {
+    const div = document.createElement('div');
+    div.style.display = 'flex';
+    div.style.alignItems = 'center';
+    div.style.justifyContent = 'space-between';
+    div.style.marginBottom = '5px';
+
+    const label = document.createElement('label');
+    label.htmlFor = `chk_${lexique}`;
+    label.textContent = lexique;
+    label.style.cursor = 'pointer';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.id = `chk_${lexique}`;
+
+    checkbox.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        // Charger les mots liés au lexique sélectionné ici
+        console.log(`Lexique sélectionné : ${lexique}`);
+      } else {
+        // Masquer les mots liés au lexique sélectionné ici
+        console.log(`Lexique désélectionné : ${lexique}`);
+      }
+    });
+
+    div.appendChild(label);
+    div.appendChild(checkbox);
+    container.appendChild(div);
+  });
+}
+
+// Chargement des lexiques au démarrage de la barre latérale
+chargerLexiques();
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..7be7bf3
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,42 @@
+{
+  "manifest_version": 2,
+  "name": "ff2BaLex",
+  "version": "1.0",
+  "description": "Extension Firefox avec barre latérale.",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "https://fr.wiktionary.org/*"
+  ],
+  "background": {
+    "scripts": ["menu_extension/background.js"],
+    "persistent": true
+  },
+  "browser_action": {
+    "default_popup": "menu_extension/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    },
+    "default_title": "ff2BaLex"
+  },
+  "options_ui": {
+    "page": "menu_extension/options.html",
+    "open_in_tab": false
+  },
+  "sidebar_action": {
+    "default_title": "BaLex",
+    "default_panel": "barre_latérale/sidebar.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png"
+    }
+  },
+  "content_scripts": [
+  {
+    "matches": ["<all_urls>"],
+    "js": ["barre_latérale/content.js"]
+  }
+  ]
+}
-- 
GitLab


From 03bcd5e08505a4477c1a68313ff4b40a57c19de9 Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:35:04 +0100
Subject: [PATCH 4/6] =?UTF-8?q?R=C3=A9organisation=20fichiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 menu_extension/manifest.json | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 menu_extension/manifest.json

diff --git a/menu_extension/manifest.json b/menu_extension/manifest.json
deleted file mode 100644
index 1f8ec33..0000000
--- a/menu_extension/manifest.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "ff2BaLex",
-  "version": "1.0",
-  "description": "Extension Firefox avec paramètres personnalisés.",
-  "permissions": ["storage", "activeTab"],
-  "background": {
-    "scripts": ["background.js"],
-    "persistent": true
-  },
-  "options_ui": {
-    "page": "options.html",
-    "open_in_tab": false
-  },
-  "browser_action": {
-    "default_popup": "popup.html",
-    "default_icon": {
-      "16": "icon-16.png",
-      "48": "icon-48.png",
-      "128": "icon-128.png"
-    },
-    "default_title": "ff2BaLex"
-  }
-}
-- 
GitLab


From d14f255f8e901e677190703cdc0303e055a626ec Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 18:27:00 +0100
Subject: [PATCH 5/6] =?UTF-8?q?Maquette=20lexiques=20et=20mot=20s=C3=A9lec?=
 =?UTF-8?q?tionn=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "barre_lat\303\251rale/content.js"   |  13 +++-
 "barre_lat\303\251rale/sidebar.html" | 108 +++++++++++++++++++++++----
 "barre_lat\303\251rale/sidebar.js"   |  50 ++++++-------
 3 files changed, 129 insertions(+), 42 deletions(-)

diff --git "a/barre_lat\303\251rale/content.js" "b/barre_lat\303\251rale/content.js"
index 78e6ed0..da428ce 100644
--- "a/barre_lat\303\251rale/content.js"
+++ "b/barre_lat\303\251rale/content.js"
@@ -1,8 +1,19 @@
+// Écouteur d'événement qui se déclenche lorsqu'un utilisateur relâche le bouton de la souris
 document.addEventListener('mouseup', () => {
+  
+    // Récupère le texte sélectionné par l'utilisateur et supprime les espaces inutiles
     const selection = window.getSelection().toString().trim();
+  
+    // Vérifie si une sélection de texte a bien été effectuée
     if (selection) {
+      // Affiche dans la console le mot ou texte sélectionné pour le débogage
       console.log("Mot sélectionné :", selection);
-      browser.runtime.sendMessage({ action: "mot_selectionne", mot: selection });
+  
+      // Envoie un message au script de la barre latérale pour lui transmettre le mot sélectionné
+      browser.runtime.sendMessage({ 
+        action: "mot_selectionne", // Action identifiant le type de message
+        mot: selection              // Le texte sélectionné
+      });
     }
   });
   
\ No newline at end of file
diff --git "a/barre_lat\303\251rale/sidebar.html" "b/barre_lat\303\251rale/sidebar.html"
index 1a1084a..5c3949b 100644
--- "a/barre_lat\303\251rale/sidebar.html"
+++ "b/barre_lat\303\251rale/sidebar.html"
@@ -5,50 +5,126 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BaLex - Barre Latérale</title>
   <style>
+    /* Style global */
     body {
-      font-family: Arial, sans-serif;
+      font-family: Helvetica, sans-serif;
+      font-size: medium;
       margin: 0;
       padding: 10px;
-      background-color: #323046;
-      color: white;
+      background-color: #525877;
+      color: #323046;
     }
+
+    /* Conteneurs */
     #menu, #etat {
       padding: 10px;
       margin-bottom: 10px;
       border-radius: 5px;
+      background-color: #a08e9f;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     }
-    #menu {
-      background-color: #3e383c;
-    }
-    #etat {
-      background-color: #3e383c;
+
+    /* Titre */
+    h3 {
+      color: #fff;
+      text-align: center;
+      font-weight: bold;
     }
+
+    /* Boutons */
     button {
       width: 100%;
-      margin-bottom: 5px;
-      padding: 8px;
+      margin-top: 5px;
+      padding: 10px;
       border: none;
-      background-color: #94608a;
-      color: white;
+      background-color: #8d5c70;
+      color: #fbfcfc;
+      font-weight: bold;
       cursor: pointer;
       text-align: center;
+      border-radius: 5px;
     }
+
     button:hover {
-      background-color: #b478a3;
+      background-color: #dddedd;
+      color: #8d5c70;
+    }
+
+    /* Mot sélectionné */
+    #motSelectionne {
+      font-style: italic;
+      text-align: center;
+      margin-top: 5px;
+    }
+
+    /* Style des lexiques */
+    .lexique-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px;
+      margin-bottom: 5px;
+      border-radius: 5px;
+      background-color: #dcdde1;
+      width: 100%;
+    }
+
+    .lexique-item:hover {
+      background-color: #c4c7ce;
+    }
+
+    .lexique-label {
+      font-weight: bold;
+      color: #323046;
+      flex-grow: 1;
+      text-align: center;
+    }
+
+    .lexique-checkbox {
+      transform: scale(1.2);
+      cursor: pointer;
+      flex-shrink: 0;
+      margin-left: 10px;
+    }
+
+    /* Espace pour les pictogrammes */
+    .lexique-icon {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #ccc;
+        margin-right: 10px;
+        flex-shrink: 0;
+        }
+
+    /* Définition */
+    #definition {
+      margin-top: 10px;
+      background-color: #444;
+      padding: 10px;
+      border-radius: 5px;
+      color: white;
     }
   </style>
 </head>
 <body>
+
+  <!-- Menu des lexiques -->
   <div id="menu">
-    <h3>Mes Lexiques</h3>
+    <h3>Lexiques</h3>
     <div id="lexiques">Chargement...</div>
   </div>
+
+  <!-- État de la sélection -->
   <div id="etat">
     <h3>Mot sélectionné</h3>
     <p id="motSelectionne">Aucun mot sélectionné</p>
-    <button id="chercherDef">Chercher la définition</button>
+    <button id="chercherDef">Chercher la/les définition(s)</button>
   </div>
+
+  <!-- Définition affichée -->
+  <div id="definition"></div>
   <script src="sidebar.js"></script>
+
 </body>
-<div id="definition" style="margin-top: 10px; background-color: #444; padding: 10px; border-radius: 5px;"></div>
 </html>
diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js"
index 5d77479..dbb8788 100644
--- "a/barre_lat\303\251rale/sidebar.js"
+++ "b/barre_lat\303\251rale/sidebar.js"
@@ -1,25 +1,28 @@
-// Affiche un message dans la console pour confirmer le chargement du script
+// Confirme le chargement du script dans la console
 console.log("sidebar.js chargé avec succès !");
 
-// Écoute les messages venant du script de contenu pour afficher la sélection dans la barre latérale
+// Écoute les messages envoyés par le script de contenu pour afficher le mot sélectionné dans la barre latérale
 browser.runtime.onMessage.addListener((message) => {
   if (message.action === "mot_selectionne") {
+    // Met à jour l'affichage du mot sélectionné
     document.getElementById('motSelectionne').textContent = message.mot;
     console.log("Mot reçu dans la barre latérale :", message.mot);
   }
 });
 
-// Fonction pour rechercher la définition d'un mot sur le Wiktionnaire
+// Recherche la définition d'un mot sur le Wiktionnaire
 async function chercherDefinition(mot) {
   const url = `https://fr.wiktionary.org/api/rest_v1/page/summary/${encodeURIComponent(mot)}`;
   console.log("URL de la requête :", url);
 
   try {
+    // Effectue la requête API vers le Wiktionnaire
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(`Erreur HTTP : ${response.status}`);
     }
 
+    // Récupère et affiche la définition si elle existe
     const data = await response.json();
     const definitionDiv = document.getElementById('definition');
 
@@ -34,7 +37,7 @@ async function chercherDefinition(mot) {
   }
 }
 
-// Déclenche la recherche de définition au clic du bouton
+// Lance la recherche de la définition lorsque le bouton est cliqué
 document.getElementById('chercherDef').addEventListener('click', () => {
   const mot = document.getElementById('motSelectionne').textContent;
   if (mot && mot !== "Aucun mot sélectionné") {
@@ -44,7 +47,7 @@ document.getElementById('chercherDef').addEventListener('click', () => {
   }
 });
 
-// Simulation du chargement des lexiques de l'utilisateur avec des cases à cocher alignées à droite
+// Charge dynamiquement les lexiques de l'utilisateur avec des cases à cocher
 async function chargerLexiques() {
   const lexiques = ["Lexique 1", "Lexique 2", "Lexique 3"];
   const container = document.getElementById('lexiques');
@@ -52,35 +55,32 @@ async function chargerLexiques() {
 
   lexiques.forEach(lexique => {
     const div = document.createElement('div');
-    div.style.display = 'flex';
-    div.style.alignItems = 'center';
-    div.style.justifyContent = 'space-between';
-    div.style.marginBottom = '5px';
-
+    div.className = 'lexique-item';
+  
+    // Pictogramme
+    const icon = document.createElement('div');
+    icon.className = 'lexique-icon';
+    icon.id = `icon_${lexique.replace(/\s/g, '_')}`;
+  
+    // Nom du lexique
     const label = document.createElement('label');
     label.htmlFor = `chk_${lexique}`;
+    label.className = 'lexique-label';
     label.textContent = lexique;
-    label.style.cursor = 'pointer';
-
+  
+    // Case à cocher
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.id = `chk_${lexique}`;
-
-    checkbox.addEventListener('change', (e) => {
-      if (e.target.checked) {
-        // Charger les mots liés au lexique sélectionné ici
-        console.log(`Lexique sélectionné : ${lexique}`);
-      } else {
-        // Masquer les mots liés au lexique sélectionné ici
-        console.log(`Lexique désélectionné : ${lexique}`);
-      }
-    });
-
+    checkbox.className = 'lexique-checkbox';
+  
+    // Ordre : Pictogramme → Nom → Case à cocher
+    div.appendChild(icon);
     div.appendChild(label);
     div.appendChild(checkbox);
     container.appendChild(div);
-  });
+  });  
 }
 
-// Chargement des lexiques au démarrage de la barre latérale
+// Chargement des lexiques dès l'ouverture de la barre latérale
 chargerLexiques();
-- 
GitLab


From e0228970ef303fa382cc8a976e3433a11bf639ad Mon Sep 17 00:00:00 2001
From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:01:29 +0100
Subject: [PATCH 6/6] Modif chemin

---
 manifest.json => menu_extension/manifest.json | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename manifest.json => menu_extension/manifest.json (100%)

diff --git a/manifest.json b/menu_extension/manifest.json
similarity index 100%
rename from manifest.json
rename to menu_extension/manifest.json
-- 
GitLab