Version 0.2.0 - PREVERSION - Ajout READ de l'explorateur

public/javascripts/basics.js

@@ -1,5 +1,8 @@
+
+
 // Get Document ID
 
+
 /**
  * Récupère depuis le document l'identifiant de l'élément
  * @param {string} id Identifiant de l'élément `id='identifiant'`
@@ -43,3 +46,223 @@ class InfoPop {
 
 }
 
+
+const viewsAccessible = new Map()
+
+var xMousePos = null;
+var yMousePos = null;
+
+document.onmousemove = function(e) {
+  xMousePos = e.clientX + window.scrollX;
+  yMousePos = e.clientY + window.scrollY;
+
+}
+
+document.oncontextmenu = function(e) {
+
+    xMousePos = e.clientX + window.scrollX;
+    yMousePos = e.clientY + window.scrollY;
+  
+}
+
+
+class ViewWindow {
+    ViewHTML = null
+    ViewProperties =null
+    ViewSpanInteger = null
+    constructor(properties) {
+        if(!viewsAccessible.has(properties.title)) {
+
+            this.ViewProperties = properties
+            viewsAccessible.set(properties.title, true)
+            
+            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>
+                    <button id='${properties.title}_close' class='btn min red'><span><i class='fa fa-xmark'></i></span></button>
+                    </div>
+                    <div id='${properties.title}_content' class='view-window-content'>
+                    </div>
+                </div>
+            `
+            this.ViewSpanInteger = document.createElement("div")
+            document.body.appendChild(this.ViewSpanInteger);
+            this.ViewSpanInteger.outerHTML = this.ViewHTML
+
+            const closeWindow = document.getElementById(properties.title + "_close")
+            closeWindow.addEventListener("click", () => {
+    
+                this.destroy()
+              
+            })
+    
+            const header = document.getElementById(properties.title + "_header")
+            const windowDiv  = document.getElementById(properties.title + "_window")
+    
+            let isDragging = false;
+            let offsetX, offsetY;
+    
+            header.addEventListener('mousedown', (e) => {
+                isDragging = true;
+            
+                // Enregistrez la position de la souris par rapport à la fenêtre
+                offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
+                offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
+              });
+            
+              // Gérer le déplacement
+              document.addEventListener('mousemove', (e) => {
+                if (isDragging) {
+                    
+                  header.style.cursor = "grab"
+                  
+                  // Calculez la nouvelle position de la fenêtre en fonction de la position de la souris
+                  const newLeft = e.clientX - offsetX;
+                  const newTop = e.clientY - offsetY;
+            
+                  // Limitation de la position pour éviter un débordement
+                  const maxX = window.innerWidth - windowDiv.offsetWidth;
+                  const maxY = window.innerHeight - windowDiv.offsetHeight;
+                  
+                  windowDiv.style.left = Math.min(Math.max(newLeft, 0), maxX) + 'px';
+                  windowDiv.style.top = Math.min(Math.max(newTop, 0), maxY) + 'px';
+                }
+              });
+            
+              // Gérer la fin du glisser-déposer
+              document.addEventListener('mouseup', () => {
+                header.style.cursor = "unset"
+                isDragging = false;
+              });
+
+
+
+        }
+
+    }
+
+    destroy() {
+        const win = getID(`${this.ViewProperties.title}_window`)
+        win.outerHTML = ""
+        viewsAccessible.delete(this.ViewProperties.title)
+    }
+
+    setContent(text) {
+        const contentDiv = document.getElementById(this.ViewProperties.title + "_content")
+        contentDiv.innerHTML = text
+    }
+
+    getViewTitle() {
+
+        return this.ViewProperties.title
+    }
+
+}
+
+createView("files_explorer")
+
+function createView(viewType) {
+    if(viewType == 'files_explorer') {
+
+        generateFileExplorer()
+
+
+    }
+    if(viewType == 'service') {
+
+        const View = new ViewWindow({
+            title: "Gestionnaire des services",
+            width: "1000px",
+            height: "600px"
+        })
+    }
+   
+}
+
+
+class DroppableMenu {
+    options = new Array()
+    id = null
+    DMSpanInteger = null
+    constructor(properties) {
+ 
+        this.id = properties.id
+        this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
+
+    }
+
+    add(action, string) {
+      
+        this.options.push("<div id='" + this.id + "_" + action + "' class='dm-element'>" + string + "</div>")
+        
+    }
+
+    show() {
+       
+        
+            this.options.push(`</div>`)
+
+            if(xMousePos && yMousePos) {
+
+                this.DMSpanInteger = document.createElement("span")
+                document.body.appendChild(this.DMSpanInteger);
+                this.DMSpanInteger.outerHTML = this.options.join('')
+
+                const menu = getID(`dm-${this.id}`)
+    
+                menu.style.left = (xMousePos - 40) + "px" 
+                menu.style.top = (yMousePos - 40) + "px"
+    
+                menu.addEventListener('mouseleave', () => {
+    
+                    menu.outerHTML = ""
+                 
+                })
+
+            
+            }
+            
+           
+
+    
+    }
+
+}
+
+
+
+function getFormattedDate(GetDate) {
+
+    const date = new Date(GetDate)
+
+    var gmonth = date.getMonth() + 1
+    var gday = date.getDate()
+    var gHour = date.getHours()
+    var gMinute = date.getMinutes()
+    var gSecondes = date.getSeconds()
+
+
+    if(date.getMonth() + 1 < 10) {
+        gmonth = "0" + (date.getMonth() + 1)
+    } 
+
+    if(date.getDate() + 1 <= 10) {
+        gday = "0" + date.getDate()
+    }
+
+    if(date.getHours() + 1 <= 10) {
+        gHour = "0" + date.getHours()
+    }
+
+    if(date.getMinutes() + 1 <= 10) {
+        gMinute = "0" + date.getMinutes()
+    }
+
+    if(date.getSeconds() + 1 <= 10) {
+        gSecondes = "0" + date.getSeconds()
+    }
+
+    return gday + "/" + gmonth + "/" + date.getFullYear()  + " - " + gHour + ":" + gMinute
+}