Merge branch 'barre_latérale' into 'main'

Barre latérale See merge request !2

Merge branch 'barre_latérale' into 'main'
Barre latérale See merge request !2
27cfd779 · Lucie Bader · 1bd79c3d · a00b98ad · 27cfd779 · 27cfd779
Commit 27cfd779 authored 5 months ago by Lucie Bader
--- a/barre_latérale/content.js
+++ b/barre_latérale/content.js
+// É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);
+  
+      // 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
--- a/barre_latérale/sidebar.html
+++ b/barre_latérale/sidebar.html
+<!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>
+    /* Style global */
+    body {
+      font-family: Helvetica, sans-serif;
+      font-size: medium;
+      margin: 0;
+      padding: 10px;
+      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);
+    }
+
+    /* Titre */
+    h3 {
+      color: #fff;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    /* Boutons */
+    button {
+      width: 100%;
+      margin-top: 5px;
+      padding: 10px;
+      border: none;
+      background-color: #8d5c70;
+      color: #fbfcfc;
+      font-weight: bold;
+      cursor: pointer;
+      text-align: center;
+      border-radius: 5px;
+    }
+
+    button:hover {
+      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>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/les définition(s)</button>
+  </div>
+
+  <!-- Définition affichée -->
+  <div id="definition"></div>
+  <script src="sidebar.js"></script>
+
+</body>
+</html>
--- a/barre_latérale/sidebar.js
+++ b/barre_latérale/sidebar.js
+// Confirme le chargement du script dans la console
+console.log("sidebar.js chargé avec succès !");
+
+// É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);
+  }
+});
+
+// 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');
+
+    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>";
+  }
+}
+
+// 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é") {
+    chercherDefinition(mot);
+  } else {
+    alert("Veuillez sélectionner un mot avant de rechercher sa définition.");
+  }
+});
+
+// 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');
+  container.innerHTML = '';
+
+  lexiques.forEach(lexique => {
+    const div = document.createElement('div');
+    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;
+  
+    // Case à cocher
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.id = `chk_${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 dès l'ouverture de la barre latérale
+chargerLexiques();
--- a/menu_extension/manifest.json
+++ b/menu_extension/manifest.json
@@ -13,21 +13,34 @@
  "*://babalex.lezinter.net/*",
  "*://prisms.lezinter.net/*"],
  "background": {
-    "scripts": ["background.js"],
+    "scripts": ["menu_extension/background.js"],
    "persistent": true
  },
-  "options_ui": {
-    "page": "options.html",
-    "open_in_tab": false
-  },
  "browser_action": {
-    "default_popup": "popup.html",
+    "default_popup": "menu_extension/popup.html",
    "default_icon": {
-      "16": "icon-16.png",
-      "48": "icon-48.png",
-      "128": "icon-128.png"
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
    },
    "default_title": "ff2BaLex"
  },
-  "web_accessible_resources": ["login.html"]
+  "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"]
+  }
+  ]
 }