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 = ""
+    
+    }
 }