Skip to content
Snippets Groups Projects
Commit 462dca20 authored by Prénom Nom's avatar Prénom Nom
Browse files

màj

parent 5cafdfba
No related branches found
No related tags found
1 merge request!9Affichage stats
Hide whitespace changes
Inline Side-by-side
menu_extension/popup.html
+ 3
− 2
View file @ 462dca20
......@@ -113,13 +113,14 @@
<div class="option-row">
<label>Langues suivies</label>
<div id="language-selection" class="language-selection">
<!-- Options générées dynamiquement -->
<p id="loading-languages" style="color: gray;">Chargement...</p>
</div>
</div>
<button id="save-options" class="hidden">Valider</button>
</div>
</div>
<script src="../api.js"></script>
<script src="popup.js"></script>
</body>
</html>
menu_extension/popup.js
+ 163
− 148
View file @ 462dca20
......@@ -2,162 +2,177 @@ console.log("✅ popup.js chargé avec succès !");
// === 1. Mise à jour du bouton Connexion/Déconnexion ===
async function updateConnectionButton() {
const { accessToken } = await browser.storage.local.get("accessToken");
const button = document.getElementById("auth-button");
if (button) {
button.textContent = accessToken ? "Se déconnecter" : "Se connecter";
button.onclick = async () => {
await browser.runtime.sendMessage({ action: "toggleAuth" });
};
} else {
console.error("❌ Le bouton de connexion n'a pas été trouvé.");
}
const { accessToken } = await browser.storage.local.get("accessToken");
const button = document.getElementById("auth-button");
if (button) {
button.textContent = accessToken ? "Se déconnecter" : "Se connecter";
button.onclick = async () => {
await browser.runtime.sendMessage({ action: "toggleAuth" });
};
} else {
console.error("❌ Le bouton de connexion n'a pas été trouvé.");
}
}
// === 2. Écoute des messages depuis background.js ===
browser.runtime.onMessage.addListener((message) => {
if (message.action === "updateUI") {
console.log("📩 Mise à jour reçue : État connecté :", message.isLoggedIn);
console.log("🔄 Actualisation du menu de l'extension déclenchée.");
updateConnectionButton();
}
if (message.action === "updateUI") {
console.log("📩 Mise à jour reçue : État connecté :", message.isLoggedIn);
console.log("🔄 Actualisation du menu de l'extension déclenchée.");
updateConnectionButton();
updateOptionsUI();
updateLanguageSelection();
}
});
// === 3. Gestion des actions des boutons ===
document.getElementById("toggleExtensionBtn").addEventListener("click", async () => {
const { extensionActive } = await browser.storage.local.get("extensionActive");
const newState = !extensionActive;
await browser.storage.local.set({ extensionActive: newState });
alert(`Extension ${newState ? "activée" : "désactivée"}.`);
// === 3. Mise à jour dynamique de la sélection des langues ===
async function updateLanguageSelection() {
const languageSelection = document.getElementById("language-selection");
languageSelection.innerHTML = "<p id='loading-languages' style='color: gray;'>Chargement...</p>";
const { accessToken } = await browser.storage.local.get("accessToken");
if (!accessToken) {
languageSelection.innerHTML = "<p style='color: red;'>Veuillez vous connecter.</p>";
return;
}
const lexicons = await getUserLexicons(accessToken);
const userLanguages = [...new Set(lexicons.map(lex => lex.language))];
// Récupérer les langues actuellement suivies depuis le local storage
const { trackedLanguages } = await browser.storage.local.get("trackedLanguages") || { trackedLanguages: [] };
languageSelection.innerHTML = ""; // Suppression du message de chargement
if (userLanguages.length === 0) {
languageSelection.innerHTML = "<p style='color: red;'>Aucun lexique personnel trouvé.</p>";
return;
}
userLanguages.forEach(lang => {
const langButton = document.createElement("div");
langButton.classList.add("lang-option");
langButton.textContent = lang.toUpperCase();
langButton.dataset.value = lang;
// Vérifier si la langue est suivie et ajouter la classe `selected`
if (trackedLanguages && trackedLanguages.includes(lang)) {
langButton.classList.add("selected");
}
langButton.addEventListener("click", () => {
langButton.classList.toggle("selected");
});
languageSelection.appendChild(langButton);
});
console.log("✅ Sélection des langues mise à jour avec :", userLanguages);
}
// === 4. Gestion de l'affichage des boutons des statistiques et des options utilisateur ===
async function updateOptionsUI() {
const { accessToken } = await browser.storage.local.get("accessToken");
const isLoggedIn = !!accessToken;
const toggleStatsBtn = document.getElementById("toggleStatsBtn");
const statsOptions = document.getElementById("stats-options");
const autoAddContainer = document.getElementById("auto-add").parentElement;
const autoAddCheckbox = document.getElementById("auto-add");
const autoAddOptions = document.getElementById("auto-add-options");
const thresholdInput = document.getElementById("threshold");
const saveOptionsBtn = document.getElementById("save-options");
// Masquer l'option "Ajout Automatique" si l'utilisateur n'est pas connecté
autoAddContainer.style.display = isLoggedIn ? "block" : "none";
// Charger les préférences utilisateur
const { isTrackingActive, autoAdd, trackedLanguages, threshold } = await browser.storage.local.get([
"isTrackingActive",
"autoAdd",
"trackedLanguages",
"threshold"
]) || { isTrackingActive: false };
// Mettre à jour le bouton des statistiques
toggleStatsBtn.textContent = isTrackingActive ? "Désactiver les statistiques" : "Activer les statistiques";
statsOptions.classList.toggle("hidden", !isTrackingActive);
if (isLoggedIn) {
autoAddCheckbox.checked = autoAdd || false;
if (threshold !== undefined) thresholdInput.value = threshold;
// Afficher ou masquer les options d'ajout automatique
autoAddOptions.classList.toggle("hidden", !autoAdd);
saveOptionsBtn.classList.toggle("hidden", !autoAdd);
} else {
autoAddCheckbox.checked = false;
autoAddOptions.classList.add("hidden");
saveOptionsBtn.classList.add("hidden");
}
}
// === 5. Gestion des événements utilisateur ===
document.getElementById("toggleStatsBtn").addEventListener("click", async () => {
const newState = !(await browser.storage.local.get("isTrackingActive")).isTrackingActive;
await browser.storage.local.set({ isTrackingActive: newState });
if (!newState) {
await browser.storage.local.set({ autoAdd: false });
document.getElementById("auto-add").checked = false;
document.getElementById("auto-add-options").classList.add("hidden");
document.getElementById("save-options").classList.add("hidden");
}
document.getElementById("toggleStatsBtn").textContent = newState ? "Désactiver les statistiques" : "Activer les statistiques";
document.getElementById("stats-options").classList.toggle("hidden", !newState);
browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState });
if (newState) {
console.log("[Popup] Demande d'initialisation de Pyodide...");
browser.runtime.sendMessage({ command: "init-pyodide" });
}
});
// === 4. Initialisation ===
document.addEventListener("DOMContentLoaded", () => {
console.log("🌐 Initialisation du menu de l'extension...");
updateConnectionButton();
document.getElementById("auto-add").addEventListener("change", async () => {
const isChecked = document.getElementById("auto-add").checked;
document.getElementById("auto-add-options").classList.toggle("hidden", !isChecked);
document.getElementById("save-options").classList.toggle("hidden", !isChecked);
if (!isChecked) {
await browser.storage.local.set({ autoAdd: false });
}
});
// === 5. Gestion des boutons des statistiques ===
document.addEventListener("DOMContentLoaded", async () => {
document.getElementById("save-options").addEventListener("click", async () => {
const autoAdd = document.getElementById("auto-add").checked;
const threshold = parseInt(document.getElementById("threshold").value, 10);
const selectedLanguages = Array.from(document.querySelectorAll("#language-selection .lang-option.selected"))
.map(option => option.dataset.value);
const toggleStatsBtn = document.getElementById("toggleStatsBtn");
const statsOptions = document.getElementById("stats-options");
const autoAddCheckbox = document.getElementById("auto-add");
const autoAddOptions = document.getElementById("auto-add-options");
const languageSelection = document.getElementById("language-selection");
const thresholdInput = document.getElementById("threshold");
const saveOptionsBtn = document.getElementById("save-options");
// Charger les préférences utilisateur
const { isTrackingActive, autoAdd, trackedLanguages, threshold } = await browser.storage.local.get([
"isTrackingActive",
"autoAdd",
"trackedLanguages",
"threshold"
]) || { isTrackingActive: false };
// Mettre à jour le bouton des statistiques
toggleStatsBtn.textContent = isTrackingActive ? "Désactiver les statistiques" : "Activer les statistiques";
statsOptions.classList.toggle("hidden", !isTrackingActive);
// Appliquer les préférences enregistrées
autoAddCheckbox.checked = autoAdd || false;
if (threshold !== undefined) thresholdInput.value = threshold;
// Afficher ou masquer les options d'ajout automatique
autoAddOptions.classList.toggle("hidden", !autoAdd);
saveOptionsBtn.classList.toggle("hidden", !autoAdd);
// Charger les langues disponibles et les afficher dynamiquement
const availableLanguages = ["fr", "en", "es", "de"];
languageSelection.innerHTML = "";
availableLanguages.forEach(lang => {
const langButton = document.createElement("div");
langButton.classList.add("lang-option");
langButton.textContent = lang.toUpperCase();
langButton.dataset.value = lang;
if (trackedLanguages && trackedLanguages.includes(lang)) {
langButton.classList.add("selected");
}
langButton.addEventListener("click", () => {
langButton.classList.toggle("selected");
});
languageSelection.appendChild(langButton);
});
// Fonction pour mettre à jour autoAdd dans le stockage
const updateAutoAddState = async (newState) => {
await browser.storage.local.set({ autoAdd: newState });
console.log(`autoAdd mis à jour : ${newState}`);
};
// Gestion du bouton Activer/Désactiver les statistiques
toggleStatsBtn.addEventListener("click", async () => {
const newState = !(await browser.storage.local.get("isTrackingActive")).isTrackingActive;
await browser.storage.local.set({ isTrackingActive: newState });
if (!newState) {
await updateAutoAddState(false);
autoAddCheckbox.checked = false;
autoAddOptions.classList.add("hidden");
saveOptionsBtn.classList.add("hidden");
}
toggleStatsBtn.textContent = newState ? "Désactiver les statistiques" : "Activer les statistiques";
statsOptions.classList.toggle("hidden", !newState);
browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState });
});
// Gestion de la case "Ajout Automatique"
autoAddCheckbox.addEventListener("change", async () => {
const isChecked = autoAddCheckbox.checked;
autoAddOptions.classList.toggle("hidden", !isChecked);
saveOptionsBtn.classList.toggle("hidden", !isChecked);
if (!isChecked) {
await updateAutoAddState(false);
}
});
// Sauvegarde des options sélectionnées
saveOptionsBtn.addEventListener("click", async () => {
const autoAdd = autoAddCheckbox.checked;
const threshold = parseInt(thresholdInput.value, 10);
const selectedLanguages = Array.from(languageSelection.querySelectorAll(".lang-option.selected"))
.map(option => option.dataset.value);
await browser.storage.local.set({
autoAdd,
threshold,
trackedLanguages: selectedLanguages
});
console.log("Options sauvegardées :", { autoAdd, threshold, trackedLanguages: selectedLanguages });
});
// Gestion du bouton des statistiques
toggleStatsBtn.addEventListener("click", async () => {
const newState = !(await browser.storage.local.get("isTrackingActive")).isTrackingActive;
await browser.storage.local.set({ isTrackingActive: newState });
// Mettre à jour l'affichage
toggleStatsBtn.textContent = newState ? "Désactiver les statistiques" : "Activer les statistiques";
statsOptions.classList.toggle("hidden", !newState);
// Envoyer le message au background script
browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState });
if (newState) {
console.log("[Popup] Demande d'initialisation de Pyodide...");
browser.runtime.sendMessage({ command: "init-pyodide" });
}
});
});
\ No newline at end of file
await browser.storage.local.set({
autoAdd,
threshold,
trackedLanguages: selectedLanguages
});
console.log("Options sauvegardées :", { autoAdd, threshold, trackedLanguages: selectedLanguages });
});
// === 6. Gestion de l'activation/désactivation de l'extension ===
document.getElementById("toggleExtensionBtn").addEventListener("click", async () => {
const { extensionActive } = await browser.storage.local.get("extensionActive");
const newState = !extensionActive;
await browser.storage.local.set({ extensionActive: newState });
alert(`Extension ${newState ? "activée" : "désactivée"}.`);
});
// === 7. Mise à jour initiale au chargement ===
document.addEventListener("DOMContentLoaded", async () => {
await updateConnectionButton();
await updateOptionsUI();
await updateLanguageSelection();
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment