Version 0.2.0 - Ajout de l'explorateur de fichier, des ViewWindow, Des DroppableMenu

public/javascripts/basics.js

@@ -23,6 +23,8 @@ class InfoPop {
         this.element.innerHTML = " "
         this.element.style.fontSize = "14px"
         this.element.style.position = "sticky"
+        this.element.style.width = this.element.parentElement.offsetWidth + "px"
+        this.element.style.textAlign = "center"
     }
 
     clear() {
@@ -44,6 +46,11 @@ class InfoPop {
         this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
     }
 
+    setSize(size) {
+            
+            this.element.style.fontSize = size
+    }
+
 }
 
 
@@ -65,11 +72,15 @@ document.oncontextmenu = function(e) {
   
 }
 
+var zIndex = 5
 
 class ViewWindow {
     ViewHTML = null
     ViewProperties =null
     ViewSpanInteger = null
+    ViewPopupSpanInteger = null
+    ViewPopupHTML = null
+    ViewPopupTitle = null
     constructor(properties) {
         if(!viewsAccessible.has(properties.title)) {
 
@@ -78,6 +89,7 @@ class ViewWindow {
             
             this.ViewHTML = `
                 <div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
+    
                     <div id='${properties.title}_header' class='view-window-header'>
                     <span style='width: 40px'></span>
                     <p>${properties.title}</p>
@@ -85,6 +97,8 @@ class ViewWindow {
                     </div>
                     <div id='${properties.title}_content' class='view-window-content'>
                     </div>
+                    <div id='${properties.title}_popupDiv'></div>
+            
                 </div>
             `
             this.ViewSpanInteger = document.createElement("div")
@@ -103,10 +117,15 @@ class ViewWindow {
     
             let isDragging = false;
             let offsetX, offsetY;
-    
+            windowDiv.style.zIndex = zIndex + 1
+
             header.addEventListener('mousedown', (e) => {
                 isDragging = true;
-            
+                
+                zIndex+=2
+                windowDiv.style.zIndex = zIndex
+               
+
                 // Enregistrez la position de la souris par rapport à la fenêtre
                 offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
                 offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
@@ -145,7 +164,7 @@ class ViewWindow {
 
     destroy() {
         const win = getID(`${this.ViewProperties.title}_window`)
-        win.outerHTML = ""
+        win.outerHTML = " "
         viewsAccessible.delete(this.ViewProperties.title)
     }
 
@@ -159,6 +178,66 @@ class ViewWindow {
         return this.ViewProperties.title
     }
 
+    
+
+    createPopup(properties) {
+
+        this.ViewPopupHTML = `<div id='${properties.title}_popup' class='view-popup'>
+            <div class='view-popup-bar'>
+                <p>${properties.title}</p>
+                <span id='${properties.title}_popupClose' class='btn-cover'><i  class='fa fa-xmark'></i></span>
+            </div>
+            ${properties.content}
+        </div>`
+       
+        const contentDiv = getID(this.ViewProperties.title + "_content")
+        const popupDiv = getID(this.ViewProperties.title + "_popupDiv")
+        this.ViewPopupSpanInteger = document.createElement("div")
+        popupDiv.appendChild(this.ViewPopupSpanInteger);
+        this.ViewPopupSpanInteger.outerHTML = this.ViewPopupHTML
+
+        this.ViewPopupTitle = properties.title
+
+        const popup = getID(properties.title + "_popup")
+        const popupClose = getID(properties.title + "_popupClose")
+
+        popupClose.addEventListener("click", () => {
+
+            this.destroyPopup()
+
+        })
+
+        // Center the popup to the window div
+
+        popup.style.left = (contentDiv.offsetWidth / 2) - (popup.offsetWidth / 2) + "px"
+        popup.style.top = (contentDiv.offsetHeight / 2) - (popup.offsetHeight / 2) + "px"
+        
+        // Render parent element styled blur
+        contentDiv.classList.add("blur")
+
+        // Disable all interractions like click and events with contentDiv children
+
+        for(var child of contentDiv.children) {
+
+            child.style.pointerEvents = "none"
+        }
+       
+    }
+
+    destroyPopup() {
+        
+        const contentDiv = getID(this.ViewProperties.title + "_content")
+        for(var child of contentDiv.children) {
+
+            child.style.pointerEvents = "unset"
+        }
+        contentDiv.classList.remove("blur")
+   
+        const popup = getID(this.ViewPopupTitle + "_popup")
+        popup.outerHTML = ""
+    
+    }
+
 }
 
 createView("files_explorer")
@@ -211,6 +290,10 @@ class DroppableMenu {
                 this.DMSpanInteger.outerHTML = this.options.join('')
 
                 const menu = getID(`dm-${this.id}`)
+
+                menu.style.zIndex = zIndex + 2
+                zIndex+=1
+
     
                 menu.style.left = (xMousePos - 40) + "px" 
                 menu.style.top = (yMousePos - 40) + "px"
@@ -229,6 +312,17 @@ class DroppableMenu {
     
     }
 
+    get(action) {
+
+        return getID(this.id + "_" + action)
+    }
+
+    hide() {
+
+        const menu = getID(`dm-${this.id}`)
+        menu.outerHTML = ""
+    
+    }
 }
 
 

public/javascripts/filexplorer.js

@@ -20,16 +20,24 @@ function generateFileExplorer() {
         })
     }
 
+    function goSharePath() {
+        const rFiles = post("FX_GET", "sharepath")
+        
+        rFiles.then((result) => {
+            loadFiles(result)
+        })
+    }
    
 
     View.setContent(`
         <div class="fx-window">
             <div class='fx-bar'>
-                <span id='fx-home' class='btn-cover'><i class='fa fa-home'></i></span>
+                <span id='${View.getViewTitle()}_home' class='btn-cover'><i class='fa fa-home'></i></span>
+                <span id='${View.getViewTitle()}_sharebtn' class='btn-cover'><i class="fa-solid fa-share-from-square"></i></span>
                 <input class='fx-root-input' type="text" id='${View.getViewTitle()}_rootInput'>
                 <div class='fx-bar-actions'>
-                <button class='btn blue'><span><i class='fa fa-folder'></i> Nouv. dossier</span></button>
-                <button class='btn blue'><span><i class="fa-solid fa-file-arrow-up"></i> Upload</span></button>
+                <button id='${View.getViewTitle()}_newFolder' class='btn blue'><span><i class='fa fa-folder'></i> Nouv. dossier</span></button>
+                <button id='${View.getViewTitle()}_newFile' class='btn green'><span><i class="fa-solid fa-file-arrow-up"></i> Nouveau</span></button>
                 </div> 
             </div>
             <div id='${View.getViewTitle()}_explorer' class='fx-explorer'>
@@ -40,6 +48,195 @@ function generateFileExplorer() {
 
     const rootInput = getID(View.getViewTitle() + '_rootInput')
     const explorer = getID(View.getViewTitle() + '_explorer')
+    const newFolder = getID(View.getViewTitle() + '_newFolder')
+    const newFile = getID(View.getViewTitle() + '_newFile')
+    const home = getID(View.getViewTitle() + '_home')
+    const sharebtn = getID(View.getViewTitle() + '_sharebtn')
+
+    home.addEventListener("click", () => {
+        
+        goHomePath()
+
+    })
+
+    sharebtn.addEventListener("click", () => {
+
+        goSharePath()
+
+    })  
+
+    newFolder.addEventListener("click", () => {
+
+        View.createPopup({
+            title: `<i class="fa fa-folder"></i> Nouveau dossier`,
+            content: `
+                <input type='text' class='field' id='${View.getViewTitle()}_foldername'>
+                <div id='${View.getViewTitle()}_folderInfo'></div>
+                <button class='btn green' id='${View.getViewTitle()}_foldercreate'><span><i class='fa fa-add'></i> Créer</span></button>
+        `}) 
+
+        const foldername = getID(View.getViewTitle() + "_foldername")
+        const foldercreate = getID(View.getViewTitle() + "_foldercreate")
+        const folderInfo = new InfoPop(View.getViewTitle() + "_folderInfo")
+
+        folderInfo.setSize("13px")
+      
+
+        foldercreate.addEventListener("click", () => {
+            folderInfo.clear()
+            if(foldername.value.length < 1) {
+                folderInfo.err("Le nom du dossier est trop court.")
+                return
+            }
+
+            const regex = new RegExp(/^[a-zA-Z0-9-_]+$/)
+
+            if(!regex.test(foldername.value) | foldername.value.replace(/\s/g, '').length < 1) {
+                folderInfo.err("Le nom du dossier est invalide.")
+                return
+            }
+
+            const reqFiles = post("FX_NEW_FOLDER", rootInput.value + "/" +  foldername.value)
+            reqFiles.then((result) => {
+                if(result == "OK") {
+                    View.destroyPopup(`<i class="fa fa-folder"></i> Nouveau dossier`)
+                    const reqFiles = post("FX_GET", rootInput.value)
+                    reqFiles.then((result) => {
+                        loadFiles(result)
+                    })
+                } else if(result == "EXIST") {
+                    folderInfo.err("Le dossier existe déjà.")
+                } else if(result == "NOT_PERMITTED") {
+                    folderInfo.err("Vous n'avez pas les permissions pour créer un dossier ici.")
+                } else {
+                    folderInfo.err("Une erreur est survenue.")
+                }
+            })
+
+         
+        })
+        
+        
+    
+    })
+
+
+    // Create a new file with a popup wth 2 options, upload or create, if create give a input name or if upload, upload a file
+
+    newFile.addEventListener("click", () => {
+
+        View.createPopup({
+            title: `<i class="fa-solid fa-file-arrow-up"></i> Nouveau fichier`,
+            content: `
+                <input type='text' class='field' id='${View.getViewTitle()}_filename'>
+                <div id='${View.getViewTitle()}_fileInfo'></div>
+                <button class='btn green' id='${View.getViewTitle()}_filecreate'><span><i class='fa fa-add'></i> Créer</span></button>
+                <button class='btn blue' id='${View.getViewTitle()}_fileupload'><span><i class='fa fa-upload'></i> Upload</span></button>
+        `})
+
+        const filename = getID(View.getViewTitle() + "_filename")
+        const filecreate = getID(View.getViewTitle() + "_filecreate")
+        const fileupload = getID(View.getViewTitle() + "_fileupload")
+        const fileInfo = new InfoPop(View.getViewTitle() + "_fileInfo")
+
+        fileInfo.setSize("13px")
+
+        filecreate.addEventListener("click", () => {
+
+            fileInfo.clear()
+            if(filename.value.length < 1) {
+                fileInfo.err("Le nom du fichier est trop court.")
+                return
+            }
+
+            const regex = new RegExp(/^[a-zA-Z0-9-_.]+$/)
+
+            if(!regex.test(filename.value) | filename.value.replace(/\s/g, '').length < 1) {
+                fileInfo.err("Le nom du fichier est invalide.")
+                return
+            }
+
+            const reqFiles = post("FX_NEW_FILE", rootInput.value + "/" +  filename.value)
+            reqFiles.then((result) => {
+                if(result == "OK") {
+                    View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Nouveau fichier`)
+                    const reqFiles = post("FX_GET", rootInput.value)
+                    reqFiles.then((result) => {
+                        loadFiles(result)
+                    })
+                } else if(result == "EXIST") {
+                    fileInfo.err("Le fichier existe déjà.")
+                } else if(result == "NOT_PERMITTED") {
+                    fileInfo.err("Vous n'avez pas les permissions pour créer un fichier ici.")
+                } else {
+                    fileInfo.err("Une erreur est survenue.")
+                }
+            })
+
+
+        })
+
+        fileupload.addEventListener("click", () => {
+
+            fileInfo.clear()
+            View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Nouveau fichier`)
+            View.createPopup({
+                title: `<i class="fa-solid fa-file-arrow-up"></i> Upload`,
+                content: `
+                    <input type='file' class='field' id='${View.getViewTitle()}_fileuploadInput'>
+                    <div id='${View.getViewTitle()}_fileuploadInfo'></div>
+                    <button class='btn green' id='${View.getViewTitle()}_fileuploadBtn'><span><i class='fa fa-upload'></i> Upload</span></button>
+            `})
+
+            const fileuploadInput = getID(View.getViewTitle() + "_fileuploadInput")
+            const fileuploadBtn = getID(View.getViewTitle() + "_fileuploadBtn")
+            const fileuploadInfo = new InfoPop(View.getViewTitle() + "_fileuploadInfo")
+                
+            fileuploadBtn.addEventListener("click", () => {
+
+                fileuploadInfo.clear()
+                if(fileuploadInput.files.length < 1) {
+                    fileuploadInfo.err("Aucun fichier sélectionné.")
+                    return
+                }
+
+                const file = fileuploadInput.files[0]
+
+                const reqFiles = post("FX_UPLOAD", {name: file.name ,root: rootInput.value, file: file})
+
+                reqFiles.then((result) => {
+
+                    if(result == "OK") {
+                        View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Upload`)
+                        const reqFiles = post("FX_GET", rootInput.value)
+                        reqFiles.then((result) => {
+                            loadFiles(result)
+                        })
+                    }
+                    if(result == "EXIST") {
+                        fileuploadInfo.err("Le fichier existe déjà.")
+                    }
+                    if(result == "NOT_PERMITTED") {
+                        fileuploadInfo.err("Vous n'avez pas les permissions pour uploader un fichier ici.")
+                    }
+                    if(result == "NOT_FILE") {
+                        fileuploadInfo.err("Le fichier n'est pas valide.")
+                    }
+                    if(result == "NOT_EXIST") {
+                        fileuploadInfo.err("Le fichier n'existe pas.")
+                    }
+                    if(result == "TOO_BIG") {
+                        fileuploadInfo.err("Le fichier est trop volumineux.")
+                    }
+                    if(result == "ERROR") {
+                        fileuploadInfo.err("Une erreur est survenue.")
+                    }
+                })
+            })
+        })
+    })
+
+
 
     rootInput.addEventListener("change", () => {
 
@@ -64,20 +261,21 @@ function generateFileExplorer() {
             explorer.innerHTML = "<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Ce dossier n'existe pas.</p>"
         } else {
             
-            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
+       
             for(const file of files.content) {
 
-                // Convert all file.size to a human readable format with units
-
-                file.size = bytesToSize(file.size)
-
-                //Tell if the file is a directory or not
-
                 if(file.directory) {
                     file.size = "Dossier"
+
+                } else {
+                    console.log('------------')
+                    console.log(file.size)
+                    console.log(bytesToSize(file.size))
+                    console.log('------------')
+                    file.size = bytesToSize(file.size)
                 }
 
-                fileElements.push(`<div id='${file.id}' oncontextmenu='createFileMenu("${file.id}")' class='fx-element'>
+                fileElements.push(`<div id='${file.id}' class='fx-element'>
                 <div>
                     ${getIcon(file)}
                     <p>${file.name}</p>
@@ -85,23 +283,32 @@ function generateFileExplorer() {
                 <p>Taille : ${file.size}</p>
                 <p>Date de modification : ${getFormattedDate(file.lastedition)}</p>
                 </div>`)
+
+
             }
 
+            // Sort the files by directory and then by name
+            
+            fileElements.sort((a, b) => {
+                if(a.includes("Dossier") && !b.includes("Dossier")) {
+                    return -1
+                } else if(!a.includes("Dossier") && b.includes("Dossier")) {
+                    return 1
+                } else {
+                    return 0
+                }
+
+            })
+
+            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
+
 
         }
 
-
         explorer.innerHTML = fileElements.join("")
 
         const parent = document.getElementById("fx-parent")
-        const home = document.getElementById("fx-home")
-
-        home.addEventListener("click", () => {
-            
-            goHomePath()
-
-        })
-
+       
         parent.addEventListener("click", () => {
 
                 const reqFiles = post("FX_GET", files.parent)
@@ -116,10 +323,17 @@ function generateFileExplorer() {
             // If it's a directory, get the file directory and make the request to get the files in it and loadIt
 
             for(const file of files.content) {
+
+                const dropMenu = new DroppableMenu({
+                    "id": file.id
+                })
+            
+                
+                const element = document.getElementById(file.id)
                     
                 if(file.directory) {
 
-                    const element = document.getElementById(file.id)
+                   
                     element.addEventListener("click", () => {
 
                         const reqFiles = post("FX_GET", file.fileDirectory)
@@ -127,9 +341,260 @@ function generateFileExplorer() {
                             loadFiles(result)
                         }) 
                     })
+                } else {
+
+                    element.addEventListener("dblclick", () => {
+                        editFile()
+                    })
+            
+                    dropMenu.add("edit", "<i class='fa-solid fa-pen'></i> Editer")
+                    dropMenu.add("share", "<i class='fa fa-share'></i> Partager")
+                    dropMenu.add("download", "<i class='fa fa-download'></i> Télécharger")
                 }
 
-        }
+                dropMenu.add("rename", "<i class='fa-solid fa-file-signature'></i> Renommer")
+                
+                dropMenu.add("delete", "<i class='fa fa-trash'></i> Supprimer")
+              
+                  
+                getID(file.id).addEventListener("contextmenu", () => {
+                    dropMenu.show()
+                    dropMenu.get("delete").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_DELETE", file.fileDirectory)
+                        reqFiles.then((result) => {
+                            if(result == "OK") {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                            } else if(result == "NOT_PERMITTED") {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                                View.createPopup({
+                                    title: `<i class="fa fa-warning"></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour supprimer ce fichier.</p>`
+                                })
+                            } else {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                                View.createPopup({
+                                    title: `<i class="fa fa-warning"></i> Erreur`,
+                                    content: `<p class='yellow'>Une erreur est survenue.</p>`
+                                })
+                             
+                            }
+                        })
+                    })
+                    dropMenu.get("rename").addEventListener("click", () => {
+
+                        dropMenu.hide()
+                        View.createPopup({
+                            title: `<i class="fa fa-file-signature"></i> Renommer`,
+                            content: `
+                                <input type='text' class='field' id='${View.getViewTitle()}_rename'>
+                                <div id='${View.getViewTitle()}_renameInfo'></div>
+                                <button class='btn green' id='${View.getViewTitle()}_renameBtn'><span><i class='fa fa-pen'></i> Renommer</span></button>
+                        `}) 
+
+                        const rename = getID(View.getViewTitle() + "_rename")
+                        const renameBtn = getID(View.getViewTitle() + "_renameBtn")
+                        const renameInfo = new InfoPop(View.getViewTitle() + "_renameInfo")
+                        renameInfo.setSize("13px")
+                        rename.value = file.name
+                        rename.focus()
+                        rename.select()
+
+                        renameBtn.addEventListener("click", () => {
+                            renameInfo.clear()
+                            if(rename.value.length < 1) {
+                                renameInfo.err("Le nom du fichier / dossier est trop court.")
+                                return
+                            }
+            
+                            const regex = new RegExp(/^[a-zA-Z0-9-_]+$/)
+            
+                            if(!regex.test(rename.value) | rename.value.replace(/\s/g, '').length < 1) {
+                                renameInfo.err("Le nom du fichier / dossier est invalide.")
+                                return
+                            }
+            
+                            const reqFiles = post("FX_RENAME", {root: files.root, oldName: file.name, newName: rename.value})
+                            reqFiles.then((result) => {
+                                if(result == "OK") {
+                                    View.destroyPopup(`<i class="fa fa-file-signature"></i> Renommer`)
+                                    const reqFiles = post("FX_GET", files.root)
+                                    reqFiles.then((result) => {
+                                        loadFiles(result)
+                                    })
+                                } else if(result == "EXIST") {
+                                    renameInfo.err("Le fichier / dossier existe déjà.")
+                                } else if(result == "NOT_PERMITTED") {
+                                    renameInfo.err("Vous n'avez pas les permissions pour renommer ce fichier / dossier.")
+                                } else {
+                                    renameInfo.err("Une erreur est survenue.")
+                                }
+                            })
+
+                        })
+                    
+                    })
+                  
+                    if(!file.directory) {
+                    dropMenu.get("share").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_SHARE", {root: files.root, name: file.name})
+                        reqFiles.then((result) => {
+                            if(result == "NOT_PERMITTED") {
+                                View.createPopup({
+                                    title: `<i class="fa fa-warning"></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour partager ce fichier.</p>`
+                                })
+                            } else {
+                                View.createPopup({
+                                    title: `<i class="fa fa-share"></i> Partager`,
+                                    content: `
+                                        <input style='width: 300px' type='text' class='field' id='${View.getViewTitle()}_sharelink'>
+                                        <div id='${View.getViewTitle()}_shareInfo'></div>
+                                        <button class='btn green' id='${View.getViewTitle()}_shareBtn'><span><i class='fa fa-share'></i> Copier</span></button>
+                                `}) 
+
+                                const sharelink = getID(View.getViewTitle() + "_sharelink")
+                                const shareBtn = getID(View.getViewTitle() + "_shareBtn")
+                                const shareInfo = new InfoPop(View.getViewTitle() + "_shareInfo")
+                                shareInfo.setSize("13px")
+                                sharelink.value = result
+                                sharelink.focus()
+                                sharelink.select()
+
+                                shareBtn.addEventListener("click", () => {
+                                    sharelink.focus()
+                                    sharelink.select()
+                                    window.navigator.clipboard.writeText(sharelink.value)
+                                    shareInfo.ok("Copié !")
+                                })
+                            }
+                        })
+                    })
+                    // Edit file with an ViewWindow with 2 options close & save and the name of the window is like File - Editor
+
+                    dropMenu.get("edit").addEventListener("click", () => {
+                        dropMenu.hide()
+                       
+                        editFile()
+                        
+                    })
+
+                    dropMenu.get("download").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_GETFILE", file.fileDirectory)
+                        reqFiles.then((result) => {
+                            if(result == "NOT_PERMITTED") {
+                                View.createPopup({
+                                    title: `<i class="fa fa-warning"></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour télécharger ce fichier.</p>`
+                                })
+                            } else {
+                               // Make Download using result
+                                    const element = document.createElement('a');
+                                    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result));
+                                    element.setAttribute('download', file.name);
+                                    element.style.display = 'none';
+                                    document.body.appendChild(element);
+                                    element.click();
+                                    document.body.removeChild(element);
+
+                            }
+                        })
+                    })
+                    
+  
+                
+                }
+                    
+                })
+
+                
+
+                
+
+                function editFile() {
+                    const reqFiles = post("FX_GETFILE", file.fileDirectory)
+                    reqFiles.then((result) => {
+                        if(result == "NOT_PERMITTED") {
+                            View.createPopup({
+                                title: `<i class="fa fa-warning"></i> Erreur`,
+                                content: `<p class='yellow'>Vous n'avez pas les permissions pour éditer ce fichier.</p>`
+                            })
+                        } else {
+                            const editor = new ViewWindow({
+                                title: `<i class="fa-solid fa-file-pen"></i> Editeur - ${file.fileDirectory}`,
+                                width: "1000px",
+                                height: "600px"
+                            })
+
+                            editor.setContent(`
+                             
+                                    <div class='fx-bar'>
+                                        <span id='${editor.getViewTitle()}_save' class='btn-cover'><i class='fa fa-save'></i></span>
+                                    </div>
+                                    <textarea id='${editor.getViewTitle()}_editorContent' class='fx-editor-content'>${result}</textarea>
+                          
+                                
+                            `)
+
+                      
+                            const editorSave = getID(editor.getViewTitle() + "_save")
+                            const editorContent = getID(editor.getViewTitle() + "_editorContent")
+
+                            // Sauvegarder  le fichier en l'envoyant 
+
+                            editorSave.addEventListener("click", () => {
+
+                                const reqFiles = post("FX_SAVEFILE", {root: files.root, name: file.name, content: editorContent.value})
+                                reqFiles.then((result) => {
+                                    if(result == "OK") {
+                                        editor.destroy()
+                                        const reqFiles = post("FX_GET", files.root)
+                                        reqFiles.then((result) => {
+                                            loadFiles(result)
+                                        })
+                                    } else if(result == "NOT_PERMITTED") {
+                                        View.createPopup({
+                                            title: `<i class="fa fa-warning"></i> Erreur`,
+                                            content: `<p class='yellow'>Vous n'avez pas les permissions pour éditer ce fichier.</p>`
+                                        })
+                                    } else {
+                                        View.createPopup({
+                                            title: `<i class="fa fa-warning"></i> Erreur`,
+                                            content: `<p class='yellow'>Une erreur est survenue.</p>`
+                                        })
+                                    }
+                                })
+                            })
+
+
+
+                            //forbid textarea resize
+                            editorContent.style.resize = "none"
+
+                        
+                            editorClose.addEventListener("click", () => {
+
+                                editor.destroy()
+                            })
+
+
+                        }
+
+                    })
+                }
+
+            }
 
 
         }
@@ -140,19 +605,6 @@ function generateFileExplorer() {
 
 }
 
-function createFileMenu(idCreated) {
-
-    const dropMenu = new DroppableMenu({
-        "id": idCreated
-    })
-
-    dropMenu.add("rename", "<i class='fa-solid fa-file-signature'></i> Renommer")
-    dropMenu.add("share", "<i class='fa fa-share'></i> Partager")
-    dropMenu.add("delete", "<i class='fa fa-trash'></i> Supprimer")
-
-
-    dropMenu.show()
-}
 
 function getIcon(file) {
     if(file.type == "application/json") {
@@ -188,7 +640,7 @@ function getIcon(file) {
     }
     if(file.type == "application/javascript") {
 
-        return '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js">'
+        return '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js"></i>'
     }
     if(file.type == "image/png" | file.type == "image/jpeg") {