template html & css

explorer_md/static/script.js

@@ -0,0 +1,103 @@
+// static/script.js
+
+const fileListPanel = document.getElementById('file-list-panel');
+const resizer = document.getElementById('resizer');
+const container = document.querySelector('.container');
+const fileListUl = document.getElementById('file-list');
+const fileContentPre = document.getElementById('file-content');
+const contentTitle = document.getElementById('content-title');
+
+let isResizing = false;
+
+// 1. GESTION DU REDIMENSIONNEMENT (Même logique que précédemment)
+resizer.addEventListener('mousedown', function(e) {
+    isResizing = true;
+    container.classList.add('resizing'); 
+    document.body.style.userSelect = 'none'; 
+});
+
+document.addEventListener('mousemove', function(e) {
+    if (!isResizing) return;
+
+    const newWidth = e.clientX - container.getBoundingClientRect().left;
+    const minWidth = 150; 
+    const maxWidth = container.clientWidth * 0.5;
+
+    if (newWidth >= minWidth && newWidth <= maxWidth) {
+        fileListPanel.style.width = newWidth + 'px';
+    }
+});
+
+document.addEventListener('mouseup', function() {
+    isResizing = false;
+    container.classList.remove('resizing');
+    document.body.style.userSelect = ''; 
+});
+
+// 2. LOGIQUE DU CHARGEMENT DES FICHIERS (Communication avec Flask)
+
+// A. Récupérer la liste des fichiers depuis le serveur
+async function fetchFileList() {
+    try {
+        const response = await fetch('/api/list_files');
+        const files = await response.json();
+
+        if (response.ok) {
+            fileListUl.innerHTML = ''; // Vider la liste existante
+            if (files.length === 0) {
+                 fileListUl.innerHTML = '<li>Aucun fichier trouvé.</li>';
+                 fileContentPre.textContent = 'Le répertoire est vide.';
+            } else {
+                files.forEach(filename => {
+                    const li = document.createElement('li');
+                    li.textContent = filename;
+                    li.onclick = () => loadFileContent(filename, li);
+                    fileListUl.appendChild(li);
+                });
+                
+                // Charger le contenu du premier fichier par défaut
+                if (files.length > 0) {
+                    loadFileContent(files[0], fileListUl.querySelector('li'));
+                }
+            }
+        } else {
+            // Afficher l'erreur retournée par Flask
+            fileContentPre.textContent = `Erreur: ${files.error}`;
+        }
+    } catch (error) {
+        fileContentPre.textContent = `Erreur de connexion au serveur : ${error.message}`;
+        console.error('Erreur lors de la récupération des fichiers:', error);
+    }
+}
+
+// B. Charger le contenu du fichier sélectionné
+async function loadFileContent(filename, element) {
+    // Retirer la classe 'selected' de tous les éléments
+    document.querySelectorAll('#file-list li').forEach(li => {
+        li.classList.remove('selected');
+    });
+    // Ajouter la classe 'selected' à l'élément cliqué
+    if (element) {
+        element.classList.add('selected');
+    }
+
+    contentTitle.textContent = `Contenu de : ${filename}`;
+    fileContentPre.textContent = 'Chargement en cours...';
+
+    try {
+        const response = await fetch(`/api/get_content/${filename}`);
+        const data = await response.json();
+
+        if (response.ok) {
+            // Enlève le slice(1, -1) sauf si ton serveur renvoie le contenu entre guillemets
+            fileContentPre.innerHTML = marked.parse(data.content);
+        } else {
+            fileContentPre.innerHTML = `Erreur (${response.status}) : ${data.error}`;
+        }
+    } catch (error) {
+        fileContentPre.textContent = `Erreur réseau lors du chargement : ${error.message}`;
+        console.error('Erreur lors du chargement du contenu:', error);
+    }
+}
+// Exécuter au chargement de la page
+document.addEventListener('DOMContentLoaded', fetchFileList);